# Metafy UI

Metafy's Svelte 5 design system, styled with StyleX: `@metafy/ui`, in `packages/ui` of the Metafy monorepo.

Each component's markdown has its import line, usage rules (do and don't), props and example sections with their
code. Its page, /components/<slug>, renders every example inside an element marked data-example="<id>", and its
playground takes props from the query string: /components/<slug>?<prop>=<value>.

Components take props when their layout is fixed and are composed from parts when callers arrange the content; the
import line shows which. `styles` props are layout-only.

## Components

- [Alert Dialog](/components/alert-dialog.md): A modal question or message that interrupts people and waits for an answer.
- [Avatar](/components/avatar.md): A person’s or community’s picture, with their initials when there is none; `AvatarGroup` stacks several.
- [Badge](/components/badge.md): A short label for a status, a count or a category; clickable, it is a filter chip or a toggle.
- [Button](/components/button.md): Triggers an action, or links somewhere while looking like an action.
- [Chart](/components/chart.md): The frame for TanStack Charts: series colors from a config, the chart palette, and shadcn’s tooltip with a colored marker, name and value per series.
- [Combobox](/components/combobox.md): Picks one value, or several, from a list people search, such as games, members or tags.
- [Command](/components/command.md): A searchable list of commands or options, inline or as a palette.
- [Data Table](/components/data-table.md): A TanStack table on the Table parts: pagination that fetches as it goes, column choices and ordering, pinned and nested rows, and row dragging.
- [Dialog](/components/dialog.md): A window over the page for a focused task, such as a short form, and a bottom sheet on phones.
- [DropdownMenu](/components/dropdown-menu.md): A menu of actions or options, opened from a button.
- [Input](/components/input.md): A single-line text field.
- [InputGroup](/components/input-group.md): An input or textarea with icons, text or buttons inside its border.
- [InputOTP](/components/input-otp.md): Enters a one-time code, one character per slot.
- [Kbd](/components/kbd.md): A keyboard key, or a group of keys for a shortcut.
- [Label](/components/label.md): Names a form control. Clicking it focuses or toggles the control.
- [Popover](/components/popover.md): A floating panel of rich content, opened from a trigger.
- [Range Calendar](/components/range-calendar.md): A calendar for picking a start and an end date.
- [Select](/components/select.md): Picks one value, or several, from a list in a form.
- [Separator](/components/separator.md): A 1px rule between groups of content, across or down.
- [Sheet](/components/sheet.md): A panel from the side of the screen, and a bottom sheet with a drag handle on phones, for tasks that need more room than a dialog.
- [Slider](/components/slider.md): Picks a value, or a range, by dragging along a track.
- [Toaster](/components/sonner.md): Brief messages in the corner, from svelte-sonner’s `toast()`.
- [Spinner](/components/spinner.md): A spinning ring for work in progress, announced to screen readers.
- [Switch](/components/switch.md): Turns a setting on or off, taking effect immediately.
- [Table](/components/table.md): The parts of a data table: a filled header, rows that highlight on hover, and sticky and pinned options for long and wide tables. Build sortable, paginated tables with Data Table.
- [Textarea](/components/textarea.md): A multi-line text field that grows with its content.
- [Tooltip](/components/tooltip.md): A short label for an element, shown while it is hovered or focused, or tapped on touch screens.