# Svelte Marketing Blocks

> Svelte Marketing Blocks is a collection of responsive, accessible, copy-ready website sections for SvelteKit. It includes heroes, features, pricing tables, testimonials, calls to action, authentication screens, and other common marketing UI.

The blocks are built with Svelte 5, Tailwind CSS v4, and shadcn-svelte. They are distributed through shadcn-compatible JSON registries and copied into the user's project, where the source code can be edited without depending on a component package. The project currently includes 202 published blocks across four visual variants: Kit, Mist, Veil, and Dusk.

## Variants

| Variant | Blocks | Design direction | Browse |
| --- | ---: | --- | --- |
| Kit | 81 | Versatile marketing sections with bold layouts and flexible styling. | [Browse Kit](https://sv-blocks.vercel.app/kit/hero) |
| Mist | 51 | Clean, restrained sections for product, marketing, and documentation sites. | [Browse Mist](https://sv-blocks.vercel.app/mist/hero) |
| Veil | 60 | Refined SaaS sections with warm colors, rounded controls, and polished details. | [Browse Veil](https://sv-blocks.vercel.app/veil/hero) |
| Dusk | 10 | Zinc-based marketing blocks with dedicated UI primitives. | [Browse Dusk](https://sv-blocks.vercel.app/dusk/hero) |

## Documentation

- [Installation](https://sv-blocks.vercel.app/docs/installation.md): Prepare a SvelteKit project, configure Tailwind CSS and shadcn-svelte, and install blocks from any collection.
- [Mist theme setup](https://sv-blocks.vercel.app/docs/mist-theme.md): Install Mist's clean, documentation-inspired design tokens and required UI primitives.
- [Veil theme setup](https://sv-blocks.vercel.app/docs/veil-theme.md): Install Veil's warm, polished design tokens, typography, and required UI primitives.
- [Dusk theme setup](https://sv-blocks.vercel.app/docs/dusk-theme.md): Install Dusk's Zinc-based theme tokens and dedicated UI primitives.
- [MCP server setup](https://sv-blocks.vercel.app/docs/mcp.md): Connect the jsrepo MCP server to AI coding tools such as Cursor or Windsurf for registry discovery and installation.

## Registries

- [Kit registry](https://sv-blocks.vercel.app/r/index.json): General-purpose marketing blocks with a flexible, neutral visual style.
- [Mist registry](https://sv-blocks.vercel.app/m/index.json): Clean, structured marketing blocks with a documentation-inspired visual style.
- [Veil registry](https://sv-blocks.vercel.app/v/index.json): Refined marketing blocks with warm neutral colors, rounded controls, and serif accents.
- [Dusk registry](https://sv-blocks.vercel.app/d/index.json): Zinc-based marketing blocks with dedicated button, card, input, and label primitives.

## Human-readable website

- [Home](https://sv-blocks.vercel.app): Project overview and featured collections.
- [Documentation](https://sv-blocks.vercel.app/docs): Human-readable guides and setup instructions.

## Open source and license

Svelte Marketing Blocks is free and open source under the MIT License. The blocks may be used, copied, modified, merged, published, distributed, sublicensed, and sold in personal or commercial projects, subject to the license terms.

- [Source code](https://github.com/SikandarJODD/cnblocks)
- [MIT License](https://github.com/SikandarJODD/cnblocks/blob/main/LICENSE)