Blog

Hi community, we’ve reached the insanely nice milestone of having 10,000 people that duplicated our UI kit. We’re very happy with this milestone! We see that the kit has great momentum with over a thousand duplicates a week. If you are using the kit as the base of your own design system, we’d love to hear from you.

We’re pretty close to the 1.0 release with a likely release next week, on September 18th. You can find more info in the Road to 1.0 Github issue.

I just recorded a video about 0.5.0 with the biggest changes. Those are the theming layer and the inclusion of example screens. You can find the video that explains the changes below.

As always, any community feedback is welcome. The best place to post your feedback is on our GitHub issues page.

We’ve released the 0.5.0 version of our kit! This is one of our biggest releases so far.

Highlights of this new version include the inclusion of light and dark mode and subsequently theming variables. This will make it much easier for users of the kit to customize the theme to their liking.

We’ve improved consistency with shadcn/ui itself, and we’ve fixed some long-standing bugs.

Next to this, we added example screens to get started with your designs.

Check out the full changelog here.

We’ve been shifting the dates for the 1.0 release a few times but with this feature release, we are confident we can call the kit stable very soon. We’re aimign for a release date on September 18, 2025 now.

Check out the new version on Figma Community.

We released the 0.4.0 version of our shadcn/ui kit. You can duplicate the community file here.

In this release we added border radii and spacing variables. We’re inching closer to 10 000 duplicates. Amazing.

We also released 2 plugins to help retain consistency in the kit.

1. Obra Border Radius Variable Fixer
2. Obra Spacing Variable Fixer

These are released as general-purpose plugins, which can be used with any design file.

Check out the video for more details:

We created a plugin called Obra shadcn/ui tools that aims to provide tools that make it easier to work with the shadcn/ui kit.

As a first functionality for this plugin, we provided utilities to make it easier to work with the kit in combination with the Propstar plugin.

In the latest version of the Obra shadcn/ui kit we added Propstar based docs for all components.

This tooling helps you to rework components in an easier way when using the kit. With the “de-propstar” command you can remove propstart docs; and with the “post-propstar treatment” command you can automatically position your core component in the right position in the docs.

Watch the video to learn how it works:

Curious to try it out? You can view the plugin page here.

Just a small update. I added PropStar based documentation tables for all components, fixed a minor bug with the Resizable component, and released a new version.

Following the discussion to add the variables for spacing and border radius, we would like the community’s opinion on adding light and dark mode to the kit.

This change would implement the theming layer of shadcn/ui along with likely some extra variables for things that can’t be simulated in Figma (e.g. opacity of variables)

We are also looking for somebody who can contribute this change if it’s voted in.

Please contribute with your vote here.

Sponsor the shadcn/ui kit to make new features and maintenance work happen faster

Hi all, we’re aiming to release the 1.0 version of the shadcn UI kit on September 12, 2025.

In order to finalize this version, we would like to have the community input on whether we should include:

