Getting Started

Build beautiful UIs with SV5UI

A modern, accessible UI component library built natively for Svelte 5 and Tailwind CSS 4. Ship faster with 41+ production-ready components.

41+

Components

41+ components across 8 categories, ready for production.

General

Button, FieldGroup, Icon, Link, Kbd, ThemeModeButton

Layout

Card, Container, Separator

Data Display

Accordion, Avatar, AvatarGroup, Badge, Chip, Empty, Skeleton, Timeline, User

Forms

Checkbox, Input, RadioGroup, Select, Slider, Switch, Textarea

Feedback

Alert, Progress, Toast

Navigation

Breadcrumb, Pagination, Tabs

Overlay

Collapsible, ContextMenu, Modal, Drawer, DropdownMenu, Popover, Slideover, Tooltip

Date & Time

Calendar, RangeCalendar

Quick Start

Install SV5UI and start building in minutes.

1. Install the package

npm install sv5ui

2. Use components

Welcome

Build beautiful UIs with Svelte 5.

v1.0

<script lang="ts">
  import { Button, Card, Badge } from 'sv5ui';
</script>

<Card>
  <h3>Welcome</h3>
  <p>Build beautiful UIs with Svelte 5.</p>

  <div class="flex gap-2">
    <Button label="Get Started" color="primary" />
    <Badge label="v1.0" variant="soft" color="success" />
  </div>
</Card>

Why SV5UI?

Everything you need to build modern Svelte applications.

Svelte 5 Native

Built with runes, snippets, and the latest reactivity model.

Accessible

Built on bits-ui primitives with WAI-ARIA compliance.

OKLCH Colors

Perceptually uniform color system with 8 semantic scales.

Tailwind CSS 4

Styled with Tailwind Variants for type-safe composable styling.

Fully Typed

Complete TypeScript support with exported prop types.

Dark Mode

Automatic dark mode with mode-watcher integration.

Built With

Svelte 5

Runes & Snippets

Tailwind 4

Utility-first CSS

bits-ui

Headless primitives

TypeScript

Full type safety

Installation