Installation

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

Requirements

Requirement	Minimum	Notes
Node.js	18+	Recommended: current LTS
Package Manager	pnpm/npm/yarn	Examples use pnpm and npx
SvelteKit	2.x	Project should already build successfully

Setup Steps

Create or open a SvelteKit project

Terminal

npx sv create my-app

Add Tailwind CSS

Terminal

npx sv add tailwindcss

Initialize shadcn-svelte

Terminal

npx shadcn-svelte@next init

Install block using shadcn-svelte CLI

Terminal

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

Or simply copy and paste components

Open any preview route, copy the component markup, and paste it into your app. Start with Default, Mist, or Veil.

Variant Packs

Each pack includes 50+ ready-to-use components. Choose one style direction or mix them based on your page needs.

Default

50+ Components - Default Variant

Balanced, production-ready UI blocks for general SaaS and marketing pages.

Browse default previews

Mist

50+ Components - Mist Variant

Minimal, content-first sections for documentation-heavy pages and clean layouts.

Open Mist setup guide

Veil

50+ Components - Veil Variant

Modern, high-contrast blocks tailored for product storytelling and launch pages.

Open Veil setup guide

Verification

Check Imports

After installation, import the generated component and ensure your app compiles without type errors.

If installation fails, verify your shadcn-svelte init completed first. Most issues come from missing base UI setup.

Use this route as your baseline before following Mist or Veil theme-specific setup.