Components

Segmented Control

Pill segment switcher: the raised pill glides between segments as a shared element on a snappy spring.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add segmented-control

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { SegmentedControl } from "@lumora/ui/components/segmented-control";
// or from the barrel:
import { SegmentedControl } from "@lumora/ui";

Props worth knowing

items take { value, label, disabled? }; the raised pill glides between segments as a shared element on the snap spring. Controlled via value/onValueChange or uncontrolled via defaultValue; size: "sm" | "md". Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.