Svelte Shadcn Blocks

Production-ready UI and marketing blocks for Svelte 5, built with shadcn-svelte and Tailwind CSS v4.

What's New

60 New Blocks - Veil Variant

The new Veil collection is now live with 60 production-ready blocks for modern SaaS and product websites.

Explore Veil: https://sv-blocks.vercel.app/veil

Variants

Svelte Shadcn Blocks now includes 3 variants:

| Variant | Style | Block Count | | ------- | ------------------------------------- | ----------- | | Normal | Bold marketing visuals | 50+ | | Mist | Minimal, documentation-friendly style | 50+ | | Veil | Polished modern SaaS style | 60 new |

That is 160+ blocks across the library.

Features

• 160+ ready-to-use blocks across Normal, Mist, and Veil
• Svelte 5 + SvelteKit-friendly structure
• Tailwind CSS v4 and shadcn-svelte based
• Responsive and theme-aware components
• CLI install flow via shadcn-svelte and jsrepo
• MIT licensed and open source

Preview and Docs

• Website: https://sv-blocks.vercel.app
• Docs v2: https://sv-blocks.vercel.app/v2-docs
• Installation guide: https://sv-blocks.vercel.app/v2-docs/installation
• Mist theme setup: https://sv-blocks.vercel.app/v2-docs/mist-theme
• Veil theme setup: https://sv-blocks.vercel.app/v2-docs/veil-theme
• MCP docs: https://sv-blocks.vercel.app/v2-docs/mcp

Quick Start

npx sv create my-app
npx sv add tailwindcss
npx shadcn-svelte@next init

Install a block from any variant:

# Normal
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/mist-hero-one.json

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

Inspiration

Inspired by Tailark, adapted for Svelte developers.

Sponsor

Support the project on GitHub Sponsors: SikandarJODD

Contributing

Issues and pull requests are welcome.

• Report bugs or request features: https://github.com/SikandarJODD/cnblocks/issues
• Discuss updates: https://x.com/Sikandar_Bhide

License

Published under the MIT License.

Built by @Sikandar Bhide and @Aidan Bleser.