# Emboss

> A tactile React component library where state is depth: pressed things depress, active things rise, inputs are recessed wells, and every shadow derives from one movable light source (two CSS variables). Components are distributed as TypeScript source through a shadcn-compatible registry — no npm package, the code lands in the consumer's repo. Requires React 19 and Tailwind CSS v4. MIT licensed.

## Install

Add the registry namespace to components.json:

```json
{ "registries": { "@emboss": "https://embossui.vercel.app/r/{name}.json" } }
```

Then add components: `npx shadcn@latest add @emboss/<name>` — or directly by URL with no configuration: `npx shadcn@latest add https://embossui.vercel.app/r/<name>.json`. The registry index for tooling is https://embossui.vercel.app/r/registry.json.

Design tokens arrive automatically with the first component. Theme with five variables on :root — --light-x, --light-y (light direction), --depth (relief intensity), --accent-h (accent hue in oklch degrees), --radius-scale.

## Component reference

### Button (`@emboss/button`)

A momentary push button that rests embossed, depresses to flush while held, and springs back with a machined overshoot.

Install: `npx shadcn@latest add @emboss/button`

Usage:

```tsx
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <Button variant="accent" size="lg">
      Engage
    </Button>
  );
}
```

#### Button

Extends the native button element. All standard button props are supported.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"default" | "accent" | "danger" | "ghost" | "link"` | "default" | Visual role. Accent and danger carry color in addition to depth; ghost rests flat and presses into the surface; link renders as an inline link. |
| size | `"sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-lg"` | "md" | Control height. The icon sizes render a square footprint for icon-only buttons. |
| render | `ReactElement | (props, state) => ReactElement` | — | Swaps the rendered element while keeping button behavior — the element must stay a real button. For links styled as buttons, put buttonVariants classes on the anchor instead. |
| disabled | `boolean` | false | Disables interaction and dims the control. |

Keyboard: Space — Activates and holds the press. · Enter — Activates the button.

---

### Kbd (`@emboss/kbd`)

A machined keycap for keyboard shortcuts — a semantic kbd element with a raised, lit-from-above profile.

Install: `npx shadcn@latest add @emboss/kbd`

Usage:

```tsx
import { Kbd } from "@/components/ui/kbd";

export function Example() {
  return (
    <p>
      Save with <Kbd>⌘</Kbd> <Kbd>S</Kbd>
    </p>
  );
}
```

#### Kbd

Extends the native kbd element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| children | `ReactNode` | — | The key legend, e.g. ⌘ or Esc. |

---

### Card (`@emboss/card`)

A surface for grouped content with three seatings: raised off the page, flush with it, or recessed into a well.

Install: `npx shadcn@latest add @emboss/card`

Usage:

```tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Output level</CardTitle>
        <CardDescription>Master bus, post-fader.</CardDescription>
      </CardHeader>
      <CardContent>Signal is nominal.</CardContent>
    </Card>
  );
}
```

#### Card

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"raised" | "flush" | "well"` | "raised" | Seating relative to the page surface: lifted, level, or recessed. |

#### CardHeader / CardTitle / CardDescription / CardContent / CardFooter

Layout parts. Each renders a div with a data-slot attribute for styling hooks.

---

### Input (`@emboss/input`)

A recessed text well. Focus brightens the floor of the well; invalid state deepens the recess and inks the text in danger.

Install: `npx shadcn@latest add @emboss/input`

Usage:

```tsx
import { Input } from "@/components/ui/input";

export function Example() {
  return <Input placeholder="Serial number" />;
}
```

#### Input

Extends the native input element and composes with Base UI Field for label and message wiring.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| size | `"sm" | "md" | "lg"` | "md" | Control height of the well. |
| defaultValue / value / onChange | `string / string / ChangeEventHandler` | — | Standard controlled and uncontrolled usage. |

---

### Switch (`@emboss/switch`)

A console slide switch: the thumb travels a milled channel and seats with a sprung settle, with engraved I/O glyphs for state.

Install: `npx shadcn@latest add @emboss/switch`

Usage:

```tsx
import { Switch } from "@/components/ui/switch";

export function Example() {
  return <Switch aria-label="Power" defaultChecked />;
}
```

#### Switch

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| checked / defaultChecked / onCheckedChange | `boolean / boolean / (checked) => void` | — | Controlled and uncontrolled usage. |
| name / value | `string / string` | — | Form participation through a hidden input when used inside a form. |
| disabled | `boolean` | false | Disables interaction and dims the control. |

