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 72+ production-ready components.

Installation Browse Components

Quick Start

Install and start using sv5ui in two steps.

1. Install the package

Terminal

npm install sv5ui

2. Use components

Welcome

Build beautiful UIs with Svelte 5.

v2.6.1

<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="v2.6.1" variant="soft" color="success" />
  </div>
</Card>

Components

72+ components across 9 categories.

General

Button, FieldGroup, Icon, Link, Kbd, ThemeModeButton

Layout

Card, Container, ScrollArea, Separator

App Shell

Header, Sidebar, Main, Footer, Error

Data Display

Accordion, Avatar, AvatarGroup, Badge, Carousel, Chip, Empty, Skeleton, Timeline, User, Table, Tree

Forms

Checkbox, CheckboxGroup, ColorPicker, Editor, Input, InputNumber, InputTags, RadioGroup, Rating, Select, SelectMenu, Slider, Switch, Toggle, ToggleGroup, Textarea, FileUpload, PinInput, FormField, Form

Feedback

Alert, Banner, Progress, Toast

Navigation

Breadcrumb, NavigationMenu, Pagination, Stepper, Tabs

Overlay

Collapsible, Command, ContextMenu, Modal, Drawer, DropdownMenu, Popover, Slideover, Tooltip, Tour, Lightbox

Date & Time

Calendar, RangeCalendar, DatePicker, DateRangePicker, TimeField

Built With

Svelte 5

Runes & Snippets

Tailwind 4

Utility-first CSS

bits-ui

Headless primitives

TypeScript

Full type safety

Installation