CN Blocks

CN Blocks bridges the gap between shadcn-svelte’s individual components and complete page layouts. If you have already adopted shadcn-svelte for your project, CN Blocks gives you page-level sections that use the exact same design tokens, Tailwind conventions, and component patterns — everything fits together without style conflicts.

The collection includes approximately 30 blocks covering standard page sections: heroes, feature displays, pricing tables, testimonial sections, headers, footers, and content layouts. Each block is composed using shadcn-svelte components internally, so buttons, cards, badges, and other elements automatically match your project’s existing theme.

This tight integration with shadcn-svelte is CN Blocks’ defining feature and its primary limitation. The blocks assume you have shadcn-svelte installed and configured. They reference shadcn components directly and rely on the CSS custom property theming system. This means CN Blocks is not a standalone block library — it is an extension of the shadcn-svelte ecosystem.

For teams committed to shadcn-svelte, this tight coupling is a significant advantage. Swapping your theme propagates through both individual components and page blocks. Light/dark mode works consistently. The visual language stays cohesive from micro-interactions to full page layouts.

The blocks themselves are well-crafted with attention to responsive design, spacing consistency, and typographic hierarchy. Each block supports dark mode through shadcn’s theming system, and the TypeScript definitions ensure type safety when you customize block props.

As a community-driven project, CN Blocks continues to grow its collection. The pace of new additions is steady, and the maintainers are receptive to contributions. Documentation covers installation and basic usage, though detailed customization guides for individual blocks could be more thorough.

CN Blocks is the natural choice for shadcn-svelte users who want page blocks. For teams using other component libraries, the tight shadcn dependency makes SV Blocks or SvelteBlocks more practical options.