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.






- 2000+ shadcn/ui components
- 1400+ SVG Icons
- 900+ useful design assets
- 70+ shadcn/ui charts
- Official shadcn/ui blocks
- Light and dark modes
- Built with variables and customizable
- Ready for multi-brand design systems
- Figma plugin to export code New
- Regular updates
- 200+ Pro Blocks New
- 30+ Background Patterns New
- shadcn/ui templates (coming soon)
- Academy (coming soon)
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.

- 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.
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!

- 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!

- 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.

- 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!

- 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.

- 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.
- 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.

- 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.
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.
Pro Blocks for Figma
Pro Blocks for Figma + Code
From Figma to shadcn/ui in seconds
The Figma to shadcn/ui plugin is a powerful tool that uses AI to automatically convert Figma designs into production-ready shadcn/ui code.