Segmented control and underline tabs with an animated indicator.
npx shadcn@latest add @lokalhost/tabsThe source is copied to components/ui/tabs.tsx — it’s yours to edit.
import { Tabs } from "@/components/ui/tabs";
<Tabs tabs={["Day", "Week", "Month"]} value={range} onChange={setRange} />
<Text style={{ fontSize: 28, fontWeight: "700" }}>{STEPS[range]} steps</Text>| Prop | Type | Default | Description |
|---|---|---|---|
tabsrequired | string[] | — | Tab labels in order. |
valuerequired | number | — | Index of the selected tab. |
onChangerequired | (index: number) => void | — | Called with the pressed tab index. |
variant | "segmented" | "underline" | "segmented" | Pill-in-track or underline indicator. |