meadow-design-svelte

Showcase: meadow-design-svelte.vercel.app

Meadow: a design system on top of shadcn-svelte, and a showcase site for it. Warm paper, two soft colour blocks, one ink colour, pill buttons, hairline lists. Four named palettes, each with light and dark. Every shadcn-svelte component is installed and restyled.

• / landing page
• /components catalog in seven groups
• /styles tokens, type, radius, surfaces, motion
• /dashboard a demo app composed from the components

Tech Stack

• Svelte (Svelte 5) - frontend framework
• SvelteKit (SvelteKit 3) - full-stack framework
• Tailwind CSS (Tailwind 4) - styling
• shadcn-svelte - UI components (built on bits-ui)
• Fontsource - self-hosted variable fonts (Manrope, DM Sans)
• mode-watcher - light/dark mode and the named palette (data-theme)
• LayerChart (through the shadcn-svelte Chart) - charts
• TanStack Table (@tanstack/svelte-table v9, through the data-table component) - sorting, filtering, paging and selection for tables
• svelte-sonner, vaul-svelte, paneforge, Embla Carousel, formsnap + sveltekit-superforms with zod schemas, shiki - the libraries behind the toast, drawer, resizable, carousel, form and code-block components

Using it in your own project

It is a normal shadcn-svelte setup. Copy src/routes/layout.css for the tokens and type utilities, then copy the folders you need from src/lib/components/ui. The site shell and showcase pages are not needed.

Getting Started

npm i
npm run dev