# @orochibraru/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.orochibraru.com/llms-full.txt. An MCP server with the same content is at https://ui.orochibraru.com/mcp, or runs locally with `npx -y @orochibraru/ui`.

## Blocks

App-level pieces the apps shared copies of.

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

## Primitives

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

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

## Modules

Helpers for toasts, titles, appearance and haptics.

- [Appearance](https://ui.orochibraru.com/modules/appearance.md): Apply a saved accent, theme, font and corners to <html>.
- [Haptics](https://ui.orochibraru.com/modules/haptics.md): A short vibration on tap, success or error.
- [Page title](https://ui.orochibraru.com/modules/page-title.md): One page title for the app bar, the header and the tab.
- [Password](https://ui.orochibraru.com/modules/password.md): The password rules and strength score, for the form and the server alike.
- [Toast](https://ui.orochibraru.com/modules/toast.md): Narrate a form action through one promise toast.
- [Utils](https://ui.orochibraru.com/modules/utils.md): cn to merge Tailwind classes, and the prop helper types.