Open Source Svelte 5

Build beautiful UIs
with Svelte 5

38+ accessible, customizable components built on bits-ui, styled with Tailwind CSS 4, fully type-safe TypeScript. Style the way you want.

A
B
C
D
E
F

Loved by 500+ developers

Terminal
$ |
38+
Components
100%
TypeScript
0
Dependencies*
MIT
License

*Only peer dependencies: Svelte 5, Tailwind CSS 4, bits-ui

Features

Everything you need, nothing you don't

A focused component library designed for developer experience, accessibility, and visual polish.

Svelte 5 Runes

Built with runes, snippets, and the new reactivity model for blazing-fast performance.

OKLCH Colors

Perceptually uniform color system with 8 semantic scales and automatic dark mode.

Accessible

Built on Bits UI primitives. WAI-ARIA compliant with keyboard navigation and screen reader support.

Tailwind CSS 4

Styled with Tailwind CSS 4 and Tailwind Variants for type-safe composable styling.

38+ Components

From buttons to calendars, modals to menus. Everything for production-ready interfaces.

Fully Typed

Complete TypeScript support with exported prop types, variant types, and slot definitions.

Components

A component for every need

38+ production-ready components with variants, colors, and full TypeScript support.

Buttons & Badges

New Stable Beta Deprecated v1.1.2

Form Controls

We'll never share it

Users & Avatars

AJ
BS
CD
EF
U1
U2
U3
U4
U5
U6
SC
Sarah Chen
Lead Developer
AR
Alex Rivera
UI Designer

Feedback & Progress

Upload progress75%
Build status100%

Navigation

Live preview of your component renders here.

Timeline & FAQ

Install
npm install sv5ui
Configure
Add theme.css
Build
Use components
Ship
Deploy
Getting Started

Up and running in minutes

Three simple steps to start building with SV5UI.

Install
Add sv5ui to your project
Configure
Import theme and set up Tailwind
Build
Import and use any of 38+ components
Terminal
npm install sv5ui
layout.css
@import 'tailwindcss';
@import 'sv5ui/theme.css';

@custom-variant dark (&:where(.dark, .dark *));
+page.svelte
<script lang="ts">
  import { Button, Card } from 'sv5ui';
</script>

<Card>
  <Button variant="solid" color="primary">
    Hello SV5UI!
  </Button>
</Card>

Ready to build something amazing?

Start using SV5UI today. Open source, free forever, and built for the modern web.

SV5UI sv5ui v1.1.2

Built with by NDLab. MIT License.