Pre-built Blocks

56+ production-ready blocks, zero token violations.

A curated registry of composable UI blocks — heroes, feature grids, pricing tables, auth flows, dashboards, and more. Every block is token-pure, WCAG AAA accessible, and ready to paste into your project via the CLI.

Composable by design
Hero
CTA
Pricing
Features
Sidebar
Stats
Testimonial
FAQ

Pre-built sections that snap together — heroes, pricing tables, feature grids, and more, all rendered with real primitives.

56Total Blocks
11Categories
56Community
0Pro
Block Explorer

Filter, search, and copy in one click.

Every block has a unique key. Copy it and paste it into your CLI: npx @shavin/cli add <block-key>.

Tier
56 blocks
Centered Media Hero
Split Media Hero
Video Statement Hero
Bento Features
Linked Feature Cards
Icon Feature Grid
Alternating Feature Story
Three-Tier Pricing
Pricing Comparison Matrix
Single Plan Pricing
Sign In
Sign Up
Forgot Password
Verify Code
Split Screen Sign In
SSO-First Sign In
Magic Link Sign In
KPI Grid
Stats Bar
Trend Cards
Review Grid
Spotlight Testimonial
Logo Wall
Sticky App Bar
Column Footer
Statement Footer
Newsletter Footer
Compact Footer
Mesh CTA Band
Subscribe Card
Conversion Banner
Mesh Type Hero
Ruled Feature List
FAQ Accordion Section
Featured Testimonials
Pricing with Billing Toggle
Application Shell
Workspace Sidebar
Collapsible Sidebar
Standard Sidebar
Inspector Sidebar
Floating Sidebar
Feature Action Card
Article Card
KPI Progress Card
Profile Card
Plan Card with Image
Settings Panel
Support Chat
Onboarding Checklist
Sign In Card
Product Grid
Product Detail
How to Use

From registry to your codebase in seconds.

Three steps. No manual copy-paste of token assignments. No design system violations.

01

Find a block

Browse the registry above. Copy the block key with one click.

02

Run the CLI

Execute: npx @shavin/cli add <block-key>. The CLI writes the full TSX file with all imports.

03

Customize & ship

Edit the component. Token purity is preserved by construction — no hardcoded colors.

Ready when you are

Start building with production-ready blocks.

Browse the full registry in the docs, or open Shavin Studio to compose visually.