Premium shadcn/ui kit for Figma to speed up your workflow
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 export theme settings from Figma to code.
- 2000+ shadcn/ui components
- 1400+ SVG Icons
- 900+ useful design assets
- 79 shadcn/ui charts
- Shadcn/ui blocks
- Light and dark modes
- Built with variables and customizable
- Ready for multi-brand design systems
- Figma plugin to export themes
- Regular updates
- Support from UI kit creator
- Video course (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 3-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.
From Figma to shadcn/ui in seconds
ShadcnUI Theme Pal generates CSS variables based on your Figma variables for your shadcn/ui projects. This plugin works exclusively with this Figma UI kit and is tailored for projects using shadcn/ui.
- Convert Figma theme variables to CSS: Save your time and use the plugin to copy theme settings from Figma to code in seconds.
- Compatible with shadcn/ui theming system: The plugin generates the code that you can paste into your globals.css shadcn/ui project.
- Light and dark mode supported: The plugin generates code for dark and light mode for each theme.
- Include custom color variables: Whenever you add your variables in the theme collection, they will be added to the generated CSS.
- Copy generated CSS with one click: No more manual translating Figma variables - you can copy the theme settings with one click.
- Adapts to Figma's variable modes: The plugin generates code for each theme mode you have in Figma.
Roadmap: More features coming soon!
We're not just resting on our laurels - we're constantly innovating to improve your design experience! Here's a sneak peek at what we're cooking up in our design lab. Get ready for some game-changing additions that will take your shadcn/ui workflow to the next level!
Get access today and level-up your workflow
Get shadcn/ui kit for Figma with a single payment and improve your workflow. After the purchase you will be able to generate an invoice with all company and address details.
- License for 1 userLicense for one user. Perfect for solo creators and freelancers.
- shadcn/ui kit for FigmaGet access to all components, icons, variables and assets.
- 1 year of free updatesWhenever there is a new version of the UI kit, we'll email you the new files. After one year you will need to repurchase the package to receive the updates.
- Unlimited projectsUse this UI kit across multiple personal and commercial projects, for multiple clients without limitations.
- License for 1 userLicense for one user. Perfect for solo creators and freelancers.
- shadcn/ui kit for FigmaGet access to all components, icons, variables and assets.
- Lifetime free updatesLifetime access to free updates. Whenever there is a new version of any product or a new resource, we'll email you the new files and access to the new stuff.
- Unlimited projectsUse this UI kit across multiple personal and commercial projects, for multiple clients without limitations.
- shadcn/ui Theme PalLifetime access to our dedicated Figma plugin for this UI kit to help you manage, import and export shadcn/ui themes.
- Pro Blocks (coming soon)We are going to release a great deal of our blocks built with shadcn/ui components for Figma.
- Video course (coming soon)A shadcn/ui dedicated Figma course to level up your Figma skills and onboarding process even more.
- License for 25 usersLicense for teams with up to 25 users.
- shadcn/ui kit for FigmaGet access to all components, icons, variables and assets.
- 1 year of free updatesWhenever there is a new version of the UI kit, we'll email you the new files. After one year you will need to repurchase the package to receive the updates.
- Unlimited projectsUse this UI kit across multiple personal and commercial projects, for multiple clients without limitations.
- License for 25 usersLicense for teams with up to 25 users.
- shadcn/ui kit for FigmaGet access to all components, icons, variables and assets.
- Lifetime free updatesLifetime access to free updates. Whenever there is a new version of any product or a new resource, we'll email you the new files and access to the new stuff.
- Unlimited projectsUse this UI kit across multiple personal and commercial projects, for multiple clients without limitations.
- shadcn/ui Theme PalLifetime access to our dedicated Figma plugin for this UI kit to help you manage, import and export shadcn/ui themes.
- Pro Blocks (coming soon)We are going to release a great deal of our blocks built with shadcn/ui components for Figma.
- Video course (coming soon)A shadcn/ui dedicated Figma course to level up your Figma skills and onboarding process even more.
The standard local tax rate may be charged, following the law of your country.
Frequently asked questions
General
Shaadcn/ui is a popular, open-source UI component library for React that focuses on flexibility and customization. It provides a set of accessible, customizable components that you can use to build modern web applications.
Shadcn/ui for Figma is our comprehensive design kit that brings the shadcn/ui components into the Figma environment. It allows designers to create interfaces using shadcn/ui components directly in Figma, ensuring consistency between design and development.
Absolutely! Our kit is intuitive and comes with documentation to help you get started, regardless of your familiarity with Figma or shadcn/ui.
Yes! Our kit is designed with multi-brand support in mind. You can easily create and manage multiple styles for different brands within a single design system using Figma variables.
By providing pre-built, customizable components and templates, you can skip the repetitive setup work and focus on the unique aspects of your design. Our comprehensive asset library and pre-built screens also help speed up your workflow. What is more you can also save time on development and use shadcn/ui React library to code your designed interfaces.
Our components are built to closely match the shadcn/ui library, significantly reducing misinterpretations and implementation errors. This leads to smoother handoffs and fewer back-and-forths between design and development teams.
After each update, we will send you an email with the new updated Figma files. Make sure to move all our messages to your Main Inbox, so you don't skip them.
We provide updates to align with the latest shadcn/ui releases and incorporate user feedback. We also aim to provide updates within 3-7 days when there's a new Figma feature or shadcn/ui component.
Every shadcn/ui kit on Figma Community I found was of poor quality, missing components or was outdated. This is why I created my own and you can use it too if you want. If you don’t, feel free to use free ones but you might loose some hair.
Licensing
A Personal license for Figma is sufficient for solo creators, freelancers, or individual designers who are the only ones needing edit permissions on a team.
If you plan to share Figma files with team members or publish a UI kit to your team's Figma library, you'll need to acquire a Team license.
Yes! You can use the product for an unlimited amount of client and personal projects.
No. You can use the product for unlimited personal and commercial projects.
Yes, you can upgrade from Basic to Pro at any time. We will lower the price of the Pro license for you by the amount you paid for the Basic license. Contact us and let us know your email address you’ve used to make a purchase.
Sure! We will reduce your next order's price by the amount you paid for the Personal license. Please get in touch with us with your customer email.
Absolutely! Please reach out to us (hi@shadcndesign.com) for information about our Enterprise licenses. We'd be happy to discuss your specific needs and provide a tailored solution.
No, you're not allowed to sell or distribute the products on your website or marketplaces like ThemeForest, Creative Market, etc. (even for free), as well as resell, lease, license, sublicense or redistribute a purchased product on its own (even for free). You can learn more about licensing on our Licensing Page.
Payments & Billing
Yes, you pay once! It's NOT a subscription.
Yes, we provide invoices for all purchases. We sell via our merchant of record Lemon Squeezy and after the purchase you will be able to generate an invoice with all your company and address details.
We are selling our products via our Merchant of Record - Lemon Squeezy. Their company details will be stated on your invoice after the purchase. Below you can find the Lemon Squeezy details for your accounting:
Name: Lemon Squeezy, LLC
Address: 222 South Main Street Suite 500, Salt Lake City, UT 84101, USA
EU VAT number: EU440000220
Yes! Please contact us (hi@shadcndesign.com) with your school's email address or student ID, and we will send you a link with the discount.
Support
If you're having trouble with shadcn/ui kit for Figma, we're here to help via email: hi@shadcndesign.com.
Please note we are not Figma support. If you have a Figma-related question, we recommend checking our Figma's Help Center as a start. Also, check out Figma tutorials for the Figma features, such as components, variants, Auto Layout 5.0, interactive components, and component properties.
After the purchase you will get a receipt directly to your email:
- Receipts are sent from hello@lemonsqueezy-mail.com with the subject Your shadcn/ui kit for Figma receipt.
- Try searching in your email inbox from:hello@lemonsqueezy-mail.com. If you cannot find the receipt email, it may have been sent to a different email address. Try to recall what email address you've used to make a purchase.
If you get super stuck, we're here to help via hi@shadcndesign.com.
After each update, we’ll send you an email with a short note on what has changed and how to access the file.
You will be able to access the new updated files via Lemon Squeezy:
- From your My Orders page if you made an account.
- By clicking Download button in your original purchase email. These are sent from hello@lemonsqueezy-mail.com with the subject Your shadcn/ui kit for Figma receipt.
After purchasing, you will be provided with the Figma file of shadcn/ui kit for Figma. You will have full edit access of these files to use in your Figma account.
If your payment fails, the following steps can help get your purchase through:
- Try the purchase in a different browser, or update your browser and try again
- Try the purchase on a different device
- Turn off browser extensions and VPNs and try again
- Call your card provider or contact PayPal and ask them if there are blocks or limitations on your account
If you still have problems with getting your payment through contact us - hi@shadcndesign.com.
We offer a 14-day money-back guarantee. If you're not satisfied with your purchase for any reason, contact our support team within 14 days of your purchase for a full refund.
If you have questions, feedback or suggestions, don't hesitate and contact us via email at hi@shadcndesign.com.
If you want to receive emails from us about new updates, products, or freebies, subscribe to Matt's newsletter.