# @zedensix/ui

> Svelte 5 components and the theme shared by OpenCount, LocalAssistant, Homerun, Sergio's, Nuvio Web and Penombre. SvelteKit 3, Svelte 5 runes, Tailwind CSS v4.

Everything in one file: https://ui.zedensix.com/llms-full.txt. An MCP server with the same content is at https://ui.zedensix.com/mcp, or runs locally with `npx -y @zedensix/ui`.

## Blocks

App-level pieces the apps shared copies of.

- [Accent toggle](https://ui.zedensix.com/blocks/accent-toggle.md): The accent presets: a swatch strip on desktop, labelled rows on phones.
- [Auth shell](https://ui.zedensix.com/blocks/auth-shell.md): Centered sign-in layout: heading, optional brand and footer.
- [Bottom nav](https://ui.zedensix.com/blocks/bottom-nav.md): The phone tab bar: top-level destinations, the current one lit.
- [Command palette](https://ui.zedensix.com/blocks/command-palette.md): A ⌘K search over pages and actions: a dialog on desktop, a tall drawer on phones.
- [Copy field](https://ui.zedensix.com/blocks/copy-field.md): Monospace value with a copy button and a promise toast.
- [Document title](https://ui.zedensix.com/blocks/document-title.md): The tab's <title> from the page title, suffixed with the app.
- [Empty state](https://ui.zedensix.com/blocks/empty-state.md): Icon, title, subtitle and an action for an empty list.
- [Error page](https://ui.zedensix.com/blocks/error-page.md): Status, message and error id, with a link back home.
- [Fab](https://ui.zedensix.com/blocks/fab.md): Floating action button above the phone tab bar, with a haptic tap.
- [Icon button](https://ui.zedensix.com/blocks/icon-button.md): Round icon button whose tooltip is its accessible name.
- [Install prompt](https://ui.zedensix.com/blocks/install-prompt.md): One-time PWA install sheet: native prompt or the steps.
- [Music player](https://ui.zedensix.com/blocks/music-player.md): An audio player bar with a queue: play, skip, seek and volume.
- [Nav cards](https://ui.zedensix.com/blocks/nav-cards.md): Phone-only list of a section's tabs as cards.
- [New password fields](https://ui.zedensix.com/blocks/new-password-fields.md): New password with a reveal button, a strength meter and the rules it must pass.
- [Option group](https://ui.zedensix.com/blocks/option-group.md): Radio cards for a settings choice, each with an icon or swatch.
- [Otp field](https://ui.zedensix.com/blocks/otp-field.md): A one-time code: digits only, autofilled from SMS, posted as one field.
- [Password input](https://ui.zedensix.com/blocks/password-input.md): A password field with a button to reveal what was typed.
- [Responsive sheet](https://ui.zedensix.com/blocks/responsive-sheet.md): A dialog on desktop, a bottom drawer on phones.
- [Setting switch](https://ui.zedensix.com/blocks/setting-switch.md): Labelled switch row for settings forms.
- [Stat card](https://ui.zedensix.com/blocks/stat-card.md): Glass card with an icon, a value and a hint, optionally a link.
- [Stepper](https://ui.zedensix.com/blocks/stepper.md): A multi-step flow: labelled markers on desktop, a progress bar and the current step on phones.
- [Tab nav](https://ui.zedensix.com/blocks/tab-nav.md): Pill tab bar of links, the current page's tab highlighted.
- [Tab section](https://ui.zedensix.com/blocks/tab-section.md): Tabbed section layout: tabs on desktop, nav cards on phones.
- [Theme picker](https://ui.zedensix.com/blocks/theme-picker.md): System, light and dark as radio cards.
- [Theme toggle](https://ui.zedensix.com/blocks/theme-toggle.md): System, light and dark: an icon strip on desktop, three rows on phones.
- [Time range picker](https://ui.zedensix.com/blocks/time-range-picker.md): Time range presets, plus a custom range in a calendar popover or a phone drawer.
- [Time series chart](https://ui.zedensix.com/blocks/time-series-chart.md): Line, area or bar chart over time: axes, readout, touch scrubbing and a data table.
- [Top loading bar](https://ui.zedensix.com/blocks/top-loading-bar.md): Progress bar during SvelteKit navigations.
- [Video player](https://ui.zedensix.com/blocks/video-player.md): A video player: scrubbing, chapters, subtitles, speed, fullscreen, gestures and shortcuts.

## Components

One import, data in: the everyday controls without assembling primitives.

- [Accordion](https://ui.zedensix.com/components/accordion.md): Questions and answers from an array: plain text or a snippet per item.
- [Avatar group](https://ui.zedensix.com/components/avatar-group.md): Overlapping avatars with initials, a +N count and names in tooltips.
- [Bar list](https://ui.zedensix.com/components/bar-list.md): A ranked list with proportional bars, links and a show-more toggle.
- [Breadcrumbs](https://ui.zedensix.com/components/breadcrumbs.md): A trail of pages from an array, collapsing the middle into a menu on phones.
- [Checkbox](https://ui.zedensix.com/components/checkbox.md): One checkbox with its label and description, the whole row tappable.
- [Checkbox list](https://ui.zedensix.com/components/checkbox-list.md): Options in, a labelled group of checkboxes out, posting every checked value.
- [Confirm dialog](https://ui.zedensix.com/components/confirm-dialog.md): Ask before acting: waits on an async confirm, a drawer on phones.
- [Data table](https://ui.zedensix.com/components/data-table.md): Columns and rows in, a sortable table out: cards on phones, links per row.
- [Date field](https://ui.zedensix.com/components/date-field.md): A date with its label: calendar in a popover, a drawer on phones, ISO value.
- [File dropzone](https://ui.zedensix.com/components/file-dropzone.md): Drop or pick files, folders too: type and size limits, a list to review, posted with the form.
- [Form](https://ui.zedensix.com/components/form.md): Fields from an array, laid out and posted to a form action, with errors under each field.
- [Input](https://ui.zedensix.com/components/input.md): A text field with its label, description and error in one: passwords get a reveal button.
- [Menu](https://ui.zedensix.com/components/menu.md): Actions from an array: a dropdown on desktop, a drawer of big rows on phones.
- [Pagination](https://ui.zedensix.com/components/pagination.md): Page numbers from a total and a page size, prev and next on phones.
- [Radio list](https://ui.zedensix.com/components/radio-list.md): Pick one option from a list or from cards, with a legend and errors.
- [Segmented control](https://ui.zedensix.com/components/segmented-control.md): A single choice as equal segments that fold to icons when space runs out.
- [Select](https://ui.zedensix.com/components/select.md): Options in, a labelled select out: searchable, and a drawer on phones.
- [Status badge](https://ui.zedensix.com/components/status-badge.md): A status pill with a tone, a dot and an optional pulse for live states.
- [Switch](https://ui.zedensix.com/components/switch.md): A labelled switch row that posts true when on.
- [Tabs](https://ui.zedensix.com/components/tabs.md): Tabs from an array, scrolling sideways when they run out of room.
- [Textarea](https://ui.zedensix.com/components/textarea.md): A multi-line field with its label, error and an optional character counter.

## Primitives

The shadcn-svelte components, as the apps customised them.

- [Accordion](https://ui.zedensix.com/primitives/accordion.md): Stacked sections that expand one or several at a time.
- [Alert](https://ui.zedensix.com/primitives/alert.md): A callout for something the reader should notice.
- [Alert dialog](https://ui.zedensix.com/primitives/alert-dialog.md): A modal that asks to confirm before something drastic.
- [Avatar](https://ui.zedensix.com/primitives/avatar.md): A user's picture, falling back to initials.
- [Badge](https://ui.zedensix.com/primitives/badge.md): A small label for a status or a count.
- [Breadcrumb](https://ui.zedensix.com/primitives/breadcrumb.md): The path from the root to the current page.
- [Button](https://ui.zedensix.com/primitives/button.md): Every button variant and size, and its loading state.
- [Button group](https://ui.zedensix.com/primitives/button-group.md): Buttons joined into one control.
- [Calendar](https://ui.zedensix.com/primitives/calendar.md): A month grid to pick a date.
- [Card](https://ui.zedensix.com/primitives/card.md): A surface with a header, content and footer.
- [Checkbox](https://ui.zedensix.com/primitives/checkbox.md): A checkbox, with a label through Field.
- [Command](https://ui.zedensix.com/primitives/command.md): A searchable list of commands, also as a palette.
- [Context menu](https://ui.zedensix.com/primitives/context-menu.md): A menu on right click or long press.
- [Dialog](https://ui.zedensix.com/primitives/dialog.md): A modal window over the page.
- [Drawer](https://ui.zedensix.com/primitives/drawer.md): A panel sliding up from the bottom, made for phones.
- [Dropdown menu](https://ui.zedensix.com/primitives/dropdown-menu.md): A menu opened from a button.
- [Empty](https://ui.zedensix.com/primitives/empty.md): The parts of an empty state, to compose your own.
- [Field](https://ui.zedensix.com/primitives/field.md): Label, control, description and error, laid out together.
- [Input](https://ui.zedensix.com/primitives/input.md): A text input; password managers stay off unless asked.
- [Input group](https://ui.zedensix.com/primitives/input-group.md): An input with addons: icons, text or buttons.
- [Input otp](https://ui.zedensix.com/primitives/input-otp.md): One box per digit for a one-time code.
- [Label](https://ui.zedensix.com/primitives/label.md): A label for a form control.
- [Menubar](https://ui.zedensix.com/primitives/menubar.md): A desktop-style bar of menus.
- [Pagination](https://ui.zedensix.com/primitives/pagination.md): Links to the pages of a long list.
- [Popover](https://ui.zedensix.com/primitives/popover.md): Floating content anchored to a trigger.
- [Progress](https://ui.zedensix.com/primitives/progress.md): How far along something is.
- [Radio group](https://ui.zedensix.com/primitives/radio-group.md): Pick one of a few options.
- [Range calendar](https://ui.zedensix.com/primitives/range-calendar.md): A month grid to pick a start and an end date.
- [Resizable](https://ui.zedensix.com/primitives/resizable.md): Panes split by a draggable handle.
- [Scroll area](https://ui.zedensix.com/primitives/scroll-area.md): A scrolling box with a styled scrollbar.
- [Select](https://ui.zedensix.com/primitives/select.md): Pick one option from a list.
- [Separator](https://ui.zedensix.com/primitives/separator.md): A line between groups of content.
- [Sheet](https://ui.zedensix.com/primitives/sheet.md): A panel sliding in from a side of the screen.
- [Sidebar](https://ui.zedensix.com/primitives/sidebar.md): The app sidebar: groups, menus, collapsing to icons.
- [Skeleton](https://ui.zedensix.com/primitives/skeleton.md): Placeholder shapes while content loads.
- [Slider](https://ui.zedensix.com/primitives/slider.md): Pick a value or a range by dragging.
- [Sonner](https://ui.zedensix.com/primitives/sonner.md): Toasts, styled by the theme.
- [Spinner](https://ui.zedensix.com/primitives/spinner.md): An indeterminate loading indicator.
- [Switch](https://ui.zedensix.com/primitives/switch.md): An on or off toggle.
- [Table](https://ui.zedensix.com/primitives/table.md): Rows and columns of data.
- [Tabs](https://ui.zedensix.com/primitives/tabs.md): In-page tabs that switch panels without navigating.
- [Textarea](https://ui.zedensix.com/primitives/textarea.md): A multi-line text input.
- [Toggle](https://ui.zedensix.com/primitives/toggle.md): A button that stays pressed.
- [Toggle group](https://ui.zedensix.com/primitives/toggle-group.md): Toggles where one or several stay pressed.
- [Tooltip](https://ui.zedensix.com/primitives/tooltip.md): A hint on hover or focus.

## Modules

Helpers for toasts, titles, appearance and haptics, and the server side: logs, traces and hooks.

- [Appearance](https://ui.zedensix.com/modules/appearance.md): Apply a saved accent, theme, font and corners to <html>.
- [Haptics](https://ui.zedensix.com/modules/haptics.md): A short vibration on tap, success or error.
- [Hooks](https://ui.zedensix.com/modules/hooks.md): SvelteKit hooks: one log line per request, and unexpected errors logged, traced and given an id.
- [Logger](https://ui.zedensix.com/modules/logger.md): Scoped server logs as coloured text or JSON lines that carry the active trace id.
- [Page title](https://ui.zedensix.com/modules/page-title.md): One page title for the app bar, the header and the tab.
- [Password](https://ui.zedensix.com/modules/password.md): The password rules and strength score, for the form and the server alike.
- [Telemetry](https://ui.zedensix.com/modules/telemetry.md): OpenTelemetry tracing over OTLP, with SvelteKit's own handle, load and action spans.
- [Toast](https://ui.zedensix.com/modules/toast.md): Narrate a form action through one promise toast.
- [Utils](https://ui.zedensix.com/modules/utils.md): cn to merge Tailwind classes, and the prop helper types.