Shadcnblocks Figma Kit

Overview

The Shadcnblocks Figma Kit is a premium Figma design system for shadcn/ui, now at version 2.1.0. It includes every base shadcn/ui component as a Figma component plus 500+ Pro blocks from the Shadcnblocks library, each with desktop, tablet and mobile designs and a direct link to its coded version on shadcnblocks.com.

The kit is built on the same official shadcn theme variables (such as primary, foreground and muted) used in Shadcnblocks' coded blocks, so designs translate to code without changing the design system. It ships with the default shadcn theme and an example Amber Minimal theme, and accepts themes from tweakcn. The .fig file is available to download with a Shadcnblocks Premium plan.

Features

• All shadcn/ui components: From buttons to dialogs, every base component is available in Figma
• 500+ Pro blocks: Responsive desktop, tablet and mobile versions, with new blocks added every month
• Swappable blocks: Blocks are built as components, so they can be selected and swapped from the asset library
• Design-to-code links: Each block links to its code version on Shadcnblocks
• Theme variables: Tailwind colors, spacing and official shadcn variables, compatible with tweakcn themes
• Light and dark mode: Every component and block switches modes instantly
• Tailwind text styles: Styles that map to Tailwind classes for font, weight, size, leading and tracking, with display and body fonts
• Icon sets and palettes: Color palettes, typography scale and icon sets included

Tech stack

• Figma, shadcn/ui theme variables, Tailwind CSS