# 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, Badge, Spinner, Text, Heading, Slider, 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 . Mirror the theme class (`dark`/`light`) onto so portaled content gets the right --sve-* tokens.
- Use a custom element as an overlay trigger via the Bits `child` snippet: `{#snippet child({ props })}{/snippet}`.
- 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
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.
- [Heading](https://sveui.org/components/heading): Semantic, sized display titles.
- [Text](https://sveui.org/components/text): Body copy with size and tone.
### Forms
- [Button](https://sveui.org/components/button): Primary action. Variants, tones and sizes.
- [Input](https://sveui.org/components/input): Single-line text field with states.
- [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.
### Feedback
- [Alert](https://sveui.org/components/alert): Inline status and messaging.
- [Spinner](https://sveui.org/components/spinner): Indeterminate loading indicator.
### Navigation
- [Tabs](https://sveui.org/components/tabs): Switch between related panels.
- [Accordion](https://sveui.org/components/accordion): Collapsible disclosure sections.
### 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.
### Utilities
- [Code](https://sveui.org/components/code): Copyable code block.
## Optional
- [GitHub repository](https://github.com/rodriabregu/sve-ui): source, issues, and the sve-ui-usage agent skill at `skills/sve-ui-usage/`.
- [npm package](https://www.npmjs.com/package/sve-ui)
- Coming soon: Skeleton, Textarea, Label, Toggle, Toggle Group, Calendar, Date Field, Date Picker, PIN Input, Rating Group, Toast, Progress, Meter, Sidebar, Breadcrumb, Navigation Menu, Menubar, Collapsible, Toolbar, Alert Dialog, Command, Sheet, Context Menu, Link Preview, Table, Pagination, Stack, Flex, Separator, Scroll Area, Aspect Ratio.