Vital UI Svelte 5 · Tailwind v4

Svelte 5 · Tailwind v4

v0.1 · MIT

The component library that stays out of your way

103 Svelte 5 families across 15 categories, styled entirely from design tokens with class-variance-authority. You compose the parts — the kit never composes for you.

Browse the components See five real pages
$ pnpm add @mirabelle-labs/vital-ui
Runes only
No CSS files
Dark mode built in
SSR-safe
live, not a screenshot
Live components
Nothing leaves the page.

Seats

12 · $288.00/mo

103

Component families

15

Categories

5

Helper entry points

0

CSS files you write

The kit

Everything below is a component

No mockups on this page: every tile is the real thing, in the theme you picked.

Buttons

Badges & tags

primary success warning tag neutral

Avatars

AO BS CM DP
4 online

Progress

72

Form controls

Volume 64

Charts & KPIs

Requests 8.2%

128k

Status

Running Pending Failed

Timelines

  1. Deployed

    now

  2. Built

    2m

  3. Pushed

    5m

Open the playground

Principles

Opinionated where it helps, silent everywhere else

Six decisions taken once, applied to every component in the kit.

The parent composes

No monolithic menu that takes an array of items. You assemble Menu + MenuItem, Card + CardHeader/Body/Footer, Tabs + TabList/Tab/TabPanel — so a component never blocks the layout you need.

Tokens, not values

Colours and fonts come from the design system, sizes from a named scale (px-md, gap-2xs, h-control-md). Restyle the whole kit by editing the token files.

Every axis is a variant

One variants.ts per family, built with class-variance-authority, with typed defaults. Each *Variants object is exported, so you can reuse the exact same classes elsewhere.

Dark mode by attribute

data-theme="dark" on any root, applied before hydration. No flash, no class juggling, and every component ships both palettes.

Icons come from the parent

No component imports an icon set: icons are passed in as snippets, so the kit never picks one for you. The standalone <Icon> helper is optional and wraps a Font Awesome glyph — the only icon package in the install.

Logic included

Lists, forms, overlays, async calls and formatting have helpers of their own — separate entry points, so importing a Button never pulls them in.

Getting started

Two imports and you are styled

The tokens ship as one stylesheet; components come from the package root, helpers from their own entry points. Nothing to configure, no provider to wrap the app in, no build step beyond the one SvelteKit already runs.

Tree-shakeable: components and helpers are separate entries.

SSR-safe: no DOM access at import time.

Typed props, exported variant types, no any.

Component reference Helper reference
$ pnpm add @mirabelle-labs/vital-ui
app.css css
/* app.css */
@import 'tailwindcss';
@import '@mirabelle-labs/vital-ui/styles';

/* only if you use <Icon> */
@import '@fortawesome/fontawesome-free/css/all.css';

Design system

One token set, two themes, no magic values

Ten palettes, a semantic layer and a named size scale. Components never hard-code a colour or a pixel — restyle the kit by editing the token files, and dark mode follows for free.

primary
success
warning
danger
violet
gray

Elevation

raised
lifted
overlay
floating
page
surface
surface-2
line
line-strong
fg-muted

Light

Deploy Healthy
web v2.15.0

Dark

Deploy Healthy
web v2.15.0
variants.ts ts
// the single source of styling truth
export const buttonVariants = cva(
	'inline-flex items-center gap-2xs font-medium rounded-control focus-ring',
	{
		variants: {
			variant: {
				primary: 'bg-primary-600 text-white',
				outline: 'border border-line',
				ghost: 'hover:bg-surface-2'
			},
			size: {
				sm: 'h-control-sm px-xs text-[13px]',
				md: 'h-control-md px-md text-sm',
				lg: 'h-control-lg px-lg text-md'
			}
		},
		defaultVariants: { variant: 'primary', size: 'md' }
	}
);

Components

15 categories, 103 families

Each one has a playground with every prop wired to a control, and the import line and markup generated underneath.

Open the playground

Typography

5

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

Layout

11

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

Buttons

6

