About shadcncraft
Designing with shadcn/ui in Figma means finding or building components that match the code. When names, variants, and styles differ, developers have to work out how the design translates before they can build it.
shadcncraft gives you a Figma UI kit and matching React components and blocks, built on shadcn/ui. Component names and variants follow the code, so designers and developers work from the same system.
What shadcncraft does
Figma UI kit
Design with shadcn/ui components, blocks, tokens, and theming in Figma. Explore the Figma UI kit and choose Base Figma or Pro Figma for the scope of your project.
React components and blocks
Build with matching React components and UI blocks for marketing, applications, and ecommerce. Install what you need through the shadcn CLI and registry system.
Theming
Use design tokens and light and dark modes to adapt the system to your brand. The theming guide explains how to customize the Figma kit.
What makes shadcncraft different
Matching design and code
Figma component names match React exports, layer names map to component slots, and variant properties map to React props. The Figma-to-React mapping guide explains these conventions with concrete examples.
Built on shadcn/ui
Components work with the shadcn CLI and registry conventions. Add the source to your project and customize it to fit your product.
Choose Figma alone or Figma with React
Base Figma and Pro Figma serve teams working in design. Pro Figma + React adds matching React components, blocks, and Apps. Compare the packages.
A one-time purchase
Paid packages include lifetime access and ongoing updates, with no subscription. You can upgrade later and pay the difference between packages.
Eight starting styles in Figma
The v3 kit includes eight visual styles, organized through three variable collections: Tailwind, Style, and Mode. Read the variables guide to see how the styles and light and dark modes work together.
Who shadcncraft is for
- Product teams building SaaS applications and dashboards.
- Startups launching marketing sites and web apps.
- Designers who want a structured Figma system aligned with React code.
- Developers building with shadcn/ui and Tailwind CSS.
- Agencies and freelancers delivering branded client projects.
About the founder
shadcncraft was created by Hamish O'Neill, a designer and design systems specialist based in Melbourne, Australia. He started shadcncraft in January 2026 and is its only full-time team member, supported by a team of contractors.
Hamish has spent years working on large scale design systems inside product companies, helping teams ship faster while maintaining consistency across design and engineering.
He built shadcncraft to bring the same level of structure and quality to teams building with the modern React stack.
What started as a Figma UI kit has grown into a full design system ecosystem used by developers and designers around the world.
I built shadcncraft to extend shadcn/ui the right way, with production-ready components, blocks, and themes for Figma and React, designed for teams shipping real products.
Follow Hamish on LinkedIn or X.
How shadcncraft works
- Browse the Figma kit, components, and blocks to find what your project needs.
- Choose a package for Figma only or Figma with React.
- Follow the Figma setup guide or registry installation guide, then customize the design and code.
Get help through support or the Discord community. Commercial use is covered by the license terms.
Key facts about shadcncraft
- Name
- shadcncraft
- Product
- Design system, Figma UI kit, and React component and block registry
- Founder
- Hamish O'Neill
- Started
- January 2026
- Team
- Hamish O'Neill full-time, supported by a team of contractors
- Founder location
- Melbourne, Australia
- Website
- shadcncraft.com
- Purchase model
- One-time purchase, lifetime access, and ongoing updates
- Contact
- Contact us
Our goal
The mission behind shadcncraft is straightforward.
Make it easier for teams to design and build high quality interfaces without wasting time on repetitive work.
Design and code should stay aligned.
Shipping UI should be fast.
And the tools should stay flexible enough to work with real production code.
shadcncraft is built to support that.
What the community says
Frequently Asked Questions
shadcncraft is a production-ready design system built on shadcn/ui. It includes a Figma UI kit and matching React components with one-to-one alignment between design and code.
Design it once. Ship it exactly.
