+

shadcn/ui for Figma

Improve your design and development process with the best shadcn/ui kit for Figma, a comprehensive collection of customizable components, charts and assets based on the popular shadcn/ui. Comes with a dedicated plugin to generate code and export theme settings from Figma to code.

Loved by 3,500+ creators and teams
GregYannPaulaAgaEugeneGabi

Why I built this Figma kit?

Are you struggling to find a solid shadcn/ui kit for Figma? I've been there. After searching in vain for my last client project — all the UI kits on Figma Community I saw were of poor quality, outdated, or lacked support — I decided to create the resource I wished existed.

For the past seven years, I've been crafting Figma resources that have helped over 100,000 companies and individuals work faster. I've also been managing the Ant Design System for Figma, keeping it fresh with regular updates. Now, I'm excited to bring you this shadcn/ui kit for Figma. It's high-quality, up-to-date, and comes with Pro Blocks, a dedicated Figma plugin to export themes and components. Great customer support (me 😉) - included.
Matt Wierzbicki
Matt Wierzbicki
Creator of shadcn/ui kit for Figma

Shadcn/ui Figma components to deliver your projects faster

Whether you're crafting a sleek web app or a complex dashboard, we've got the building blocks to turn your ideas into pixel-perfect reality in record time.

Tailwind v4 supported
shadcn/ui version
2.5.0
shadcn figma components
shadcn/ui components for Figma you deserve!
  • Pixel-perfect components: Deliver projects faster with our meticulously crafted shadcn/ui components.
  • Developer’s best friend: Say goodbye to miscommunication - our components match shadcn/ui and Tailwind precisely.
  • Make them yours: Customizable variables make it a breeze to add your unique branding.
  • Smart and flexible: Auto-layout components grow or shrink as you edit the text.
  • Create prototypes faster: Whip up interactive designs in minutes with built-in Figma interactions.

Lightning-fast development

The UI kit is built on the principles of shadcn/ui and optimized for Figma. Since it's based on the existing shadcn/ui React components, developers can implement designs without creating components from scratch, saving significant time and effort.

86k+ stars

Shadcn/ui Figma Charts to level up your data visualization process

Whether you're crafting a simple report or building a complex dashboard, we've got the perfect chart to bring your data to life. Get ready to turn those numbers into visual masterpieces that will wow your audience and make insights pop!

shadcn figma charts
Data can be sexy too!
  • Beautiful data visualization: Deliver stunning data stories faster with our meticulously crafted chart components.
  • Seamless Integration: Maintain design consistency with charts that perfectly match the shadcn/ui library.
  • Flexible scaling: Adapt charts effortlessly to fit your designs, from mobile screens to large dashboards.
  • Quick Implementation: Find the right code in a snap with direct links to comprehensive documentation.
  • Easy Customization: Tailor chart colors to your brand by simply adjusting variable values.

Ready-made screen designs to accelerate your design workflow

Why start from scratch? Our prebuilt screens, or Blocks, are your secret weapon for lightning-fast design. Perfectly aligned with shadcn/ui, these Blocks are like LEGO pieces for your digital projects - snap them together, customize, and watch your designs come to life in record time!

shadcn figma blocks
Adjust to your needs and ship.
It’s that simple.
  • Accelerate Your Workflow: Jump-start your projects with our collection of prebuilt screens that match the shadcn/ui blocks.
  • Mobile-Ready Designs: Each block has a mobile variant so you can deliver mobile designs faster.
  • Code at Your Fingertips: Quickly locate corresponding code with convenient links to documentation.
  • Customization Made Easy: Adapt screens to your needs while preserving the shadcn/ui aesthetic.
  • Comprehensive Coverage: Access a wide range of common UI patterns and layouts.

Customize and make it yours

Your brand is unique, and your design system should be too! We've built our shadcn/ui kit for Figma with flexibility at its core, ensuring that you can easily adapt it to fit your brand's personality perfectly. Whether you're working on a single product or juggling multiple brands, we've got you covered.

