Build stunning UIs in record time
89+ beautifully crafted, accessible components built on bits-ui and styled with Tailwind CSS 4. Fully typed, dark mode ready, and designed for Svelte 5.
Deployment
Maya just deployed v2.4
Tasks
12
Reviews
3
Build
Pass
Sprint progress
Design system rollout
Actions & Status
Core building blocks, ready to compose.
Framework
Dark mode
Components
89+
TypeScript
100%
Color Scales
8
MIT License
MIT
Features
Everything you need, nothing you don't
A thoughtfully designed component library that gives you the building blocks for modern applications.
Svelte 5 Runes
Built from the ground up with runes, snippets, and the latest reactivity model.
OKLCH Colors
8 semantic color scales that stay balanced across light and dark themes.
Fully Accessible
Powered by bits-ui primitives with keyboard navigation and ARIA patterns.
Tailwind CSS 4
Utility-first styling with easy overrides through classes and tokens.
89+ Components
From buttons to calendars, overlays to tables, ready for production apps.
Fully Typed
Exported TypeScript types help keep every component safe and discoverable.
Components
89+ components ready to use
Interactive previews of real Svelora components. Explore the design language before you jump into the docs.
Actions & Status
Buttons, badges, and alerts working together.
Preview Grid
A quick look at categories inside the library.
Color System
8 semantic colors, infinite possibilities
A complete OKLCH color system that adapts cleanly to light and dark themes.
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
Getting Started
Up and running in 3 simple steps
No complex configuration. Install, import the theme, and start building.
Install the package
Add Svelora to your SvelteKit project.
npm install sveloraSet up your styles
Import Tailwind and the Svelora theme tokens.
@import 'tailwindcss'; @import 'svelora/theme.css'; @custom-variant dark (&:where(.dark, .dark *));
Start building
Import components and compose your first UI.
<script lang="ts">
import { Button, Card, Badge } from 'svelora';
</script>
<Card>
<h3>Welcome to Svelora</h3>
<p>Build beautiful UIs with Svelte 5.</p>
<div class="flex gap-2">
<Button label="Get Started" color="primary" />
<Badge label="v3.2.8" variant="soft" color="success" />
</div>
</Card>Ready to build something amazing?
Join developers building polished Svelte applications with a modern, accessible component system.