Data attributes:
- `data-checked / data-unchecked`: Reflects the current state for styling.

Keyboard: Space — Toggles the switch. · Enter — Toggles the switch.

---

### Tabs (`@emboss/tabs`)

Layered panels switched by a flush rail of triggers — the active tab seats into the rail like a latched key.

Install: `npx shadcn@latest add @emboss/tabs`

Usage:

```tsx
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

export function Example() {
  return (
    <Tabs defaultValue="one">
      <TabsList>
        <TabsTrigger value="one">One</TabsTrigger>
        <TabsTrigger value="two">Two</TabsTrigger>
      </TabsList>
      <TabsContent value="one">First panel</TabsContent>
      <TabsContent value="two">Second panel</TabsContent>
    </Tabs>
  );
}
```

#### Tabs

The root. Provides value state to the rail and panels.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `string / string / (value) => void` | — | Controlled and uncontrolled selection. |

#### TabsList

The recessed rail that houses the triggers.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| activateOnFocus | `boolean` | true | Whether arrow-key focus also selects the tab. Emboss defaults this on. |

#### TabsTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `string` | — | The tab this trigger activates. |

Data attributes:
- `data-active`: Present on the active trigger.

#### TabsContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `string` | — | The tab this panel belongs to. |

Keyboard: ArrowLeft+ArrowRight — Moves focus and selection along the rail. · Home — Selects the first tab. · End — Selects the last tab.

---

### Textarea (`@emboss/textarea`)

A multi-line recessed well with focus brightening and content-based growth in supporting browsers.

Install: `npx shadcn@latest add @emboss/textarea`

Usage:

```tsx
import { Textarea } from "@/components/ui/textarea";

export function Example() {
  return <Textarea placeholder="Service notes" />;
}
```

#### Textarea

Extends the native textarea element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| defaultValue / value / onChange | `string / string / ChangeEventHandler` | — | Standard controlled and uncontrolled usage. |

---

### Checkbox (`@emboss/checkbox`)

A small machined well that fills and rises when checked — state reads through color, shape, and depth together.

Install: `npx shadcn@latest add @emboss/checkbox`

Usage:

```tsx
import { Checkbox } from "@/components/ui/checkbox";

export function Example() {
  return <Checkbox defaultChecked aria-label="Enable limiter" />;
}
```

#### Checkbox

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| checked / defaultChecked / onCheckedChange | `boolean / boolean / (checked) => void` | — | Controlled and uncontrolled usage. |
| indeterminate | `boolean` | false | Mixed state for subset selection; exposed as aria-checked=mixed. |
| name / value | `string / string` | — | Form participation through a hidden input. |

Data attributes:
- `data-checked / data-unchecked / data-indeterminate`: Reflects the current state for styling.

Keyboard: Space — Toggles the checkbox.

---

### Radio Group (`@emboss/radio-group`)

Recessed circular wells where the selected option seats an embossed accent pin; arrow keys rove between options.

Install: `npx shadcn@latest add @emboss/radio-group`

Usage:

```tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export function Example() {
  return (
    <RadioGroup defaultValue="48" aria-label="Sample rate">
      <RadioGroupItem value="44.1" aria-label="44.1 kHz" />
      <RadioGroupItem value="48" aria-label="48 kHz" />
    </RadioGroup>
  );
}
```

#### RadioGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `string / string / (value) => void` | — | Controlled and uncontrolled selection. |
| disabled | `boolean` | false | Disables the whole group. |

#### RadioGroupItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `string` | — | The option this item represents. |

Data attributes:
- `data-checked / data-unchecked`: Reflects the selection for styling.

Keyboard: ArrowUp+ArrowDown — Moves selection between options. · Space — Selects the focused option.

---

### Select (`@emboss/select`)

A picker with an embossed trigger and a floating option list; the highlighted option presses into the surface as you traverse.

Install: `npx shadcn@latest add @emboss/select`

Usage:

```tsx
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export function Example() {
  return (
    <Select defaultValue="48">
      <SelectTrigger aria-label="Sample rate">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="44.1">44.1 kHz</SelectItem>
        <SelectItem value="48">48 kHz</SelectItem>
      </SelectContent>
    </Select>
  );
}
```

#### Select

The root; renders no element of its own.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `string / string / (value) => void` | — | Controlled and uncontrolled selection. |
| open / defaultOpen / onOpenChange | `boolean / boolean / (open) => void` | — | Controlled and uncontrolled open state. |

