shadcn/ui for Figma

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.

The shadcn/ui kit 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 7-14 days when there's a new Figma feature or shadcn/ui component.

In our framework, updates primarily come in the form of new components that we add to the kit. While the latest version includes minor bug fixes and improvements, you can continue using your current version without any disruption to your existing workflow.

It's important to note that Figma operates on a file-based system rather than functioning like a code repository. This means that updates cannot be automatically installed like software packages.

Given this limitation, we recommend simply copying over any new components you need from the updated version into your existing project. This approach allows you to selectively incorporate the improvements that are most relevant to your work.

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

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

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

Yes. The shadcn/ui Figma kit is fully compatible with the Vue or Svelte implementation of shadcn/ui. Since the Vue/Svelte version of shadcn/ui mirrors the React implementation, and our Figma kit is built to match these components, you can confidently use it to create designs that your development team can implement using either framework.

The workflow remains straightforward - simply follow our standard documentation guidelines when working with the UI kit, regardless of whether your project uses React, Vue or Svelte.

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.

If you still not sure what license to purchase, use our help page.

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 higher tier package (Pro or Premium) at any time. Please fill in the form via our help page.

Please note: When upgrading, you can switch from Personal to Team licenses, but not from Team to Personal. You also can't upgrade from Basic, Pro or Premium to Developer package.

Sure! We will reduce your next order's price by the amount you paid for the Personal license. Please use our help page to request an upgrade.

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.

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

If you still need more details or documents, please contact Lemon Squeezy: hello@lemonsqueezy.com

Yes! We do offer educational discounts. To qualify, please fill in the form via our help page 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.

Yes. For example, if you are a manager purchasing the UI kit for your team, you can change the email associated with the purchase later on to ensure that a team member receives notifications about updates. You can do this after setting up an account with Lemon Squeezy, our payment and file delivery system.

If you have problems with your payment, checkout or account, please reach out to Lemon Squeezy: hello@lemonsqueezy.com

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

If you're having trouble with shadcn/ui kit for Figma or our Figma plugin, we're here to help.

‍

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, please contact Lemon Squeezy: hello@lemonsqueezy.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 our payment provider - Lemon Squeezy: hello@lemonsqueezy.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.

The best way to contact us is to use our help page.‍

If you want to receive emails from us about new updates, products, or freebies, subscribe to Matt's newsletter