# Components

The YotoShelf component library is built on [shadcn-svelte](https://next.shadcn-svelte.com/) with custom tokens applied. Components are available from the design system submodule at `frontend/design/`.

## Button

Variants: `default` (orange primary), `secondary`, `outline`, `ghost`, `destructive`, `link`.

Sizes: `default`, `sm`, `lg`, `icon`.

All buttons use `--font-body` at `--text-sm` with `--font-weight-semibold`.

## Card

Cards use `--color-card` background, `--color-border` border, and `--radius-xl` border radius. The hover state lifts the card with `--shadow-card-hover` and shifts the border to `--color-primary`.

## Badge

Variants map to semantic colours: `default`, `secondary`, `destructive`, `outline`. Used for status labels, auth badges, and method indicators in the API reference.

## Input

All form inputs use `--color-border` borders and `--color-background` fill. Focus state uses a `--color-primary` ring. Error state uses `--color-destructive`.

## Dialog

Modal dialogs use a backdrop blur overlay. The dialog container uses `--color-background` and `--radius-xl`. Close button is in the top-right corner.

## Consuming components

```svelte
<script>
  import { Button } from '$lib/components/ui/button';
  import { Badge } from '$lib/components/ui/badge';
</script>

<Button variant="default">Publish card</Button>
<Badge variant="secondary">draft</Badge>
```

Components are re-exported from `frontend/src/lib/components/ui/`. Do not import directly from shadcn-svelte — always use the re-export path so token overrides apply.