# sve-ui

> Styled, accessible Svelte 5 components built on Bits UI. No Tailwind and no config in the consumer project: install, import the stylesheet once, and theme with CSS variables. Light and dark out of the box.

## Usage rules

- Install with `pnpm add sve-ui`. Import `sve-ui/theme.css` ONCE at the app root; without it components render unstyled. The consumer project needs no Tailwind and no config.
- Single components are default imports: `Button, Input, Textarea, Label, Badge, Spinner, Text, Heading, Slider, Skeleton, Separator, Code`.
- Composite components are namespaces composed with dots: `Dialog.*, Select.*, Combobox.*, Card.*, Alert.*, Tabs.*, Accordion.*, Avatar.*, DropdownMenu.*, Popover.*, Tooltip.*, Switch.*, Checkbox.*, RadioGroup.*`.
- Overlays (Dialog/DropdownMenu/Popover/Tooltip/Select/Combobox) portal to <body>. Mirror the theme class (`dark`/`light`) onto <body> so portaled content gets the right --sve-* tokens.
- Use a custom element as an overlay trigger via the Bits `child` snippet: `<Dialog.Trigger>{#snippet child({ props })}<Button {...props}>Open</Button>{/snippet}</Dialog.Trigger>`.
- Theme by overriding `--sve-*` CSS variables. Do not put Tailwind layout/margin utilities on sve-ui components; scoped styles win, so wrap them in a <div> instead.
- `Slider` uses `value` + `onValueChange` (not bind:value) and `thumbLabel` for an accessible name. `Switch`/`Checkbox` need `aria-label` when unlabelled. `Tooltip` requires a `Tooltip.Provider` ancestor.

## Docs

