Primitives

UI Building Blocks

Atomic components used across every layer of the system.

Badge — all variants
Default Primary Success Warning Danger Muted
Badge — sizes
Small Medium New Beta
Avatar — all sizes with src
User User User User User
Avatar — name initials (no src)
AN BT CW DK ER
Input — variants
We'll never share your email.
This field is required.
Textarea — variants
Max 500 characters.
Message cannot be empty.
Select — variants
Pick your preferred frontend framework.
Please select a framework.
Checkbox — states
Toggle — states
Alert — all variants
Modal — triggered open

Confirm action

Are you sure you want to proceed? This action will update your account settings and cannot be reversed without contacting support.

Tabs — 3 tabs with content

System Overview

This design system provides a comprehensive set of UI primitives, marketing sections, and utility components built for SvelteKit. Every component is theme-aware via CSS custom properties.

Accordion — FAQ, single open
The system is built with SvelteKit 5, using CSS custom properties (tokens) for all styling. Every component is framework-native — no runtime CSS-in-JS, no Tailwind utility purging.
Themes are applied via a single data attribute on the root element (data-theme="luxury"). All tokens resolve from that context — no class toggling, no component re-renders.
Yes. Each component is self-contained and imports only what it needs. You can copy any .svelte file and its token dependencies into an existing project.
All components are written in TypeScript with strict prop types. The design system ships full type declarations so your editor will autocomplete every prop and variant.
Accordion — multiple open
The system is built with SvelteKit 5, using CSS custom properties (tokens) for all styling. Every component is framework-native — no runtime CSS-in-JS, no Tailwind utility purging.
Themes are applied via a single data attribute on the root element (data-theme="luxury"). All tokens resolve from that context — no class toggling, no component re-renders.
Yes. Each component is self-contained and imports only what it needs. You can copy any .svelte file and its token dependencies into an existing project.
All components are written in TypeScript with strict prop types. The design system ships full type declarations so your editor will autocomplete every prop and variant.