Components
Segmented Control
Range switcher as a primitive: a hairline pill whose thumb glides between options on a shared-layout spring, with quiet labels and no chrome around it. The light theme darkens the track and raises a white thumb with a soft lift; the dark theme keeps a transparent track and a barely-there thumb. Options and the selected value are props (controlled or uncontrolled). Light and dark via shadcn theme tokens; respects reduced motion.
import { useEffect } from "react"
import { Demo } from "@/components/ui/segmented-control"
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
return (
<div className="w-full">
<Demo />
</div>
)
}
Dependencies
Published
Similar components
Explore more
Part of ssicevs UI — browse the full library on 21st.dev.