Tabs
Click any tab — live
Anatomy
Glass capsule with a sliding white indicator. The active tab carries --bg-elev background; inactive tabs are transparent.
import { SlidingPill } from "@matter/components";
<SlidingPill
items={[
{ label: "Light", value: "light" },
{ label: "Dark", value: "dark" },
]}
value="light"
/>Use the
SlidingPill primitive — the indicator timing comes free.Don't author a custom tab indicator. The system has one motion grammar for this.