+

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.

Loved by 350+ creators and teams
GregYannPaulaAgaMatt WierzbickiEugeneGabi
  • Built with variables and customizable
  • Ready for multi-brand design systems
  • Figma plugin to export themes
  • Regular updates
  • Support from UI kit creator
  • Pro blocks (coming soon)
  • Video course (coming soon)
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 a dedicated Figma plugin to export themes and great customer support.
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.

Based on shadcn/ui version
2.1
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.

70k+ 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.

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

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.

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!

Figma plugin to manage themes
We are working on a dedicated Figma plugin for this UI kit to help you manage, import and export shadcn/ui themes.
Beta available!
Pro blocks for Figma
We’ll be incorporating our own custom designs as well as integrating all future components released on the official shadcn/ui website.
Coming soon
Video course
We will release a shadcn/ui dedicated Figma course to level up your Figma skills and onboarding process even more.
Planned
Pricing

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.

Basic
119 USD
What's inside:
  • License for 1 user
    License for one user. Perfect for solo creators and freelancers.
  • shadcn/ui kit for Figma
    Get access to all components, icons, variables and assets.
  • Default and New York style
    Just like shadcn/ui components, the shadcn/ui kit for Figma comes in two styles: Default and New York. Upon purchase, you'll gain access to both style options, allowing you to choose whichever best suits your project needs.
  • 1 year of free updates
    Whenever 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 projects
    Use this UI kit across multiple personal and commercial projects, for multiple clients without limitations.
Get Basic Package
One-time payment · Plus local taxes
Pro
399349 USD
What's inside:
  • License for 1 user
    License for one user. Perfect for solo creators and freelancers.
  • shadcn/ui kit for Figma
    Get access to all components, icons, variables and assets.
  • Default and New York style
    Just like shadcn/ui components, the shadcn/ui kit for Figma comes in two styles: Default and New York. Upon purchase, you'll gain access to both style options, allowing you to choose whichever best suits your project needs.
  • Lifetime free updates
    Lifetime 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 projects
    Use this UI kit across multiple personal and commercial projects, for multiple clients without limitations.
  • shadcn/ui Theme Pal
    Lifetime 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.
    Get Pro Package
    One-time payment · Plus local taxes
    Basic
    359 USD
    What's inside:
    • License for 25 users
      License for teams with up to 25 users.
    • shadcn/ui kit for Figma
      Get access to all components, icons, variables and assets.
    • Default and New York style
      Just like shadcn/ui components, the shadcn/ui kit for Figma comes in two styles: Default and New York. Upon purchase, you'll gain access to both style options, allowing you to choose whichever best suits your project needs.
    • 1 year of free updates
      Whenever 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 projects
      Use this UI kit across multiple personal and commercial projects, for multiple clients without limitations.
    Get Basic Package
    One-time payment · Plus local taxes
    Pro
    1199999 USD
    What's inside:
    • License for 25 users
      License for teams with up to 25 users.
    • shadcn/ui kit for Figma
      Get access to all components, icons, variables and assets.
    • Default and New York style
      Just like shadcn/ui components, the shadcn/ui kit for Figma comes in two styles: Default and New York. Upon purchase, you'll gain access to both style options, allowing you to choose whichever best suits your project needs.
    • Lifetime free updates
      Lifetime 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 projects
      Use this UI kit across multiple personal and commercial projects, for multiple clients without limitations.
    • shadcn/ui Theme Pal
      Lifetime 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.
    Get Pro Package
    One-time payment · Plus local taxes
    The price of the Pro Package is going up when we'll release Pro Blocks!
    Secure 256-bit SSL Encrypted payments by Lemon Squeezy.
    The standard local tax rate may be charged, following the law of your country.

    Frequently asked questions

    General

    What is shadcn/ui?

    The shadcn/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.

    What is shadcn/ui kit for Figma?

    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.

    I'm not familiar with shadcn/ui. Can I still use this kit?

    Absolutely! Our kit is intuitive and comes with documentation to help you get started, regardless of your familiarity with Figma or shadcn/ui.

    Can I create multi-brand design systems with this UI kit?

    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.

    How will this kit save me time?

    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.

    How does this improve my collaboration with developers?

    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.

    How do the updates work?

    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.

    Why not just use free ui kits?

    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.

    Why to choose our UI kit over other kits?

    • Quick updates - whenever there is a new component or improvement to the official shadcn/ui library we release the update within a few days.
    • Two styles - our UI kit just like official shadcn/ui components comes with Default and New York style.
    • Customer support - we usually reply within 24 hours if you have questions or need support with the UI kit.
    • Additional resources - the UI kit comes with Theme Pal plugin and Pro Blocks to supply you with great shadcn/ui resources to speed up your workflow.
    • Dedication - shadcn/ui kit for Figma is not just another side project made over the weekend to get some likes on the Figma Community. We are constantly improving it with new features and components just like we do with Ant Design System for Figma - you can expect updates without worrying that we'll abandon the project.
    Can I use the UI kit on a free Figma account?

    Yes. You don't need Figma's paid plan to use the UI kit.

    What is the difference between the New York and Default style?

    A style comes with its own set of components, animations, icons and more. The Default style has larger inputs, uses lucide-react for icons and tailwindcss-animate for animations. The New York style ships with smaller buttons and inputs. It uses the radix icons set and it also uses shadows on cards and buttons. You can learn more about differences between these two styles in our article.

    Licensing

    Do I need a team license?

    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.

    Can I use it for client projects?

    Yes! You can use the product for an unlimited amount of client and personal projects.

    Do I need to purchase a license for each project I work on?

    No. You can use the product for unlimited personal and commercial projects.

    Can I upgrade from Basic to Pro?

    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.

    Can I upgrade my Personal license to the Team license?

    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.

    I need a license for more than 25 people. Can I contact you about the Enterprise license?

    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.

    Can I sell templates or themes built with a purchased product?

    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

    Is it a one-time payment?

    Yes, you pay once! It's NOT a subscription.

    Do you provide invoices?

    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.

    I'd like to make a purchase of the UI Kit but our company requires an intent to our accounting department. Can you please give the company 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

    Do you offer student discounts?

    Yes! We do offer educational discounts. To qualify, please email us at hi@shadcndesign.com with either your school email address or an image of your student ID. This helps us verify your student status. Once we've confirmed your eligibility, we'll send you a link with the educational discount.

    Support

    How does support work?

    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.

    How can I find my receipt email?

    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.

    How do I access updates after purchasing?

    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.
    How do I access the files after purchasing?

    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.

    Why did my payment didn’t go through?

    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.

    What's your refund policy?

    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.

    How do I contact you?

    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.

    Wall of love

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