Shadcn.io is not affiliated with official shadcn/ui
Segmented Control
Segmented control button group with ghost variant for tab-like navigation and content switching
Segments divide spaces—controls enable smooth context switching. This React component combines shadcn/ui's Button and ButtonGroup components with ghost variant for minimal segmented controls with stateful selection. Built on Radix UI with variant switching between default (active) and ghost (inactive) states using size="sm" and w-fit containers for compact navigation controls, the pattern delivers iOS-style segmented controls with subtle visual distinction. Perfect for settings panels switching between configuration sections, dashboard tabs toggling between overview and details, app navigation between top-level sections, or any interface where tab-like controls should feel lightweight—button groups create unified segments, ghost variant provides minimal inactive state, default variant highlights selection clearly.
Segmented Control preview
Installation
Related Components
Timeline Controls
Time period selectors
View Switcher
Layout mode controls
Toggle Group
Segmented toggle controls
Tabs Component
Content section tabs
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons
FAQ
Was this page helpful?
Sign in to leave feedback.