#### SelectTrigger / SelectValue

The embossed control and the rendered current value. The chevron icon is built in.

Data attributes:
- `data-popup-open`: Present on the trigger while the list is open.

#### SelectContent / SelectItem / SelectGroup / SelectLabel

The floating list and its options. Items show a trailing check when selected.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value (SelectItem) | `string` | — | The option value. |

Data attributes:
- `data-highlighted`: Present on the option under the pointer or cursor.

Keyboard: Enter+Space — Opens the list; selects the highlighted option. · ArrowUp+ArrowDown — Moves the highlight through the options. · Esc — Closes the list.

---

### Slider (`@emboss/slider`)

A fader with a milled channel, an embossed accent fill, and a thumb that lifts to a higher elevation while dragged.

Install: `npx shadcn@latest add @emboss/slider`

Usage:

```tsx
import { Slider } from "@/components/ui/slider";

export function Example() {
  return <Slider aria-label="Output gain" defaultValue={62} />;
}
```

#### Slider

Single-value slider. The accessible name belongs to the thumb, which wraps a native range input.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `number / number / (value) => void` | — | Controlled and uncontrolled usage. |
| min / max / step | `number / number / number` | 0 / 100 / 1 | Range and keyboard step. |
| orientation | `"horizontal" | "vertical"` | "horizontal" | Fader direction. |

Data attributes:
- `data-dragging`: Present on the thumb while it is being dragged.

Keyboard: ArrowLeft+ArrowRight — Adjusts by one step. · Home — Jumps to the minimum. · End — Jumps to the maximum.

---

### Input OTP (`@emboss/input-otp`)

A one-time-code field rendered as a row of milled cells over a single real input — paste, autofill, and screen readers all behave normally.

Install: `npx shadcn@latest add @emboss/input-otp`

Usage:

```tsx
import { InputOtp } from "@/components/ui/input-otp";

export function Example() {
  return <InputOtp length={6} aria-label="Verification code" />;
}
```

#### InputOtp

Extends the native input element. Editing happens at the end of the value, like a terminal prompt.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| length | `number` | 6 | Number of character cells. |
| value / defaultValue / onValueChange | `string / string / (value) => void` | — | Controlled and uncontrolled usage. |

Data attributes:
- `data-active`: Present on the cell that will receive the next character while focused.

---

### Tooltip (`@emboss/tooltip`)

A floating micro-plate that labels a control on hover or focus, with mono shortcut hints.

Install: `npx shadcn@latest add @emboss/tooltip`

Usage:

```tsx
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button size="icon" aria-label="Save" />} />
        <TooltipContent>Save the current preset</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}
```

#### TooltipProvider

Groups tooltips so neighbors open without re-waiting the delay.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| delay | `number` | 600 | Hover delay in milliseconds before the tooltip opens. |

#### Tooltip / TooltipTrigger / TooltipContent

Root state, the anchored control, and the floating plate.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| sideOffset | `number` | 8 | Gap between trigger and plate (TooltipContent). |

Keyboard: Tab — Focusing the trigger shows the tooltip. · Esc — Hides the tooltip.

---

### Popover (`@emboss/popover`)

A floating panel anchored to its trigger, with title and description wired for assistive tech.

Install: `npx shadcn@latest add @emboss/popover`

Usage:

```tsx
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover";

export function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button>Calibrate</Button>} />
      <PopoverContent>
        <PopoverTitle>Calibration</PopoverTitle>
        <PopoverDescription>Adjust the reference level.</PopoverDescription>
      </PopoverContent>
    </Popover>
  );
}
```

#### Popover / PopoverTrigger / PopoverContent

Root state, anchored trigger, and the floating panel. Title and description parts label the panel.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| open / defaultOpen / onOpenChange | `boolean / boolean / (open) => void` | — | Controlled and uncontrolled open state. |
| sideOffset | `number` | 8 | Gap between trigger and panel (PopoverContent). |

Keyboard: Esc — Closes the popover and returns focus.

---

### Dialog (`@emboss/dialog`)

A modal plate at the highest float elevation; the page physically recesses behind it while focus is trapped.

Install: `npx shadcn@latest add @emboss/dialog`

Usage:

```tsx
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export function Example() {
  return (
    <Dialog>
      <DialogTrigger render={<Button>Open</Button>} />
      <DialogContent>
        <DialogTitle>Write preset</DialogTitle>
        <DialogDescription>This overwrites slot A.</DialogDescription>
        <DialogFooter>
          <DialogClose render={<Button variant="ghost">Cancel</Button>} />
          <Button variant="accent">Write</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

#### Dialog / DialogTrigger / DialogContent

Root state, trigger, and the modal plate. DialogTitle and DialogDescription are required for accessible naming; DialogClose closes from inside.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| open / defaultOpen / onOpenChange | `boolean / boolean / (open) => void` | — | Controlled and uncontrolled open state. |
| showCloseButton | `boolean` | true | Whether DialogContent renders the corner close button. |

Keyboard: Esc — Closes the dialog and returns focus to the trigger. · Tab — Cycles focus inside the dialog while open.

---

### Sheet (`@emboss/sheet`)

An edge-anchored tray that slides in from any side and hovers above the page with a live penumbra.

Install: `npx shadcn@latest add @emboss/sheet`

Usage:

```tsx
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

export function Example() {
  return (
    <Sheet>
      <SheetTrigger render={<Button>Open</Button>} />
      <SheetContent side="right">
        <SheetTitle>Patch bay</SheetTitle>
        <SheetDescription>Route signals between modules.</SheetDescription>
      </SheetContent>
    </Sheet>
  );
}
```

#### Sheet / SheetTrigger / SheetContent

Root state, trigger, and the edge tray. SheetTitle and SheetDescription label the tray.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| side | `"top" | "right" | "bottom" | "left"` | "right" | Which edge the tray is anchored to (SheetContent). |
| open / defaultOpen / onOpenChange | `boolean / boolean / (open) => void` | — | Controlled and uncontrolled open state. |

Keyboard: Esc — Closes the sheet and returns focus to the trigger.

---

### Dropdown Menu (`@emboss/dropdown-menu`)

A floating menu of actions with submenus, checkbox and radio items; the highlighted row presses momentarily into the surface.

Install: `npx shadcn@latest add @emboss/dropdown-menu`

Usage:

```tsx
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button>Options</Button>} />
      <DropdownMenuContent>
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

#### DropdownMenu / DropdownMenuTrigger / DropdownMenuContent

Root state, trigger, and the floating list.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| sideOffset | `number` | 6 | Gap between trigger and menu (DropdownMenuContent). |

#### DropdownMenuItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"default" | "destructive"` | "default" | Destructive items carry danger ink. |
| onClick | `MouseEventHandler` | — | Runs when the item is activated. |

Data attributes:
- `data-highlighted`: Present on the virtually focused item.

#### DropdownMenuCheckboxItem / DropdownMenuRadioGroup / DropdownMenuRadioItem

Stateful items with check and radio indicators.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| checked / defaultChecked / onCheckedChange | `boolean / boolean / (checked) => void` | — | Checkbox item state (checkbox items). |

#### DropdownMenuLabel / DropdownMenuSeparator / DropdownMenuGroup / DropdownMenuSub*

Engraved group labels, machined separators, grouping, and submenu parts.

Keyboard: ArrowDown+ArrowUp — Moves the highlight through the menu. · Enter — Activates the highlighted item. · ArrowRight — Opens a submenu. · Esc — Closes the menu and returns focus.

---

### Toast (`@emboss/toast`)

Floating notification plates with an imperative handle — call toast.add anywhere and the mounted Toaster renders it.

Install: `npx shadcn@latest add @emboss/toast`

Usage:

```tsx
import { Button } from "@/components/ui/button";
import { toast, Toaster } from "@/components/ui/toast";

export function Example() {
  return (
    <>
      <Toaster />
      <Button
        onClick={() => {
          toast.add({
            title: "Preset written",
            description: "Slot A updated.",
          });
        }}
      >
        Write preset
      </Button>
    </>
  );
}
```

#### Toaster

Mount once near the app root; renders the stacked plates in the bottom-right corner.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| className | `string` | — | Extends the viewport, e.g. to reposition the stack. |

#### toast

The imperative manager. toast.add({ title, description, type }) returns an id; toast.close(id) dismisses; toast.promise(promise, { loading, success, error }) tracks an async task.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| timeout | `number` | 5000 | Auto-dismiss delay for an added toast, in milliseconds. |

Keyboard: F6 — Moves focus to the toast viewport.

---

### Command (`@emboss/command`)

A filtering command list with combobox semantics — the virtual highlight walks visible options while focus stays in the input.