- [Introduction](https://sveui.org/docs)
- [Installation](https://sveui.org/docs/installation)
- [Theming](https://sveui.org/docs/theming)
- [AI & Agents](https://sveui.org/docs/ai-agents)

## Components

### Display
- [Avatar](https://sveui.org/components/avatar): Image with graceful fallback.
- [Badge](https://sveui.org/components/badge): Compact status and count labels.
- [Card](https://sveui.org/components/card): Surface container for grouped content.
- [Carousel](https://sveui.org/components/carousel): A scrolling track of slides with controls.
- [Heading](https://sveui.org/components/heading): Semantic, sized display titles.
- [Text](https://sveui.org/components/text): Body copy with size and tone.
- [Skeleton](https://sveui.org/components/skeleton): Loading placeholder for content.

### Forms
- [Button](https://sveui.org/components/button): Primary action. Variants, tones and sizes.
- [Button Group](https://sveui.org/components/button-group): Attaches related buttons into one control.
- [Input](https://sveui.org/components/input): Single-line text field with states.
- [Input Group](https://sveui.org/components/input-group): An input with prefix and suffix addons.
- [Field](https://sveui.org/components/field): Label, help text and validation, wired to one control.
- [Checkbox](https://sveui.org/components/checkbox): Boolean choice, accessible by default.
- [Radio Group](https://sveui.org/components/radio-group): Single choice from a set.
- [Switch](https://sveui.org/components/switch): On/off toggle control.
- [Select](https://sveui.org/components/select): Listbox for picking one option.
- [Combobox](https://sveui.org/components/combobox): Filterable autocomplete select.
- [Slider](https://sveui.org/components/slider): Pick a value along a range.
- [Textarea](https://sveui.org/components/textarea): Multi-line text field.
- [Label](https://sveui.org/components/label): Accessible form label.
- [Toggle](https://sveui.org/components/toggle): Two-state toggle button.
- [Toggle Group](https://sveui.org/components/toggle-group): Grouped toggle buttons.
- [Calendar](https://sveui.org/components/calendar): Date grid for selection.
- [Date Field](https://sveui.org/components/date-field): Segmented date input.
- [Date Picker](https://sveui.org/components/date-picker): Calendar-based date selection.
- [Range Calendar](https://sveui.org/components/range-calendar): Date range grid.
- [Date Range Field](https://sveui.org/components/date-range-field): Segmented date range input.
- [Date Range Picker](https://sveui.org/components/date-range-picker): Calendar-based range selection.
- [Time Field](https://sveui.org/components/time-field): Segmented time input.
- [Time Range Field](https://sveui.org/components/time-range-field): Segmented time range input.
- [PIN Input](https://sveui.org/components/pin-input): One-time-code / PIN entry.
- [Rating Group](https://sveui.org/components/rating-group): Star rating input.

### Feedback
- [Alert](https://sveui.org/components/alert): Inline status and messaging.
- [Busy](https://sveui.org/components/busy): Marks a region as loading, and says so.
- [Empty](https://sveui.org/components/empty): The state a list is in with nothing to show.
- [Spinner](https://sveui.org/components/spinner): Indeterminate loading indicator.
- [Toast](https://sveui.org/components/toast): Transient notifications, triggered imperatively.
- [Progress](https://sveui.org/components/progress): Determinate progress bar.
- [Meter](https://sveui.org/components/meter): Bounded scalar measurement.

### Navigation
- [Tabs](https://sveui.org/components/tabs): Switch between related panels.
- [Accordion](https://sveui.org/components/accordion): Collapsible disclosure sections.
- [Sidebar](https://sveui.org/components/sidebar): Composable app-shell navigation.
- [Breadcrumb](https://sveui.org/components/breadcrumb): Hierarchical page trail.
- [Navigation Menu](https://sveui.org/components/navigation-menu): Top-level nav with menus.
- [Menubar](https://sveui.org/components/menubar): Desktop-style menu bar.
- [Collapsible](https://sveui.org/components/collapsible): Single expand/collapse region.
- [Toolbar](https://sveui.org/components/toolbar): Grouped controls container.

### Overlays
- [Dialog](https://sveui.org/components/dialog): Modal with focus trap and overlay.
- [Dropdown Menu](https://sveui.org/components/dropdown-menu): Contextual action menu.
- [Popover](https://sveui.org/components/popover): Floating content anchored to a trigger.
- [Tooltip](https://sveui.org/components/tooltip): Hover/focus hint text.
- [Alert Dialog](https://sveui.org/components/alert-dialog): Confirmation modal.
- [Command](https://sveui.org/components/command): Command palette / fuzzy search menu.
- [Sheet](https://sveui.org/components/sheet): Side drawer panel.
- [Context Menu](https://sveui.org/components/context-menu): Right-click action menu.
- [Link Preview](https://sveui.org/components/link-preview): Hover card preview.

### Data
- [Table](https://sveui.org/components/table): Styled data table with sortable headers.
- [Pagination](https://sveui.org/components/pagination): Page-by-page navigation.

### Layout
- [Resizable](https://sveui.org/components/resizable): Panes with a draggable, keyboard-operable divider.
- [Stack](https://sveui.org/components/stack): Vertical spacing primitive.
- [Flex](https://sveui.org/components/flex): Flexbox layout primitive.
- [Separator](https://sveui.org/components/separator): Visual or semantic divider.
- [Scroll Area](https://sveui.org/components/scroll-area): Styled custom scroll container.
- [Aspect Ratio](https://sveui.org/components/aspect-ratio): Constrain content ratio.

### Utilities
- [Code](https://sveui.org/components/code): Copyable code block.
- [Kbd](https://sveui.org/components/kbd): A keycap for a keyboard shortcut.

## Optional

- The sve-ui-usage agent skill ships inside the package: `node_modules/sve-ui/skills/sve-ui-usage/SKILL.md` after installing, no separate download.
- [GitHub repository](https://github.com/rodriabregu/sve-ui): source and issues.
- [npm package](https://www.npmjs.com/package/sve-ui)
- Coming soon: .