Installation

Prerequisites

The components require a SvelteKit project with Tailwind CSS v4. If you are starting from scratch, create one and select the tailwindcss add-on when prompted:

npx sv create my-app

Initialize shadcn-svelte

npx shadcn-svelte@latest init

The preset and colors you pick during init don’t matter — the material design theme replaces them in the next step. For details on initializing shadcn-svelte, visit the shadcn-svelte docs.

Add the theme

Copy the :root, .dark, and @theme inline blocks from this project’s layout.css into your app’s global stylesheet, replacing the same blocks generated by shadcn-svelte init. Keep the rest of your stylesheet (the @import lines, @custom-variant, and @layer base blocks) as is.

Install the fonts

The theme uses Roboto for text and Geist Mono for code:

npm install @fontsource-variable/roboto @fontsource-variable/geist-mono

Then import them in your global stylesheet, replacing the font import added by shadcn-svelte init:

@import '@fontsource-variable/roboto';
@import '@fontsource-variable/geist-mono';

To keep your own fonts instead, skip this step and set --font-sans and --font-mono in the @theme inline block to your fonts.

Add components

Add components with the shadcn-svelte CLI using this registry’s URL. For example, to add the button:

npx shadcn-svelte@latest add https://material-svelte.flenze.com/r/button.json

The exact command for each component is on its docs page. Any npm packages a component needs (such as bits-ui) are installed automatically.