Install: `npx shadcn@latest add @emboss/command`

Usage:

```tsx
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

export function Example() {
  return (
    <Command>
      <CommandInput placeholder="Search…" aria-label="Search commands" />
      <CommandList>
        <CommandEmpty>No results.</CommandEmpty>
        <CommandGroup heading="Edit">
          <CommandItem value="Copy">Copy</CommandItem>
          <CommandItem value="Paste">Paste</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}
```

#### Command / CommandInput / CommandList / CommandEmpty

The filtering container, its combobox input, the listbox, and the no-results state.

#### CommandGroup

A labelled group that hides itself when none of its items match.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| heading | `string` | — | The engraved group label. |

#### CommandItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `string` | — | The text the item is filtered by. |
| keywords | `string[]` | — | Extra search terms. |
| onSelect | `() => void` | — | Runs on Enter or click. |
| disabled | `boolean` | false | Removes the item from filtering and selection. |

Data attributes:
- `data-active`: Present on the virtually highlighted option.

Keyboard: ArrowDown+ArrowUp — Moves the highlight through visible options. · Home+End — Jumps to the first or last option. · Enter — Selects the highlighted option.

---

### Badge (`@emboss/badge`)

An etched part-number chip in neutral, semantic, and outline tints — the label text always carries the meaning.

Install: `npx shadcn@latest add @emboss/badge`

Usage:

```tsx
import { Badge } from "@/components/ui/badge";

export function Example() {
  return <Badge variant="positive">Calibrated</Badge>;
}
```

#### Badge

Extends the native span element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"neutral" | "accent" | "positive" | "warning" | "danger" | "outline"` | "neutral" | Tint of the chip; semantic variants use the matching surface tints. |

---

### Separator (`@emboss/separator`)

A machined score line — a hairline groove whose catch-light follows the global light source.

Install: `npx shadcn@latest add @emboss/separator`

Usage:

```tsx
import { Separator } from "@/components/ui/separator";

export function Example() {
  return <Separator className="my-4" />;
}
```

#### Separator

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| orientation | `"horizontal" | "vertical"` | "horizontal" | Direction of the score line. |

---

### Skeleton (`@emboss/skeleton`)

A debossed empty pocket awaiting content, with a slow light sheen sweeping across it.

Install: `npx shadcn@latest add @emboss/skeleton`

Usage:

```tsx
import { Skeleton } from "@/components/ui/skeleton";

export function Example() {
  return <Skeleton className="h-4 w-40" />;
}
```

#### Skeleton

Extends the native div element; size it with width and height classes.

---

### Table (`@emboss/table`)

A semantic table with engraved hairline rules, an etched header strip, and tint-first hover rows.

Install: `npx shadcn@latest add @emboss/table`

Usage:

```tsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

export function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Channel</TableHead>
          <TableHead className="text-right">Level</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Drum bus</TableCell>
          <TableCell className="text-right font-mono tabular-nums">
            −6.2 dB
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}
```

#### Table / TableHeader / TableBody / TableFooter / TableRow / TableHead / TableCell / TableCaption

Semantic table parts; the container scrolls horizontally when columns overflow. Numeric columns should use font-mono tabular-nums.

Data attributes:
- `data-selected`: Set it on a TableRow to latch the row into the surface.

---

### Accordion (`@emboss/accordion`)

Disclosure rows machined into one housing — the open panel recesses into the chassis with a sprung height transition.

Install: `npx shadcn@latest add @emboss/accordion`

Usage:

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export function Example() {
  return (
    <Accordion>
      <AccordionItem value="power">
        <AccordionTrigger>Power</AccordionTrigger>
        <AccordionContent>48V phantom power per channel.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

#### Accordion

The housing. Pass an array value since multiple panels may open.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `string[] / string[] / (value) => void` | — | Controlled and uncontrolled open panels. |
| multiple | `boolean` | false | Allow several panels open at once. |

#### AccordionItem / AccordionTrigger / AccordionContent

One row: its value, the flush trigger, and the recessed panel.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `string` | — | Identifies the item (AccordionItem). |

Keyboard: ArrowDown+ArrowUp — Moves focus between triggers. · Enter — Toggles the focused panel. · Space — Toggles the focused panel.

---

### Avatar (`@emboss/avatar`)

A portrait set into a machined bezel — the image sits debossed inside the ring and the fallback engraves mono initials.

Install: `npx shadcn@latest add @emboss/avatar`

Usage:

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

export function Example() {
  return (
    <Avatar>
      <AvatarImage src="/operator.jpg" alt="Operator" />
      <AvatarFallback>OP</AvatarFallback>
    </Avatar>
  );
}
```

