News, articles & updates
From Figma to production React, with AI in the loop
The four pieces of the new design-to-code workflow: shadcncraft in your project, the shadcncraft Figma kit, the Figma MCP, and the shadcn MCP. How to set it up, what the loop actually looks like on a real task, and how to bring it into an existing project.
Claude Cowork has changed managing a Figma design system library forever
Field notes from a month of running a Figma library with Claude Cowork in the loop. What it is great at (variables, rebinding, scoped refactors, plugin generation), what it cannot do (anything truly visual), and the workflow rules I had to learn the hard way so it does not eat your file.
How to optimize your shadcncraft Figma file for speed
A practical guide to slimming down your shadcncraft Figma file. Cut unused pages, icons, components, and images so your working copy loads fast, without ever touching the originals.
Native shadcn styles and presets now in Figma
All eight styles now live natively in Figma variable modes. Or paste any shadcn Create preset into the shadcncraft plugin and recreate it 1:1 inside your Figma file. Limited-time 15% off Pro and Pro + React for this launch.
Create and preview your own design system with shadcncraft Create
shadcncraft Create mirrors shadcn Create, with the same styles, bases, icon libraries, themes, fonts, and preset workflow, plus live previews of shadcncraft pro blocks.
Pick your base, your style, your icons
shadcncraft now supports Base UI, all seven shadcn styles, multiple icon libraries, and a new customizer for previewing combinations before install.
Announcing shadcncraft Figma plugin v2
We’ve released version 2 of the shadcncraft Figma plugin, introducing a much deeper connection between Figma, shadcn tooling, and production code.
Introducing shadcncraft
Today we’re launching a new name, a new brand, and a completely rebuilt website. Shadcraft is now shadcncraft.
Application components & blocks have landed
Application components and blocks are now included in both the Pro and Pro + React Kits. If you already own either product, they’re available right now in your Polar customer portal.
Introducing the shadcncraft Figma plugin
Today we’re releasing the shadcncraft Figma plugin.
The fastest way to theme shadcn/ui with tweakcn
Theming is one of the quickest ways to make shadcn/ui feel like your brand. The default system has a clean black and white foundation, but every real project eventually needs colour, tone and personality. For many teams, this is where things slow down. Updating variables, aligning Figma with code and trying to manage light and dark mode can turn into days of manual work.
Best practice patterns for tabbed interfaces in shadcn/ui
Tabbed interfaces are one of the most common navigation patterns in modern product design. They let users switch between related sections without losing context. In shadcn/ui, tabs are built on top of Radix primitives, which means you get strong accessibility foundations and predictable behaviour by default.
Building production ready data tables with shadcn/ui
Go beyond the default shadcn/ui data table. Learn sorting, filtering, column pinning, row selection, and responsive patterns for production React apps.
The complete beginner’s guide to shadcn/ui
New to shadcn/ui? Learn what it is, how it works with React and Tailwind, and why teams prefer copy-paste components over traditional UI libraries.
Using Figma Code Connect with our shadcn/ui kit
Anyone who has worked through a design handover knows the pain: the Figma file looks immaculate, yet the coded version drifts. Spacing shifts a little. States don’t behave the way they were designed. Variants aren’t interpreted consistently. Even with a strong design system, these gaps still appear.
Build pages fast with shadcn MCP Server
Most web builders still assemble marketing pages the long way: drop in components, tweak spacing, adjust layout, refactor imports. With the shadcncraft Pro + React kit and shadcn MCP Server, the workflow becomes prompt-driven. You describe what you want in natural language, and the agent assembles a complete, production-ready page, and even takes care of installing all the necessary components from the shadcncraft registry.
Our Black Friday Sale is now on! 30% off everything.
The biggest discount we have ever offered
Five essential Figma plugins for design systems
When we started building shadcncraft, our premium Figma UI kit for the shadcn/ui ecosystem, we knew the level of detail needed to be high. The aim was to mirror the structure, behaviour, and developer mindset behind shadcn/ui. That meant clean variables, pixel precision, consistent rounding, correct node types, and instant theming.
