← Design system

Component Library

Twenty components, every variant rendered live. All real Svelte 5 imports — no screenshots, no mockups. Open any component name for props and keyboard docs.

Form & Action

Capture input and trigger work — buttons, fields, sliders, menus.

5 components
Button 6 variants · 5 sizes · disabled · loading
Input labelled · validation · type variants

Must be at least 8 characters

Slider single value · keyboard arrows
40
Dropdown action menu · danger items

Display

Surface information — avatars, badges, cards, tables, progress signals.

7 components
Avatar 3 sizes · status indicators
AC
AC
AC
JD
MK
RS
Badge 7 variants · solid · outline · dot
Default Primary Outline
Success Warning Error Info
Active Offline
Card surface · header · footer · interactive

Card header

Hover the card border to see the state shift.

Divider horizontal · subtle weight

Content above the divider

Content below the divider

Progress labelled · semantic variants
Upload 65%
Table columns · row data · status badges
Name Role Status
AntonetteEngineeractive
Meshery BotCI/CDpaused
Deploy AgentInfrafailed
MonitorObservabilityidle

Feedback & Overlay

Talk back to the user — alerts, toasts, tooltips, modals.

4 components
Alert 4 semantic variants · titled
Toast imperative · auto-dismiss
Tooltip 4 positions · hover
Modal native <dialog> · focus trap

Confirm Action

Are you sure you want to proceed? This action cannot be undone.