1. border radius and spacing variables (see discussion #51)
2. semantic/theming layer from shadcn (see shadcn theming docs ) - no thread around this yet
3. light/dark mode

When we first created this kit, we used a light approach where we didn’t include all the features so it would be easier to make this kit your own.

However, from the feedback we’ve noticed that in general, our audience prefers feature completeness over customizability.

Your input is super welcome on Github to shape the final 1.0 version.

Hi everyone, we would like to have some community feedback around adding variables for spacing and border radius in our shadcn/ui kit.

You can join the discussion and add your thoughts here. We’d like your opinion! Currently, 2 people have voted with a 50/50 split between not adding it or adding it.

Your opinion matters for the evolution of the kit, as the outcome of this question directly leads to possible work on expanding the semantic layer.

We listened to the community and bundled all Tailwind colors and all Lucide icons inside of the kit. The add-on files are thus deprecated. This makes the kit heavier on initial publish, but provides more options to design with by default.

Watch the video:

In order for this project to continue as an open source project, we are in need of sponsors.

Light sponsorship ($25, $50…) will help with the continuation of this project.

Heavy sponsorship ($1000) can lead to benefits such as:

• private team consultation about the usage of the kit
• early access to new versions
• access to custom components that are built within the same kit

Currently, we are setting up our Github profile to be ready for sponsorship. The ideas are around this are early.

Update: the Github sponsor profile is live here.

If you are interested to talk, shoot me an e-mail: [email protected] .

After some consideration, I am thinking to retire the add-ons and add all the Tailwind colors as well as the full kit of Lucide Icons straight in the kit file.

I initially thought I would make the kit as lean as possible, but I find myself always adding the colors and the icons for most projects, and it’s a bit of an annoying process. I know exactly how to do it as the kit creator, but I can imagine for others it might be a dealbreaker.

This decision would make the kit heavier on initial publish — the icon components lead to a slow initial publish time — but also easier to start designing with.

Any thoughts from the community? Please give your opinion here.

I’m happy to report that we’ve heard from several teams, to be exact, that they started using our kit as a base for their system.

We heard Belgian-based Payflip and Brazil-based Omnismart made the choice to use our kit. Very cool!

Here is some nice words from Emmanuel Tomiyoshi, product designer at OmniSmart:

I gotta tell, you saved me time, money and headache. That file is just right what my team have been looking for. Too much advanced. The right techniques. As someone who’s been deep diving on Design Systems and helping software companies to scale their products with multi-whitelabel-themed systems, this is a rare gem.

We’re actually starting today with your file as our system foundation. I’ve tested FramesX, AlignUI, Untitled UI, you name it. And even shadcn Figma file (I didn’t buy it, but I saw the preview and it didn’t look too much right). After analysing, yours filled the gaps they didn’t.

Our kit has close to 2000 duplicates on Figma community. We’ve started working on an internal project where we are putting it through its paces and fixing some small issues as we encounter them.

Awesome!

We’ve added 2 new videos the videos section. One is about starting a design with the kit; another is about adding components to an existing design and customizing it.

We are motivated by community requests and having a real conversation about our kit. So if you have any video requests, don’t hesitate to tweet to @wolfr_2 or log your request as a Github issue!

We’ve reached over a thousand duplicates for our shadcn/ui kit 🎉!

In fact, I planned to write this blog post and as of the time of writing the counter is already at 1300 users. Wow!

Despite this number, we haven’t received that much feedback yet. From my experience with Figma plugins and files, sometimes this number goes up quite quickly, without people actually using the file, just checking it out. It is almost like a “visited” number and not really like a usage number.

• If you build something with our kit, we would love to see it! Show it off in a new issue at GitHub Issues or tweet to @obra_studio_2.
• If you have any comment or suggestion, it’s more than welcome at our GitHub Issues.

Currently, we are planning to add some videos to YouTube to make it more clear how the kit can be used. Check out the existing videos here. These videos will also serve as Figma tutorials. If you have any specific video requests, something that you wanted to know about Figma and never dared to ask, also feel free to put this in the GitHub issue.

There’s been some talk on Github issues and in our private Slack about doing effective collaboration.

The first phase of building the shadcn/UI kit (roughly the first 50 hours of the project) I did the work myself.

Then I involved pixel perfectionist Marina to improve it, just inviting her as an editor on our Obra account.

Gradually we also got feedback from different people - thank you Robert, Jovi, Gavin and Jorre.

Jorre specifically copied the kit, added some missing calendar-related features, and then linked to a public file with his improvements. This posed me with a problem: how to get his improvements into the original file?

We idenfitied some different solutions:

1. Use the Figma swap libraries function - which I’ve been playing with today
2. Invite everyone who wants to contribute to the the project as a classic Figma Editor and pay for their seat, then work non-destructively
3. Use a custom script (see this comment)

There were some side ideas as well:

1. See if we can leverage the Figma master plugin
2. Use Figma branching (but that’s reserved for more expensive Figma tiers).

If anybody from the open source community has some ideas, please chime in on the Github issue!

We’re happy to officially be in the shadcn/ui docs. Thanks for the PR merge, shadcn!

Welcome to the Obra shadcn/ui blog! We will be posting updates to the kit here.