Command Palette
Search for a command to run...
sv-blocks

Installation

Install and configure Svelte Shadcn Blocks in a new or existing SvelteKit app.

1. Create a SvelteKit project

Create a new app, or continue with an existing SvelteKit project.

pnpm dlx sv create my-app

2. Add Tailwind CSS

Configure Tailwind CSS using the official Svelte CLI add-on.

pnpm dlx sv add tailwindcss

3. Initialize shadcn-svelte

Set up shadcn-svelte and choose the configuration that fits your project.

pnpm dlx shadcn-svelte@latest init

4. Install a block

Choose the registry that matches the block family you want to use.

Kit

pnpm dlx shadcn-svelte@latest add https://sv-blocks.vercel.app/r/hero-one.json

Mist

pnpm dlx shadcn-svelte@latest add https://sv-blocks.vercel.app/m/hero-one.json

Veil

pnpm dlx shadcn-svelte@latest add https://sv-blocks.vercel.app/v/hero-one.json

Copy and paste instead

Prefer not to use the CLI? Copy a component from its preview and paste it directly into your app.

What’s next?

Explore the Kit blocks, or continue with the Mist theme setup or Veil theme setup.