Sv5ui
Svelte 5 UI library — 38+ typed components, Tailwind CSS 4, dark mode, accessible
SV5UI
A modern, fully-typed UI component library for Svelte 5.
Built with Tailwind CSS 4, OKLCH color tokens, and accessible headless primitives.
Highlights
- Svelte 5 — Built with runes, snippets, and the latest reactivity model
- Tailwind CSS 4 — Utility-first styling with Tailwind Variants for type-safe, composable variants
- Fully Typed — Strict TypeScript with exported prop types for every component
- Accessible — Built on Bits UI and Vaul Svelte headless primitives
- 200,000+ Icons — First-class Iconify integration
- Customizable — Global config system + per-instance slot overrides
Installation
npm install sv5ui
# or
pnpm add sv5ui
Peer dependencies: svelte >= 5.0.0, tailwindcss >= 4.0.0
Quick Start
1. Import the theme
/* layout.css */
@import 'sv5ui/theme.css';
2. Use components
<script>
import { Button, Avatar, Badge, Tooltip } from 'sv5ui'
</script>
<Tooltip text="Edit profile">
<Button variant="soft" color="primary" leadingIcon="lucide:edit">Edit</Button>
</Tooltip>
<Avatar src="/photo.jpg" alt="Jane Doe" size="lg" />
<Badge label="Online" color="success" variant="soft" />
Components
General
| Component | Description |
|---|---|
| Button | Versatile button with 6 variants, loading state, icons, and avatar support |
| Link | Smart anchor with automatic active-state detection based on current route |
| Icon | Iconify wrapper — render any of 200,000+ icons by name |
| Kbd | Keyboard shortcut display with OS-aware symbol mapping |
| ThemeModeButton | Light/dark mode toggle button with customizable icons and mode-watcher integration |
Layout
| Component | Description |
|---|---|
| Card | Content container with header, body, and footer slots |
| Container | Responsive max-width wrapper for page content |
| Separator | Horizontal/vertical divider with optional label, icon, or avatar |
Data Display
| Component | Description |
|---|---|
| Avatar | Profile image with auto-generated initials fallback |
| AvatarGroup | Stacked avatars with overflow count |
| Badge | Status indicators and tags in 4 variants and 8 colors |
| Chip | Notification dot indicator with configurable positioning |
| User | User profile display combining avatar, name, and description |
| Timeline | Step/sequence visualization with completed, active, and pending states |
| Skeleton | Animated loading placeholder |
| Empty | Empty state with icon, description, and action slots |
Feedback
| Component | Description |
|---|---|
| Alert | Notification banner with icon, actions, and dismissible support |
| Progress | Determinate/indeterminate progress bar with step mode and animations |
Navigation
| Component | Description |
|---|---|
| Breadcrumb | Hierarchical navigation trail with icons, custom separators, and snippet slots |
| Tabs | Tabbed interface with content panels and configurable orientation |
| Pagination | Page navigation with first/prev/next/last controls and ellipsis |
Overlay
| Component | Description |
|---|---|
| Modal | Accessible dialog with overlay, focus trap, and scroll lock |
| Slideover | Side panel sliding from any edge with inset mode |
| Drawer | Draggable bottom/side sheet with snap points |
| Tooltip | Hover tooltip with arrow, keyboard shortcut display, and portal rendering |
| Popover | Floating interactive content panel with focus management |
| Accordion | Expandable sections with single or multiple open modes |
| DropdownMenu | Triggered floating menu with items, groups, separators, and sub-menus |
| ContextMenu | Right-click context menu with items, colors, and keyboard navigation |
Form
| Component | Description |
|---|---|
| Input | Text input with 5 variants, icons, avatar, loading state, and FormField integration |
| Textarea | Multi-line text input with 5 variants, icons, autoresize with maxrows, and FormField integration |
| Select | Dropdown select with 5 variants, icons, avatars, groups, descriptions, and FormField support |
| Switch | Toggle switch with 8 colors, 5 sizes, checked/unchecked icons, loading state, and FormField integration |
| Checkbox | Checkbox with 8 colors, 5 sizes, indeterminate state, custom icons, and FormField integration |
| RadioGroup | Radio group for single-selection with items API, legend, orientation, and FormField integration |
| FormField | Form control wrapper providing label, description, hint, help, and error handling |
| FieldGroup | Groups buttons and inputs with seamless borders and shared size/orientation context |
| Calendar | Date picker calendar with single, multiple, and range selection modes |
Theming
SV5UI uses OKLCH color space with semantic tokens. Light and dark modes work out of the box.
Color Tokens
Each color provides a set of related tokens for surfaces, text, and containers:
--color-{name} Main color
--color-on-{name} Contrast text on main color
--color-{name}-container Lighter background variant
--color-on-{name}-container Text on container background
Available colors: primary · secondary · tertiary · success · warning · error · info · surface
Dark Mode
Supported via .dark class on <html> or prefers-color-scheme media query, managed with mode-watcher.
Custom Colors
Override any token with CSS variables:
:root {
--color-primary: oklch(0.55 0.25 270);
--color-secondary: oklch(0.45 0.15 240);
}
Customization
Per-instance — ui prop
Override slot classes directly on any component:
<Button ui={{ base: 'rounded-full shadow-lg', label: 'font-bold uppercase' }}>Custom</Button>
Global — defineConfig
Set library-wide defaults for variants, slots, and icons:
import { defineConfig } from 'sv5ui'
defineConfig({
button: {
defaultVariants: { variant: 'outline', size: 'lg' },
slots: { base: 'shadow-md' }
},
avatar: {
defaultVariants: { size: 'lg' },
slots: { root: 'ring-2 ring-primary' }
},
icons: {
loading: 'lucide:loader',
close: 'lucide:x'
}
})
Development
pnpm install # Install dependencies
pnpm dev # Dev server at localhost:5173
pnpm test # Run unit tests
pnpm check # TypeScript check
pnpm prepack # Build library package
pnpm lint # Lint
pnpm format # Format code
Run
pnpm devand open localhost:5173 to browse the interactive component demos.
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Svelte 5 + SvelteKit |
| Styling | Tailwind CSS 4 + Tailwind Variants |
| Primitives | Bits UI · Vaul Svelte |
| Icons | Iconify (200,000+ icons) |
| Testing | Vitest + Playwright |
License
