Docs / Figma UI Kit

Figma UI Kit

Design faster with the Shadcnblocks Figma Kit featuring all shadcn/ui components and hundreds of pro block designs.

The Shadcnblocks Figma Kit is a premium design resource that includes all shadcn/ui components and hundreds of block designs. Every block includes desktop and mobile versions, with direct links to the code version for seamless design-to-development handoff.

What’s Included

All shadcn/ui Base Components

Every shadcn/ui component is available as a Figma component with consistent styling and behavior:

  • Buttons, inputs, and form controls
  • Dialogs, popovers, and modals
  • Navigation components
  • Data display components
  • And more…

300+ Pro Block Designs

Jumpstart your web designs with hundreds of pre-designed blocks:

  • Hero sections
  • Feature sections
  • Pricing tables
  • Testimonials
  • Team sections
  • Footer layouts
  • And many more…

Each block includes:

  • Desktop version - Full-width layouts
  • Tablet version - Medium breakpoint designs
  • Mobile version - Responsive mobile layouts
  • Code link - Direct link to the code version on Shadcnblocks

Complete Design System

The kit includes comprehensive design tokens and variables:

CategoryWhat’s Included
ColorsFull Tailwind color palette + shadcn theme variables
TypographyFont scales matching Tailwind’s typography system
SpacingConsistent spacing tokens (4px base unit)
Border RadiusRadius tokens matching shadcn/ui defaults
ShadowsShadow tokens for depth and elevation
IconsLucide icon library

How to Access

The Figma Kit is included with Premium membership.

For Premium Members

  1. Go to the Figma page
  2. Click Download Figma Kit
  3. Import the .fig file into Figma

Preview Before Purchasing

You can preview the Figma Kit before purchasing:

View Figma Preview

Using the Kit

Getting Started

  1. Open the kit in Figma after downloading
  2. Enable the library to use components across your files
  3. Browse the pages to see all available components and blocks

Working with Components

All components use Figma’s component system:

  • Variants - Switch between component states (default, hover, disabled)
  • Auto Layout - Responsive layouts that adapt to content
  • Variables - Theme colors that can be swapped for customization

Working with Blocks

Each block is organized by category:

  1. Find the block type you need (Hero, Features, Pricing, etc.)
  2. Copy the block to your design file
  3. Customize text, images, and colors
  4. Use the code link to find the matching code

Customizing Themes

To customize the theme:

  1. Open the Variables panel in Figma
  2. Modify the color variables to match your brand
  3. Changes will propagate to all components and blocks

Design-to-Code Workflow

The Figma Kit is designed to work seamlessly with Shadcnblocks code:

flowchart LR
    A[Design in Figma] --> B[Copy block ID]
    B --> C[Install via CLI]
    C --> D[Customize code]
  1. Design - Use Figma blocks to create your layouts
  2. Identify - Note the block name (e.g., hero-123)
  3. Install - Use the CLI to add the block: npx shadcn add @shadcnblocks/hero-123
  4. Customize - Modify the code to match your Figma customizations

Updates

We regularly update the Figma Kit with new blocks and improvements. Premium members can re-download the kit to get the latest version.

Check the Changelog for recent updates.

Next Steps