Built for Svelte 5 runes

30 components.
Copy. Paste. Ship.

Production-ready Svelte 5 components for dashboards, admin panels, and SaaS interfaces. Zero dependencies beyond Svelte and Tailwind.

Browse Components Pricing

6 free components — no account needed

Layout

AppShell

Starter

Sidebar + header + content area shell

Sidebar

Starter

Collapsible navigation sidebar with groups

Header

Starter

App header with search, user menu, breadcrumbs

PageContainer

Free

Max-width responsive page wrapper

SplitPane

Full

Resizable two-panel layout

Data Display

DataTable

Full

Sortable, paginated table with row selection

StatCard

Starter

Metric card with trend indicator

EmptyState

Free

Empty state with illustration and CTA

Badge

Free

Status badges in multiple variants

Avatar

Starter

Image avatar with initials fallback

Timeline

Full

Vertical event timeline with icons

KVList

Starter

Key-value pair display for detail views

Forms

FormField

Starter

Label, input, error, and help text wrapper

Select

Full

Searchable dropdown with keyboard nav

DatePicker

Full

Calendar date picker popup

Toggle

Free

On/off toggle switch with label

FileUpload

Full

Drag-and-drop file upload zone

TagInput

Full

Multi-value input with removable tags

Feedback

Modal

Starter

Accessible modal with focus trap

SlideOver

Full

Side panel drawer overlay

Toast

Starter

Stacking notification toasts

ConfirmDialog

Full

Destructive action confirmation

Tooltip

Free

Hover/focus tooltip positioning

ProgressBar

Free

Determinate and indeterminate progress

Navigation

Tabs

Starter

Horizontal tab bar with content panels

CommandPalette

Full

Cmd+K fuzzy search command menu

Breadcrumbs

Starter

Auto-truncating breadcrumb trail

Specialized

PricingTable

Full

Tier comparison with toggle billing

Changelog

Starter

Versioned update list with badges

CodeBlock

Starter

Syntax-highlighted code with copy button

⚡

Svelte 5 Runes Native

Every component uses $state, $derived, $effect. No Svelte 4 compatibility layers.

📋

Copy-Paste, Not npm

Each component is a single .svelte file. Copy into your project. Own the code. Customize everything.

🎨

Tailwind + CSS Variables

Themed with CSS custom properties. Change your brand colors once, every component follows.

Building a SaaS?

SvelteShip is a complete SaaS starter with auth, payments, and admin — pre-integrated with SvelteUI Pro components.

Check out SvelteShip — $199