Dev Design LibrarySegmented Control Components
Dev Design Library indexes 62 segmented control components from 35 open-source UI libraries, with the most coming from Watermelon UI, Amicro Micro Transitions, Toolcraft, Arc Library and Halaska UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Segmented control components belong to the Inputs group.
Glide SelectReact Bits · ReactSelect chip whose menu pops out of its own corner and whose single hover highlight glides between rows, remembering…
Segmented ControlChakra UI · ReactUsed to pick one choice from a linear set of options
Segmented ControlReact Spectrum · ReactA SegmentedControl is a mutually exclusive group of buttons used for view switching.
Segmented Controlcoss ui · ReactA visual pattern for presenting related choices, navigation destinations, filters, or content views.
Segmented ControlRadix Themes · React
Halo SegmentedCult UI · ReactSegmented control with frosted track, gradient rim, and spring sliding thumb
Segment GroupArk UI · ReactOrganizes and navigates between sections in a view.
Ab Segmented TabsAmicro Micro Transitions · ReactSegmented control where active letter (A or B) slides into a solid pill.
Segment GroupPark UI · ReactA form input component for selecting one option from a segmented control.
SegmentedLobe UI · ReactBase UI-powered Segmented control — toggle-group semantics with a sliding active indicator. Drops antd dependency in…
Model SelectorSpectrum UI · ReactA model picker as a radio list or segmented control, with badges and disabled states.
TabsFluid Functionalism · ReactHorizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions…
Anchor Grid ControlToolcraft · React
Number Ticker 08 - Segmented LCDShadcn Space · ReactA retro seven-segment LCD display that renders digits as illuminated SVG segments, perfect for odometers, counters…
Segmented Toggle ButtonOpenSourceUI · React
Day Pickeruselayouts · ReactA custom day picker component with smooth animations.
Toggle PillsKinetics · HTML/CSSSelected pill pops with a spring scale
Segmented ControlBoardUI · ReactSliding pill option switcher.
Choice GroupSwiftPieces · SwiftUIRadio and checkbox rows on a glass card: one red drop flows from ring to ring, and checked boxes flood red with a…
Icon TabsNotra · ReactA segmented tab selector where only the active tab shows its icon, sliding in beside the label. Built on the Base UI…
Tabs SubtleNexvyn UI · ReactA pill-style tab list where the selected indicator springs between tabs, built on the WAI-ARIA tabs pattern with full…
Segment GroupShark UI · ReactFollows the selected item.
Animated Segmented ControlSona UI · React
Color Watch SelectorWatermelon UI · React
Billing toggleArc Library · ReactA monthly and yearly switch with a savings badge and prices that roll to the new amount.
Glass Toggle Groupglasscn · ReactA segmented control with a sliding glass puck indicator supporting icons, text, or any React content.
Segmented ControlUI Lab · ReactThe pill stretches toward your pick like an inchworm, recoloring each label as its edge crosses.
TabsHextaUI · ReactSwitch between views with an indicator that slides to the active tab, as a segmented control or an underline, and…
Language Pair SelectorLocalMode · ReactA paired source/target language picker — From/To pill toggles with flag + name + a swap button, or a compact {source}…
Autonomy PatternHalaska UI · React
Mode SwitcherSpaceUI · React
Liquid SegmentedLiquefy UI · ReactSegmented control in liquid glass style. Controle segmentado em estilo vidro líquido.
Glass SegmentedOpaline · ReactIcon segmented picker whose glass bubble stretches like liquid as it travels.
Segmented ControlReactFrame · ReactA compact radio-style switch between a few options with a sliding animated thumb, solid or soft styles, icons…
Segment Groupark-cn · ReactA shadcn-style segment group component built with Ark UI primitives.
Rubber SegmentReact Bits · ReactSegmented control with a rubber thumb: taps stretch it across the gap and squash it onto the target, and you can grab…
Perspective Layout SwitcherAmicro Micro Transitions · ReactInteractive toggle switching between Grid and 3D Stack layout icons.
Base Ui SegmentedLobe UI · React
TabsFluid Functionalism · ReactHorizontal tab navigation with fluid hover, animated pill selection indicator, and fluid font-weight transitions. Base…
Channel TabsToolcraft · React
Progress 07 - Segmented StorageShadcn Space · ReactMulti segment storage bar showing photos, apps, documents, system, and other usage with a legend and free space.
Emoji Spree Choice ChipsWatermelon UI · React
Segmented controlArc Library · ReactSwitch between a small set of related views.
Segmented Mode PickerLocalMode · ReactA pill toggle for 2–4 mutually-exclusive named modes (ring-bordered container, active item tinted + ringed), plus a…
Segmented ControlHalaska UI · React
Glass TabsOpaline · ReactSegmented control with a glass bubble that glides between tabs.
Segmented Link StretchAmicro Micro Transitions · ReactMulti-joint segmented pill chain expanding and snapping together.
Segmented ControlToolcraft · React
Fractional PickerWatermelon UI · React
Toggle groupArc Library · ReactA row of icon or text toggles, single or multiple: one pressed fill glides between options, or each fades in on its…
Multi Tab BarAmicro Micro Transitions · React
Tabs ControlToolcraft · React
Fractional Picker BaseWatermelon UI · React
Frequency SelectorWatermelon UI · React
Frequency Selector BaseWatermelon UI · React
Option ListWatermelon UI · React
Option PickerWatermelon UI · React
Quick Option PickerWatermelon UI · React
Quick Option Picker BaseWatermelon UI · React
Slot PickerWatermelon UI · React
Status PickerWatermelon UI · React
Status Picker BaseWatermelon UI · React
Libraries with segmented control components
Related categories
- React Segmented Control Components
- Tailwind CSS Segmented Control Components
- Animated Segmented Control Components
- Input Components
- Text Input Components
- Select Components
- Form Field Components
- Form Components
- Textarea Components
- Switch Components
- Checkbox Components
- Slider Components
- Radio Components
- Combobox Components
- File Upload Components
- Search Input Components
- Date Picker Components
- Login Form Components
- Color Picker Components