Beautiful UI (Svelte)

This is a Svelte 5 port of beautiful-ui by Shane Levine.

Svelte 5 component library (rune-based) with Tailwind CSS v4, Storybook, and a token-driven design language. Ported-in components should reference the tokens in src/tokens/tokens.css and follow guidelines.md.

Stack

• Svelte 5 — runes ($state, $derived, $effect)
• Vite + @sveltejs/vite-plugin-svelte
• Tailwind CSS v4 — CSS-first via @tailwindcss/vite (no tailwind.config.js)
• bits-ui — headless accessible primitives (dialogs, popovers, …)
• Storybook — component docs & testing

Install

pnpm install

Run dev server

pnpm dev

Run Storybook

pnpm storybook

Build

pnpm build            # production build (vite build)
pnpm build-storybook  # static Storybook output to ./storybook-static

Structure

src/
  app.css            # imports tailwindcss + tokens.css
  tokens/tokens.css  # design tokens (color, spacing, radius, shadow, type)
  components/
    Button/
      Button.svelte
      Button.stories.svelte
      Button.md
guidelines.md        # spacing, color, and typography rules for components

Credits

This is a Svelte 5 port of beautiful-ui by Shane Levine (MIT licensed). Icons use @tabler/icons-svelte.