Build stunning UIs in record time
42+ beautifully crafted, accessible components built on bits-ui and styled with Tailwind CSS 4. Fully typed, dark mode ready, and designed for Svelte 5.
Maya just deployed v2.4
2 minutes ago
Sarah Chen
Lead Developer
Components
TypeScript
Color Scales
MIT License
Built on bits-ui for accessibility. Requires Svelte 5 and Tailwind CSS 4 as peer dependencies.
Everything you need, nothing you don't
A thoughtfully designed component library that gives you the building blocks for any application.
Svelte 5 Runes
Built from the ground up with Svelte 5 runes, snippets, and the latest reactivity model for blazing fast UIs.
OKLCH Colors
8 semantic color scales using the perceptually uniform OKLCH color space. Every shade looks great.
Fully Accessible
Built on bits-ui with WAI-ARIA patterns. Keyboard navigation, screen readers, and focus management included.
Tailwind CSS 4
Styled with Tailwind CSS 4 utilities. Customize every component through the ui prop or global config.
42+ Components
From buttons to calendars, modals to data tables. Everything you need to build production applications.
Fully Typed
100% TypeScript with exported types for every component. Autocomplete and type safety out of the box.
42+ components ready to use
Interactive demos of real sv5ui components. Try them out right here.
Buttons
Icon Buttons
Badges
Slider: 50
Avatars
Users
Sarah Chen
Lead Developer
Alex Rivera
UI Designer
Loading State
Progress
Breadcrumb
Tabs
Timeline
Pagination
Accordion
Menus & Fields
No results
Try adjusting your search
8 semantic colors, infinite possibilities
A complete OKLCH color system that adapts beautifully to light and dark modes.
Primary
Main actions & branding
Secondary
Supporting elements
Tertiary
Accents & highlights
Success
Positive feedback
Warning
Caution signals
Error
Error & destructive
Info
Informational hints
Surface
Backgrounds & neutral
Every color adapts to dark mode
Toggle the theme and watch every component transform.
Up and running in 3 simple steps
No complex configuration. Install, import, build.
npm install sv5ui@import 'tailwindcss';
@import 'sv5ui/theme.css';
@custom-variant dark (&:where(.dark, .dark *));<script lang="ts">
import { Button, Card } from 'sv5ui';
</script>
<Card>
<Button variant="solid" color="primary">
Hello SV5UI!
</Button>
</Card>Ready to build something amazing?
Join hundreds of developers building beautiful Svelte applications with sv5ui.