Build stunning UIs in record time
42+ accessible components for Svelte 5, built on bits-ui and styled with Tailwind CSS 4. Fully typed, dark mode ready.
Everything you need, nothing you don't
A thoughtfully designed component library with the building blocks for any application.
Svelte 5 Runes
Built from the ground up with Svelte 5 runes, snippets, and the latest reactivity model.
70+ Components
From buttons to calendars, modals to data tables. Everything you need for production apps.
Fully Accessible
Built on bits-ui with WAI-ARIA patterns. Keyboard navigation and focus management included.
Tailwind CSS 4
Styled with Tailwind CSS 4 utilities. Customize every component through the ui prop.
OKLCH Colors
8 semantic color scales using the perceptually uniform OKLCH color space, dark mode ready.
Fully Typed
100% TypeScript with exported types for every component. Autocomplete out of the box.
Need a real data grid? @sv5ui/datagrid
A separate package built on sv5ui: virtualized past a million rows, with column filters, resize, reorder and pinning, inline editing with validation, a server row model, and one tab stop for the whole grid.
Need a calendar? @sv5ui/scheduler
A separate package built on sv5ui: month, week, day, year and agenda views over one array of events, drag and drop that saves through your API and rolls back when it fails, recurrence, time zones, thirteen languages, and one tab stop for the whole grid.
Up and running in 3 simple steps
No complex configuration. Install, import, build.
Install the package
npm install sv5uiSet up your styles
@import 'tailwindcss';
@import 'sv5ui/theme.css';
@custom-variant dark (&:where(.dark, .dark *));Start building
<script lang="ts">
import { Button, Card } from 'sv5ui';
</script>
<Card>
<Button variant="solid" color="primary">
Hello SV5UI!
</Button>
</Card>