#### Avatar / AvatarImage / AvatarFallback

The bezel, the portrait, and the engraved initials shown while the image loads or fails.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| size | `"sm" | "md" | "lg"` | "md" | Diameter of the bezel (Avatar). |
| src / alt | `string / string` | — | Image source and description (AvatarImage). |

---

### Breadcrumb (`@emboss/breadcrumb`)

A trail of locations where the current page sits gently debossed and carries aria-current.

Install: `npx shadcn@latest add @emboss/breadcrumb`

Usage:

```tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

export function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Bench</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Channel 3</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}
```

#### Breadcrumb / BreadcrumbList / BreadcrumbItem / BreadcrumbLink / BreadcrumbPage / BreadcrumbSeparator / BreadcrumbEllipsis

Semantic nav, ordered list, links, the latched current page, and presentation-only separators.

---

### Pagination (`@emboss/pagination`)

Page navigation where the current page is a latched, pressed-in key with tabular numerals.

Install: `npx shadcn@latest add @emboss/pagination`

Usage:

```tsx
import {
  Pagination,
  PaginationContent,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

export function Example() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationPrevious href="#previous" />
        <PaginationLink href="#1" isActive>
          1
        </PaginationLink>
        <PaginationLink href="#2">2</PaginationLink>
        <PaginationNext href="#next" />
      </PaginationContent>
    </Pagination>
  );
}
```

#### Pagination / PaginationContent / PaginationLink / PaginationPrevious / PaginationNext / PaginationEllipsis

