A Premium Shadcn Figma Kit with Hundreds of Pro Blocks.

Design faster and smarter with the new Shadcnblocks Figma Kit. With hundreds of new block designs, every component is crafted for consistency, responsiveness, and seamless integration with shadcn/ui. Each block includes a direct link to the code version, making it easy to collaborate to transition to code.

Get AccessFigmaFigma Preview
placeholder

All Shadcn UI Base Components

Access every Shadcn UI component as Figma components, ready to use in your designs with consistent styling and behavior.

300+ Premium Blocks

Jumpstart web designs with over 300 new blocks with desktop, tablet and mobile ready versions. Easy to customize, duplicate and enhance.

Complete Theme System

Includes comprehensive theme variables, typography scales, color palettes, and icon sets for consistent design across your projects

Design System ComponentsBlocks

COMPLETE COMPONENT LIBRARY

Includes all the base shadcn/ui components in Figma

From buttons to dialogs, every shadcn/ui component is available as a Figma component. Design with confidence knowing your designs will match your codebase perfectly.

shadcn/ui components in Figma
Figma component variants
DETAILED BLOCKS

Every block crafted in Figma

We've taken every code block and meticulously crafted it in Figma. Each block uses shadcn/ui variables and base components and. Designs for Desktop, Tablet and Mobile views.

Figma color system
Design System Ready

Tailwind & Shadcn Theme Variables

Includes Tailwind color palette, shadcn theme variables, typography scale, spacing system, and component tokens. Everything you need to maintain design consistency.
Figma

Figma Preview

Purchase the Premium plan to get instant access to download the .fig file

Design FasterShadcnblocks

Access With Premium