shadcn figma customization
Easy and fast customization!
  • Easy Customization: Tailor components to your brand with intuitive Figma variables.
  • Theme Flexibility: Switch seamlessly between dark and light themes to suit any design context.
  • Multi-Brand Support: Create and manage multiple styles for different brands within a single design system.

Crafted to make the development process easier and faster

We know that great design is only half the battle - turning those pixels into code is where the real magic happens. That's why we've crafted our UI kit for Figma with developers in mind, ensuring a smooth transition from design to implementation. Say goodbye to the dreaded designer-developer disconnect!

shadcn figma implementation
Devs will love you! <3
  • Quick Access to Docs: Find component documentation easily with direct links to Shadcn resources.
  • Naming Consistency: Navigate effortlessly with component names that match shadcn/ui conventions.
  • Streamlined Workflow: Bridge the gap between design and development for smoother project execution.
  • Dedicated Figma plugin: The Figma plugin is coming soon to enhance your design-to-code process further.
  • Developer-Friendly Structure: Organize your designs in a way that translates smoothly to code.
  • Collaborative Efficiency: Improve communication between designers and developers with shared terminology.

All assets in one place

Say goodbye to endless scrolling through the Figma community searching for those elusive design elements! We've got your back with a treasure trove of commonly used assets, all neatly packaged alongside your shadcn/ui components. Everything you need in one place.

shadcn figma assets
No more searching for these with each new project!
  • 1468 Lucide icons
  • 463 Crypto icons
  • 260 Flag icons
  • 136 Social media icons
  • 42 Payment method icons
  • 35 Cursor icons
  • 18 Store badge icons
  • Image and video placeholders

Always up-to-date

Don't worry about inconsistencies, missing Figma features or outdated components. Regular updates keep you in sync with the latest shadcn/ui components and Figma features.

Tailwind v4 supported
shadcn/ui version
2.5.0
  • Rapid Integration: We typically ship new Figma features or shadcn/ui updates within 7 days of release.
  • Continuous Improvement: Monthly additions of new features, components, and UI kit enhancements.
  • Proven Track Record: Since 2019, we've created and maintained the Ant Design System for Figma, consistently delivering updates. Our long-standing commitment to Ant Design System showcases our dedication to ongoing support.
  • Expanding Ecosystem: We're constantly growing our product range to boost your work efficiency.

Onboard your team and clients easily

Getting your whole team up to speed with a new UI kit can be a challenge, right? Not anymore! We've made sure that adopting our shadcn/ui kit for Figma is a breeze for everyone, from seasoned designers to team members who've never opened Figma before.

shadcn figma onboarding
Yaaay! Documentation for everyone! (PMs too!)
  • Comprehensive documentation: Find detailed guides on the efficient use and customization of the UI kit.
  • User-Friendly Resources: Access everything needed to get started, suitable for designers and non-designers.
  • Clear Instructions: Follow step-by-step explanations to maximize the UI kit's potential.
  • Quick Team Adoption: Ensure smooth integration of the UI kit across your entire team.
  • Continuous Learning: Stay tuned for our upcoming video course to further enhance your skills.
  • Inclusive Design Process: Empower all team members to contribute effectively to your design projects.
Pro Blocks

Design and build even faster

Skip the hassle of building layouts from scratch. Our Pro Blocks are sophisticated, ready-to-use blocks available as both Figma components and production-ready code.

Available in Plus

Pro Blocks for Figma

Transform your design workflow with our sophisticated Pro Blocks for Figma. Get instant access to a comprehensive library of pre-built shadcn/ui elements, saving you hours of design time and ensuring consistency across your projects.
Available in Premium

Pro Blocks for Figma + Code

Get the complete package: beautiful Figma components plus production-ready code. Each component comes with fully tested, optimized code that integrates perfectly with shadcn/ui, React, and Next.js. Go from design to deployment in record time.
Browse Pro Blocks

Wall of love

Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum hendrerit ex vitae sodales.

Get started

Level-up your Figma to shadcn/ui workflow and build faster today

Buy now