A labelled nav of page links rendered as anchors — wire href (or compose with your router's Link via the className).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| isActive | `boolean` | false | Marks the current page: latched depth plus aria-current (PaginationLink). |

---

### Segmented Control (`@emboss/segmented-control`)

A bank of positions milled into one housing — a debossed carriage glides between segments with a sprung settle.

Install: `npx shadcn@latest add @emboss/segmented-control`

Usage:

```tsx
import {
  SegmentedControl,
  SegmentedControlItem,
} from "@/components/ui/segmented-control";

export function Example() {
  return (
    <SegmentedControl defaultValue="m" aria-label="Size">
      <SegmentedControlItem value="s">S</SegmentedControlItem>
      <SegmentedControlItem value="m">M</SegmentedControlItem>
      <SegmentedControlItem value="l">L</SegmentedControlItem>
    </SegmentedControl>
  );
}
```

#### SegmentedControl

Radio-group semantics: exactly one segment is always engaged. Label the group with aria-label.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `string / string / (value) => void` | — | Controlled and uncontrolled selection. |

#### SegmentedControlItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `string` | — | The position this segment represents. |
| disabled | `boolean` | false | Removes the segment from selection. |

Data attributes:
- `data-checked`: Present on the engaged segment.

Keyboard: ArrowLeft+ArrowRight — Moves the carriage to the previous or next segment. · Space — Engages the focused segment.

---

### Progress (`@emboss/progress`)

A milled channel filling with accent — indeterminate state sweeps instead of pretending to know the total.

Install: `npx shadcn@latest add @emboss/progress`

Usage:

```tsx
import { Progress } from "@/components/ui/progress";

export function Example() {
  return <Progress value={64} aria-label="Transfer" />;
}
```

#### Progress

Pass value={null} for indeterminate. Label with aria-label or the ProgressLabel part.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `number | null` | — | Current progress; null renders the indeterminate sweep. |
| min / max | `number / number` | 0 / 100 | Range of the channel. |

#### ProgressLabel / ProgressValue

Optional labelled readout parts, wired to the progressbar by the primitive.

---

### Stepper (`@emboss/stepper`)

A machined number input — a mono readout milled into the chassis, flanked by keycap buttons that auto-repeat when held.

Install: `npx shadcn@latest add @emboss/stepper`

Usage:

```tsx
import { Stepper } from "@/components/ui/stepper";

export function Example() {
  return <Stepper defaultValue={64} min={0} max={127} aria-label="Velocity" />;
}
```

#### Stepper

Extends the underlying number field root. The readout is also a scrub area — drag it horizontally to change the value.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `number / number / (value) => void` | — | Controlled and uncontrolled usage. |
| min / max / step | `number / number / number` | — | Range and step of the field. |
| disabled | `boolean` | false | Disables the field and keycaps. |

Keyboard: ArrowUp+ArrowDown — Steps the value. · Home+End — Jumps to min or max.

---

### Knob (`@emboss/knob`)

A rotary control machined into a recess — drag vertically to turn it, pro-audio style, or drive it entirely from the keyboard.

Install: `npx shadcn@latest add @emboss/knob`

Usage:

```tsx
import { Knob } from "@/components/ui/knob";

export function Example() {
  return (
    <Knob defaultValue={64} min={0} max={127} aria-label="Filter cutoff" />
  );
}
```

#### Knob

A custom slider: role=slider with full value semantics. Always provide aria-label or aria-labelledby.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `number / number / (value) => void` | — | Controlled and uncontrolled usage. |
| min / max / step | `number / number / number` | 0 / 100 / 1 | Range and step of the dial. |
| getValueText | `(value) => string` | — | Formats the announced value, e.g. degrees or decibels. |
| size | `"md" | "lg"` | "md" | Diameter of the recess. |
| disabled | `boolean` | false | Disables interaction. |

Data attributes:
- `data-disabled`: Present while disabled.

Keyboard: ArrowUp+ArrowRight — Raises the value by one step. · ArrowDown+ArrowLeft — Lowers the value by one step. · Shift+ArrowUp — Coarse move: ten steps at once. · PageUp+PageDown — Jumps ten steps. · Home+End — Jumps to min or max.

---

### Meter (`@emboss/meter`)

A level meter milled into the chassis — zone colors are painted into the channel and a shutter covers what the value hasn't reached.

Install: `npx shadcn@latest add @emboss/meter`

Usage:

```tsx
import { Meter } from "@/components/ui/meter";

export function Example() {
  return <Meter value={64} aria-label="Master level" />;
}
```

#### Meter

Read-only meter semantics from the primitive; label with aria-label or the MeterLabel part.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `number` | — | Current reading. |
| min / max | `number / number` | 0 / 100 | Range of the scale. |
| warnAt / dangerAt | `number / number` | 0.7 / 0.9 | Zone boundaries as fractions of the range. |

#### MeterLabel / MeterValue

Optional labelled readout parts, wired to the meter by the primitive.

---

### Chat Message (`@emboss/chat-message`)

A conversation surface with physical turn-taking — user messages are placed onto the surface, assistant messages are milled into it.

Install: `npx shadcn@latest add @emboss/chat-message`

Usage:

```tsx
import { ChatLog, ChatMessage } from "@/components/ui/chat-message";

export function Example() {
  return (
    <ChatLog aria-label="Conversation">
      <ChatMessage from="user">Align the heads.</ChatMessage>
      <ChatMessage from="assistant">
        Aligning. Azimuth is within tolerance.
      </ChatMessage>
    </ChatLog>
  );
}
```

#### ChatLog

The conversation container: role=log makes appended messages announce politely. Label it with aria-label.

#### ChatMessage

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| from | `"user" | "assistant" | "system"` | "assistant" | Who is speaking; sets alignment and depth (placed plate, milled output, or flush annotation). |

Data attributes:
- `data-from`: Reflects the speaker for styling.

---

### Thinking Indicator (`@emboss/thinking-indicator`)

Three pockets breathe between recessed and flush while the assistant works — a status region with visible text.

Install: `npx shadcn@latest add @emboss/thinking-indicator`

Usage:

```tsx
import { ThinkingIndicator } from "@/components/ui/thinking-indicator";

export function Example() {
  return <ThinkingIndicator label="Searching…" />;
}
```

#### ThinkingIndicator

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | "Thinking…" | Visible status text, also announced to screen readers. |

---

### Streaming Text (`@emboss/streaming-text`)

Token-streaming text whose tail fades as if still being machined, with a blinking caret slab and aria-busy semantics.

Install: `npx shadcn@latest add @emboss/streaming-text`

Usage:

```tsx
import { StreamingText } from "@/components/ui/streaming-text";

export function Example({ partial, done }: { partial: string; done: boolean }) {
  return <StreamingText text={partial} isStreaming={!done} />;
}
```

#### StreamingText

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | — | The text received so far. |
| isStreaming | `boolean` | false | While true: the tail fades, the caret blinks, and aria-busy is set. |

Data attributes:
- `data-streaming`: Present while text is still arriving.