Segmented Control
tetra-ui/segmented-controlFreeComponent
A native single-select control for choosing between a small set of options.
Live preview
live · rendered by the registry
Rendered by tetra-ui on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://tetra-ui.com/r/segmented-control.jsonSource
1import type {2 SegmentedControlItemLabelProps,3 SegmentedControlItemProps,4 SegmentedControlProps,5} from "./segmented-control.types";67export const SegmentedControlItemLabel = (8 _: SegmentedControlItemLabelProps9) => {10 return null;11};1213SegmentedControlItemLabel.displayName = "SegmentedControlItemLabel";1415export const SegmentedControlItem = (_: SegmentedControlItemProps) => {16 return null;17};1819SegmentedControlItem.displayName = "SegmentedControlItem";2021export const SegmentedControl = (_: SegmentedControlProps) => {22 return null;23};
What it pulls in
npm packages
Files it writes
More from tetra-ui
All 41 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | tetra-ui | Components | Free | 1 dep | |
| Action Inputaction-input | tetra-ui | Components | Free | no deps | |
| Alertalert | tetra-ui | Components | Free | no deps | |
| Avataravatar | tetra-ui | Components | Free | no deps | |
| Badgebadge | tetra-ui | Components | Free | no deps | |
| Bottom Sheetbottom-sheet | tetra-ui | Components | Free | 4 deps · 7 files | |
| Buttonbutton | tetra-ui | Components | Free | no deps | |
| Cardcard | tetra-ui | Components | Free | no deps |