Actions, icon buttons, groups and decorative tiles.

Badges

2

Status labels and removable tags.

Feedback

11

Alerts, progress, loading states and status indicators.

Form

20

Inputs, selection controls and rich pickers.

Surface

2

Cards composed from header, bars, body and footer.

Media

3

Avatars, groups and anchored badges.

Data

8

Tables, KPI tiles, lists and timelines.

Charts

4

Dependency-free SVG charts.

Navigation

6

Tabs, accordions, steppers, breadcrumbs and pagination.

Overlay

9

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

App shell

5

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

Editorial

6

Kickers, highlights, handwritten notes and code blocks.

Misc

5

Icons, keyboard hints, toolbars and primitives.

Helpers

The logic around the components, included

Lists, forms, overlays, async calls, formatting and tones — each in its own entry point, tested, with no $effect inside.

@mirabelle-labs/vital-ui Every component, the cn() utility and VariantProvider.

Button · Card · Table · Dialog · Toaster · …

@mirabelle-labs/vital-ui/state Reactive building blocks for the data behind a screen.

createCollection · createOverlay · createForm · createListView · createAction · createLog

@mirabelle-labs/vital-ui/validation Field rules and schemas for createForm.

required · email · port · dns1123 · compose · validateWith

@mirabelle-labs/vital-ui/format Money, sizes, ages and dates — locale-aware and SSR-safe.

money · compact · percent · bytes · plural · age · relativeTime · shortDate

@mirabelle-labs/vital-ui/data Aggregates, status → tone maps and id sequences.

sumBy · countBy · groupBy · tally · toneMap · thresholdTone · createSequence

@mirabelle-labs/vital-ui/timing Timers that are no-ops on the server and clean up after themselves.

delay · debounce · throttle · after · every · isBrowser

Live helper examples
Invoices.svelte svelte
<script lang="ts">
	import { SearchInput, Pagination } from '@mirabelle-labs/vital-ui';
	import { createListView } from '@mirabelle-labs/vital-ui/state';
	import { money } from '@mirabelle-labs/vital-ui/format';

	const view = createListView(() => invoices, {
		search: ['number', 'client'],
		pageSize: 10
	});
</script>

<SearchInput bind:value={view.query} />

{#each view.visible as invoice (invoice.number)}
	<Tr hover>
		<Td>{invoice.number}</Td>
		<Td align="end" mono>{money(invoice.amount)}</Td>
	</Tr>
{/each}

<Pagination bind:page={view.page} total={view.pageCount} />

Under real load

Five complete pages, nothing but this library

A SaaS landing, an editorial product page, a full shop with checkout, a client portal and a Kubernetes console — the proof that the kit survives dense, stateful screens.

All pages

Orbit — SaaS landing

B2B product analytics

Classic marketing page: sticky navbar, hero with a live dashboard mock, features, deep-dives, pricing toggle, FAQ and footer.

Navbar Section Stat AreaChart
Open

Aurel Store — shop

Listing · product · checkout

Complete e-commerce flow with filters, pagination, product gallery and tabs, cart drawer and a four-step checkout with OTP verification.

Slider Pagination QuantityInput Stepper
Open

Acme — client portal

Agency ↔ client extranet

App shell with sidebar views: overview dashboard, projects, invoices table, support tickets thread and documents with upload and delete flows.

Sidebar UserMenu Stat BarChart
Open

Kubernetes console

Cluster admin with node sidebar

Fleet console: nodes with live status in the sidebar, Lens-style node detail (gauges, pods, conditions, YAML), apps you can scale, restart and roll out, services and ingress you can expose and edit, cluster events.

SidebarItem ProgressRing Tabs Drawer
Open

Before you install it

0.1.0 First public cut

The 15 categories, the token set and the demo site.

next Data & logic helpers

Separate entry points for state, validation, format, data and timing.

Start with a button, ship a console

The same kit renders the page you are reading and the Kubernetes console two clicks away — same tokens, same variants, same dark mode.

$ pnpm add @mirabelle-labs/vital-ui
Browse the components Open the console