Skip to main content

Shadcn/UI

Shadcn/UI Figma

Products

Figma libraryPro blocksTemplatesThemesFigma plugin
PricingDocsHelp

Buy now

Preview

105.5K

Shadcn Figma Plugin

Figma to shadcn/ui in seconds

From design to development. Manage tokens, turn designs into code, and install ready-made blocks.

Try it out for free

Convert designs to code

Convert your Figma designs into production-ready shadcn/ui components.

Select your design frame, and let AI generate clean, accessible code following shadcn/ui best practices.

Learn more

Convert designs to code feature illustrationConvert designs to code feature illustration

Export & import variables

Export your theme to CSS variables for your globals.css file, or import existing CSS variables back into Figma.

  • ✓Light and dark mode supported
  • ✓Tailwind v4 and v3 supported
  • ✓Three color modes supported

Learn more

Export & import variables feature illustrationExport & import variables feature illustration

Instant CLI commands

Copy and paste commands into your terminal to install Pro Blocks in your project directly from Figma.

  1. 1.Select any Pro Block in your design
  2. 2.Copy the command
  3. 3.Install it

Learn more

Instant CLI commands feature illustrationInstant CLI commands feature illustration