All Svelte 5 components

Vital UI

Component library

Svelte 5 runes, Tailwind v4 tokens and class-variance-authority. Pick a component, then tweak every prop live from the panel next to it.

Typography

Text, headings, links, code and long-form prose.

Text

Polymorphic text element with size, weight, color, alignment and truncation.

Heading

Semantic h1–h6 with a visual size decoupled from the level.

Link

Inline anchor with default, muted and standalone styles; auto-detects external URLs.

Code

Inline code or a block with a language label.

Prose

Article rhythm for raw HTML or rendered Markdown.

Layout

Containers, stacks, grids, page bands and the app shell.

Container

Centered max-width wrapper with optional horizontal padding.

FlexCol

Vertical flex on the spacing scale, with alignment, growth and rules.

FlexRow

Horizontal flex with gap, alignment, justification, wrapping and growth.

ScrollArea

Scroll container with themed scrollbars and edge fades.

Grid

Responsive grid: per-breakpoint columns, or auto-fit from a minimum width.

Section

Page band with tone, padding, seam border and an optional container.

Divider

Rule between blocks or between items in a row; optionally labelled.

SectionHeader

Eyebrow, title, description and trailing actions for a section.

PageHeader

Breadcrumb, back, title, meta and actions at the top of a view.

Split

Main column plus a sticky aside, without hand-written col-spans.

Spacer

Pushes what follows to the end of a flex row or column.

Buttons

Actions, icon buttons, groups and decorative tiles.

Button

Primary action with nine variants, five sizes, loading and block modes.

IconButton

Square or round icon-only button.

ButtonGroup

Attaches buttons into one segmented control.

SplitButton

Main action attached to a dropdown caret.

ActiveButton

Toggle button for filters, sorts and view switches.

IconBlock

Decorative icon tile for feature cards and list rows.

Badges

Status labels and removable tags.

Badge

Subtle or solid label with six colors and an optional status dot.

Tag

Rounded pill, optionally removable.

Feedback

Alerts, progress, loading states and status indicators.

Alert

Inline message with icon, title, body and dismiss.

Banner

Full-width page-level message bar.

Callout

Left-accented note block.

Result

What a container shows instead of content: empty, no match, nothing selected, error, done.

Dot

Tiny status dot, optionally pulsing or ringed.

LatencyIndicator

Signal-strength bars for connection quality.

Progress

Horizontal progress bar.

ProgressRing

Circular progress with a centered label.

Skeleton

Pulsing placeholders: shapes, text, cards, lists and tables.

Spinner

Rotating loading indicator.

StatusPill

Bordered pill with a status dot.

Form

Inputs, selection controls and rich pickers.

Input

Text input with sizes, invalid state and a leading icon.

Textarea

Multi-line text input.

Checkbox

Labelled checkbox.

Switch

Labelled toggle switch.

Field

Label + control + help/error wrapper that hands the id to its child.

RadioGroup

Single-choice radio list.

Select

Custom single select composed from options.

GroupChips

Segmented pill bar for a single choice.

Toggle

Pressed/unpressed button and toggle groups.

ChipsInput

Free-text tags: Enter adds, Backspace removes.

InputFile

Drop zone and click-to-browse file picker.

Datepicker

Month calendar for picking a day.

QuantityInput

"- 10 +" stepper.

Rating

Stars, readable or clickable, with halves and keyboard support.

Slider

One or more thumbs on a track, with locked thumbs and bubbles.

InputOTP

One-time-code cells with auto-advance and paste.

Combobox

Searchable single select.

MultiSelect

Chips + searchable checkbox list.

SearchInput

Search field with clear, loading and shortcut hint.

TransferList

Dual-panel list to move items between two sets.

Surface

Cards composed from header, bars, body and footer.

Card

Bordered surface with optional header, body padding and footer bar.

CardBar

Control row attached to the top or the bottom of a Card.

Media

Avatars, groups and anchored badges.

Image

Picture with a reserved ratio, a skeleton and a fallback.

Avatar

Image or initials with sizes, shapes, a presence dot, and stacked groups.

OverlayBadge

Anchors a status dot or count to a corner of any child.

Data

Tables, KPI tiles, lists and timelines.

DataTable

Table with sorting, selection, loading and empty states.

List

Rows with a leading slot, title, description, meta and actions.

Table

Table primitives: rows, header cells, cells and a bordered container.

Stat

KPI tile with delta and footer slot.

Sparkline

Tiny inline line chart.

DescriptionList

Key/value rows.

Timeline

Vertical activity feed.

SortableList

Drag-to-reorder list with keyboard support.

Charts

Dependency-free SVG charts.

BarChart

Vertical bars with a highlighted maximum.

AreaChart

Time-series line with gradient fill.

DonutChart

Donut with center label and legend.

BarList

Ranked horizontal bars.

Navigation

Tabs, accordions, steppers, breadcrumbs and pagination.

Tabs

Tab list + panels driven by a bound value.

Accordion

Single-open disclosure list.

Collapsible

Standalone disclosure with a stateful trigger.

Stepper

Horizontal progress through numbered steps.

Breadcrumb

Hierarchical path with a current page.

Pagination

Page buttons with siblings and ellipses.

Overlay

Tooltips, popovers, dialogs, drawers, menus, toasts and the command palette.

Tooltip

Hover label with four placements.

Popover

Click-toggled floating panel.

HoverCard

Hover-triggered preview card with delays.

Dialog

Modal with title, body and footer.

AlertDialog

Confirmation modal with cancel/confirm.

Drawer

Side sheet sliding from an edge.

Toaster

Toast stack driven by the `toast()` helper.

CommandPalette

⌘K palette with filtered groups and items.

App shell

The console frame, sidebar, navbar, user menu and footer.

AppShell

Console frame: sticky sidebar, sticky top bar, scrolling main.

Sidebar

App sidebar with sections and rows.

UserMenu

Avatar + name trigger opening a menu.

Navbar

Top bar with brand, links and actions.

Footer

Site footer with brand, link columns and bottom bar.

Editorial

Kickers, highlights, handwritten notes and code blocks.

Eyebrow

Small uppercase kicker above a heading.

Mark

Marker-stroke highlight behind inline text.

HandNote

Handwritten margin annotation.

CodeBlock

Syntax-highlighted source with a swappable highlighter.

CodeWindow

Dark editor chrome around a code block.

CopyCommand

Monospace command with a copy button.

Misc

Icons, keyboard hints, toolbars and primitives.

Icon

Font Awesome glyph in a square footprint.

Kbd

Keyboard key cap.

Toolbar

Control bar with buttons, groups and separators.

Polymorphic

Renders any tag via the "as" prop.

VariantProvider

Propagates variant/size/color defaults to descendants.