Chewypixel component
Segmented Control
Mutually exclusive options with a highlight that slides to the selected one.
Installation
npx shadcn@latest add https://chewypixel.io/r/segmented-control.jsonUsage
"use client";
import { useState } from "react";
import { SegmentedControl } from "@/components/ui/segmented-control";
export function RangePicker() {
const [range, setRange] = useState("week");
return (
<SegmentedControl
value={range}
onChange={setRange}
aria-label="Range"
options={[
{ value: "day", label: "Day" },
{ value: "week", label: "Week" },
{ value: "month", label: "Month" },
]}
/>
);
}Props
valueThe selected value.
string
optionsThe options in display order. Icon-only options need an ariaLabel.
{ value, label, ariaLabel? }[]
onChangeCalled with the new value when the selection changes.
(value) => void
sizeThe height: 28px for sm, 36px for default.
"sm" | "default" = "sm"
Released under the MIT License.
More components
- TabsUnderline tabs. The underline slides to the active tab and resizes to fit its label.
- SwitchA switch whose thumb springs across when toggled and stretches while pressed.
- CheckboxA checkbox that draws its check mark and squishes when pressed.
- StatusA colored dot and a label for showing state, with an optional pulse.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.