https://shadcn.obra.studio/rss.xml

A maintenance release on the heels of 1.10.0, which we announced yesterday.

The main focus is the Sidebar component: we overhauled its variables so it correctly uses sidebar-specific tokens instead of leaning on the general foreground variables. We also reworked the company switch and user area examples to use “2 lines alt” Select and a Dropdown Menu with Avatar — closer to canonical shadcn/ui sidebar behavior.

Tooltip also gets some love: we added variants for Type: Formatted and Type: Shortcut, so you can document both richer tooltips and keyboard shortcut hints out of the box.

Smaller fixes landed in Alert, Select & Combobox, Dropdown Menu, and Tabs, plus a new Extra Large Icon Button (OC, short for Obra Custom). See the changelog for the full list.

We just released 1.10.0. Two big things land in this version: the Pro Blocks are now available as React components, and the Nova style is available today as a pre-release for anyone who needs it. As always, you can see the detailed changes in our changelog.

We’re excited to announce that the Pro Blocks are finally available as React components via the shadcn/ui registry.

Up to now, the Pro Blocks lived only in Figma — designed as ready-to-use sections of the kit. With this release we ship React versions of all marketing blocks and a big chunk of the most important application blocks, installable straight into your project.

When we released our CSS Export plugin, that was the first step in making our design kit work together with development. With the release of the React Pro Blocks, we are taking the second step.

The workflow we envisioned looks like this:

1. A designer customizes the kit in Figma.
2. A developer exports the base CSS using our CSS Export plugin.
3. The team uses the React Pro Blocks as a base for custom implementation work.

That vision is coming together now. The Pro Blocks give developers a head start on real screens — marketing pages, app shells, dashboards — instead of starting from a blank slate.

You can see the full list of blocks currently published to the registry — heroes, navs, footers, FAQs, pricing sections, dashboards, tables, auth screens, and more — at registry.shadcn.obra.studio. That page is the source of truth for what you can install today.

We’ve written a tutorial walking through how to bring the Pro Blocks into your project, how they sit on top of shadcn/ui, and how they pair with the CSS Export plugin. Read the developer tutorial →

Next to this, we’ve been working on the design side to support the Nova style for shadcn/ui.

There are a lot of subtle differences between Nova and Vega — different button and input sizes, different border radii at different scales, different shadow usage, and a fair share of component-level spacing adjustments. Each of these has to be modelled accurately, and Figma doesn’t make it trivial to fork a style cleanly across an entire kit. It took us a while to find a maintainable way to support Nova without forking the file twice — and that same approach is what lets us add more styles (Luma, Sera, and others) down the line.

We initially set a deadline for ourselves on the roadmap in August, but it looks like things are coming together much faster than we thought. We’ve been spurred on by a customization client project that requested the Nova styles.

Not everything is finished, but we’re excited to offer a pre-release version of the Nova file to anyone who needs it today.

Simply contact us with your license key, and we’ll generate a download link for you.

If you run into anything rough in the pre-release file, we’d love to hear about it — that feedback is what shapes the final release.

The May launch discount is the final one — from June, full pricing kicks in. Use LAUNCHMAY at checkout.

Get your Pro license at 25% off →

We just released another minor update to our shadcn/ui kit: 1.9.4. As always, you can see detailed changes in our changelog.

In 1.9.3 and 1.9.4 we continued to move customizations on the component level into the OC (Obra Custom) layer.

Examples include the Extra Large marketing button becoming an OC component in 1.9.3 and moving the rounded versions of inputs to the OC layer in 1.9.4.

For clarity, the 3 layers in the kit are:

1. Official shadcn/ui components
2. OC (Obra Custom) components: additional components we use in the Pro Blocks
3. Custom components: an empty layer for your own customizations

In this blog post, we expand on why we’re making this move.

Our Figma shadcn/ui kit gets used for very different design needs. Roughly:

1. Hi-fi wireframers — people who use the kit as-is to put together polished screens fast.
2. Design system designers — people who use the kit as the starting point for their own system.
3. Technical designers and developers — people on the receiving end, turning the result into code.

The “right” way to set up the kit is in the eye of the beholder. When designing the kit, we always have to balance these needs against each other.

For the first type of user, choice is great. They generally won’t make sweeping changes to the kit itself — they’ll use the components as they are. So they evaluate the kit on two things:

1. Completeness — does it have all the shadcn components?
2. Workflow — can I work with it smoothly?

I once got a huge compliment from a design leader at a FAANG-type company. He said he had evaluated all the kits and ours was the closest to how he actually worked, in the way components were set up.

For the second type of designer — the design system designer — being able to remove things is just as important as having things to start with.

Shadcn/ui is built around a small set of variables, and those variables can be the start of your system. It deliberately makes few design choices for you.

We’ve spent specific time making it clear how to strip the kit back. A few examples:

• The color palette can easily be reduced to only the colors that are actually used.
• The icon set has markings for which icons are in use and which aren’t, so it’s easy to swap out the ~30 icons that are wired in by default.
• The set of typographic styles is intentionally small: headings 1–4, paragraph styles in four sizes, and (recently) a few monospace styles. It’s easy to grasp and easy to start customizing.

In contrast, we’ve seen competing kits that throw 100+ type styles on your plate. We don’t love that approach.

For the design system designer, the question is “can I actually fit my design vision into this kit?” A lot of our deliberate choices come from looking through that lens.

We’ve also gone as far as building a custom component documentation plugin to have full control over how component documentation looks. That plugin has plenty of workflow tricks — you can use it to migrate away from Propstar, document different variable modes, and make complex component selections easily.

The third group is the people who turn the kit’s output into code — and ultimately, this matters for everyone handing work off to development.

In 1.8.0 we removed every unofficial variable that had snuck into the kit, in favour of aligning 100% with shadcn/ui from a development standpoint.

Moving unofficial additions to shadcn/ui to the OC layer makes it clear what is official and what is not. We are now preparing for releasing the React version of our Pro Blocks. The more unofficial parts we have, the less easy it is to integrate with shadcn/ui. At the same time, those unofficial parts often were made for a reason: we felt we could make an improvement on what shadcn/ui provides. We’re thinking deeply about how we can provide our opinion layer without breaking workflows. One way we do it is filing issues on shadcn/ui when we don’t agree with a design choice.

Last month, on April 11, we published our CSS Export plugin. It took a few weeks to review, but it’s on the Figma Community now. It lets a designer make changes to the kit and a developer sync those changes back into their system. We support several output formats — from a standard Tailwind setup to token-based formats like Design Tokens 1.0.

Coming back to the spark for this post.

At the component level, we used to lean towards choice — providing extra sizes and variants on top of the default shadcn ones, baked into the components themselves.

I’ll repeat the primary examples:

• An extra large version of the button
• Rounded variants of the input
• A required marker on the label

Now, we realized these extra choices that we provided would also create a downstream problem when developing with those components. If we have a rounded version of an input, and shadcn/ui doesn’t have it, a designer uses it, a developer might be puzzled where to find it.

The kit today is built around the Vega style. We’ve been thinking for a while how to support the new shadcn/ui styles (see: shadcn/ui create) in our kit. We currently ship the Vega style, and offer customization services where we customize our own kit to customer’s brands.

We would love to find a maintainable way to support all styles, but so far, haven’t found a realistic way to do so.

The move we’re making now, where we are keeping the base components clean of our own additions, is what eventually lets us support Nova and other styles.

This helps both types of designers:

• The wireframer can still use the extra sizes and variants — they’re right there in the OC components.
• The design system designer can delete the entire OC layer cleanly and start from a kit that’s purely shadcn.

This move, while small, lays the philosophical groundwork for where customizations live, and how we will eventually support all styles.

One thing we want to know is who is running into this problem. Do people actually use the shadcn/ui styles like Sera and Luma? Since Nova has been the docs default since late 2025, we are pretty sure Nova has a high usage. If you have any details about this, or your team is struggling with Nova vs Vega issues, we’d love to know.

The May launch discount is the final one — from June, full pricing kicks in. Use LAUNCHMAY at checkout.

Get your Pro license at 25% off →

We put up a design-to-dev guide alongside the 1.9.3 release post — but that post was lengthy and the guide probably got lost in the shuffle. So a quick standalone pointer:

Read the guide on the CSS Export plugin docs page →

It walks through setting up your shadcn project with our preset, running the CSS Export plugin against your Figma file, and outputting type styles.

Update: we’ve expanded the docs with a full explanation of what the CSS Export plugin is, an overview of all its features (including design tokens and Style Dictionary export, plus the Google Fonts loader), and the step-by-step developer tutorial for using it on a real project. Designers setting up multi-brand exports — see the new designer tutorial.

Right now is the ideal time to buy the Obra shadcn/ui Pro kit — it will never be cheaper than today, and you get access to all future updates. React Pro Blocks ship May 11, the video academy lands in June, and support for more shadcn styles (starting with Nova) arrives in August.

Last chance: 50% off ends April 30. The April launch discount drops to 25% in May and full pricing kicks in from June. Use LAUNCHAPRIL at checkout.

Get your Pro license at 50% off →

We’ve been waiting to publish this post for a while. We released our CSS export on April 11, we submitted the plugin for review on April 6, and we’ve been waiting ever since for Figma to approve it.

We’re happy to report Figma finally approved our plugin — the CSS Export for Obra Shadcn/ui is now live on the Figma Community.

The plugin works with versions of our kit from 1.8.0 to the latest 1.9.3.

What it does:

• Live preview inside Figma. As you change the kit’s variables, you see your shadcn theme update inline, right inside the plugin
• Multiple export formats. shadcn/ui + Tailwind v4, Vanilla CSS custom properties, Design Tokens 1.0 (DTCG), and Style Dictionary.
• Pick your color space. Output as OKLCH, HEX, HSL, or RGB.
• Google Fonts loader code. Generate either a Next.js snippet or a vanilla HTML <head> snippet for the fonts you’ve picked.
• Optional type styles. Emit text styles as plain CSS classes or Tailwind utilities to start your project’s typography, based on what your designer customized.

In conjunction with this release, we’ve also released an alpha version of our Obra shadcn/ui Create plugin to our customers. This plugin is available for all licenses via the downloads center.

This is also the plugin we are using in the demo above. We’ve submitted an early version to Figma community, but as we learned, reviews can currently take a while.

1.9.3 leans harder into a three-tier component model. The changes are subtle, but important for the future of the kit.

Several of this release’s moves shift things to the OC layer — rounded inputs, rounded buttons, extra large buttons, the required-asterisk on Label. Nothing about how those components look has changed; they’ve just been relocated to the tier they belong in.

Here’s how the three tiers work:

• Regular components stay strictly in line with shadcn/ui — Button, Input, Card, Dialog, and so on. No extras, no opinions on top. If shadcn/ui changes a default, we change ours. These are the components you should reach for first, because they’re what a developer gets out of the box from shadcn add.
• (OC) — Obra Custom is our more opinionated layer. These components ship in addition to shadcn/ui — Backdrop, Decorative Icon, Inline Message, Star Rating, and now Extra Large Button, Rounded Input/Button/Icon Button, and the asterisked Label. Marking them with (OC) signals to developers: this isn’t in shadcn, you’ll need to add it yourself or skip it. For designers, the marker is just as useful: if you don’t want our opinions or our Pro Blocks but do want the quality kit, you can delete every OC component and start clean.
• (C) — Custom is a spot for your own stuff. When you customize the kit for your project, anything you build that doesn’t belong in the official set or our OC set should be marked (C). That keeps the boundary clear — it’s obvious what you maintain versus what you can pull from upstream when we ship an update.

A reasoning to make this move is that we’re preparing to add the Nova style to the kit.

To support multiple shadcn/ui styles cleanly, the official components have to stay free of our own additions — anything project-specific or opinionated lives in (OC) or (C) instead.

We’re planning Nova for August — though if we find a way to ship it earlier without breaking the other roadmap promises, we will. Shadcn has been adding a lot of styles to shadcn, and we’re really wondering how to keep a Figma file maintainable. We have ideas we want to put into action, but first, we are working on our roadmap.

A round of component cleanup. We’re keeping support for specific styles inside the OC components so we can keep adding Nova and other styles consistently in future releases, while still shipping good-looking Pro Blocks with our own customizations.

font-family-sans is now font-family. We removed the unused font-family-serif token to avoid confusion when exporting via the CSS plugin.

As always, the full list of changes is in the changelog.

The next big milestone — React implementations of the Pro Blocks, delivered via the shadcn registry — is still on track for May 11. See the 1.9.2 post for the details on how that’s going to work.

The April launch discount ends tomorrow. From May, it drops to 25%, and from June we move to full pricing. Use LAUNCHAPRIL at checkout.

Get your Pro license at 50% off →

Here’s a small update about the recent 1.9.1 and 1.9.2 releases, and our roadmap plans to release the Pro Blocks as React code.

In 1.9.0, we removed several Pro Blocks because we weren’t happy with them. In 1.9.2, we’re adding two new Application blocks (Kanban-01 and Agentic AI-01, including tablet and mobile versions) and cleaning up a lot of existing ones.

Some competitors lead with “500+ blocks!” or “1000+ blocks!” on their pricing page. In practice, a lot of those are near-duplicates or filler. We’d rather ship fewer blocks we’d actually use ourselves, and cut the ones we wouldn’t.

Expect this trend to continue. Every release should tighten the set.

You might notice releases are following up quickly. Right now, we’re going to be focussing on dev work, so the release cycle will slow down a bit until May 11. At that point, the major change will be the inclusion of React-based Pro Blocks.

1.9.2 adds the two new Application blocks and some cleanup across all three Pro Blocks categories.

1.9.1 was a same-week bugfix release — mostly an Alert style slip and re-attaching shadow-xs to Input and Outlined Button.

See the changelog for the full list of changes.

We want to be upfront about where the kit is headed over the next few weeks.

The next roadmap item is React-based implementations of Pro Blocks. A few details on how that’s going to work:

• First focus: Application and Marketing. E-commerce will follow after a design overhaul
• Delivered via the shadcn registry. We’re aiming to publish the blocks on the shadcn registry behind authentication, so license holders can pull them straight into their projects with the standard shadcn CLI. You’ll also get an example React codebase to reference.
• Vega everywhere. We use Vega in the Figma kit and will match that in the React blocks. We’re thinking about how we can bring Nova and other styles to our kit and are actively solliciting feedback around which styles teams use. Have a comment on this? Please reach out!

The April launch discount ends at the end of this month. From May, it drops to 25%, and from June we move to full pricing. Use LAUNCHAPRIL at checkout.

Get your Pro license at 50% off →

Important note: our Figma design to code plugin is still under plugin review by Figma. To address the plugin not being live, we are offering customers on every plan the option to download the source files and run it locally.

Figma themselves say they have an influx of vibe-coded plugins, with 35% more submissions than the same period last year. We realize this is not ideal, and hope to have this resolved soon.

Over time some choices and custom aspects crept into our kit. In 1.8.0, we addressed syncing with shadcn/ui variables to provide a better design to dev workflow.

In this 1.9.0 release, we took a good look at the current shadcn/ui documentation, and made the kit current with it, while also making components more usable.

This release focuses on three aspects:

1. Component consistency with the official docs. We continued with the Vega style, which we find the best default within shadcn. But we’re also exploring how you can easily switch styles within Figma. If you have immediate needs around that, check out our customization services.
2. Component usability: with the release of Figma slots, some components like Item and Data Table had potential to be improved. This is a continued effort to make sure that components are easy to use. For example, for the Data Table, we removed boolean options for custom badges and icons in favor of using a simple “slot” variant that can house any content.
3. Reduce complexity: more is not always better. In this release, we have decided to simplify some things: the mini size is gone from all components. Some components that had a mix between a selected and active state have just the active state now. Our aim is to reduce the complexity to get started.

shadcn is constantly improving shadcn/ui. Just last week, another style called Sera landed. We’ve gotta be honest: it’s a challenge to keep up to date with the constant changes in shadcn/ui! This man might be the most productive person on the planet.

Currently, shadcn create supports 7 styles: Nova, Vega, Maia, Lyra, Mira, Luma and Sera.

We would love to support all styles consistently out of the box.

We’ve been critical about the create feature in the past, but we’ve now accepted that it’s here to stay, and it’s how people start their shadcn/ui projects.

We’re figuring out the best way to tackle styles. Competitors to our Figma kit have tackled this issue with complicated plugins or variable modes. We think a plugin-based approach won’t scale to how designers work, and will break design files in practice. Switching a style with 1 click looks good in a demo, but it doesn’t work in a real file.

When we release this feature, we want it to work with how designers work. We’re looking for customers or early adopters who want to give us feedback on their needs. If you’re interested, use the contact form to get in touch.

At the same time with ongoing design improvements to the kit, we are working on the next roadmap item: React-based pro blocks.

We’re planning to make the current crop of Pro Blocks available as React blocks, starting with the Marketing and Application blocks. This release is planned for May 11, 2026.

In related news: Obra Autodocs — our Figma plugin for component documentation — is now free and open source. You no longer need a license key to use it.

We use Autodocs extensively inside the kit itself: every component page is documented with it, so you can see all variants, props and variable modes at a glance. Now that the plugin is free, anyone opening the kit can regenerate or extend that documentation without a license.

Read the announcement on the Autodocs blog: Obra Autodocs is now free and open source.

We’re updating the pricing and product pages of the kit to reflect this change.

As always, you can check out the changelog to see detailed changes.

This is your last chance to grab the kit at 50% off. The April launch discount expires at the end of this month — from May onwards, the discount drops to 25%, and in June we move to full pricing.

The kit will only get more expensive from here: as we keep adding value, prices step up, but every existing license keeps lifetime access to all future updates. So use code LAUNCHAPRIL at checkout - and lock in today’s price!

Get your Pro license at 50% off →

Since the launch of Obra shadcn/ui Pro, we’ve had a few people ask what exactly the difference is between the free Community Edition and Pro. This post breaks it down clearly.

The Community Edition is free on Figma Community and remains available. It includes:

• 55 shadcn/ui components — almost every component in shadcn/ui, built with proper Figma variables and auto layout (almost, because we discovered a few missing components)
• 1,500+ built-in Lucide icons — included as Figma components with keywords so you can search for the right icon instantly. This is based on Lucide +-6 months ago; the Pro kit contains Lucide 1.0.
• Dark & light mode — full support through color variables, with multi-brand theming via Figma variable modes
• Design tokens — colors, typography, spacing, border radii, and shadows as Figma variables
• Icon Sets Add-on — a free companion file to swap in alternative icon sets

The Community Edition is a solid starting point. Best of all, it’s completely free and MIT-licensed. Teams can use it as a foundation to build their own design systems on top of.

What it doesn’t include: the Community Edition won’t receive major updates going forward. It’s a snapshot of where the kit was at version 1.6.0.

The main disadvantages: this version doesn’t contain the rework to bring our kit closer to development. Some components — like alert dialog — have an out of date look.

The Pro edition builds on top of everything in the Community Edition. Here’s what you get:

50+ ready-to-use blocks across three categories:

• 35+ responsive marketing blocks — hero sections, feature grids, pricing tables, testimonials, CTAs, footers, and more
• 15+ responsive e-commerce blocks — product cards, category grids, shopping carts, checkout flows
• 8+ application blocks — dashboards, datagrid type of screens, settings panels and authentication screens. Each block is designed for three sizes: desktop, tablet, and mobile.

Every block is built with shadcn/ui variables, so they automatically adapt to your theme.

Copy-paste them into your file, swap in your content, and you’re done.

10 custom components that aren’t officially part of shadcn/ui but are used as building blocks for the Pro Blocks. These fill common gaps — things like inline form messages, decorative icons, and other patterns that come up often in real product work.

Since 1.8.0, the Pro edition maps much, much closer to shadcn/ui’s own variable system — the same names, scales, and semantics your devs see in code.

All the “unofficial” variables that existed in earlier versions have been cleaned out.

On top of that, the Obra shadcn/ui Pro CSS Export plugin outputs a shadcn-compatible CSS file straight from your Figma variables, ready to paste into your dev project. Customize colors and typography in Figma, export, and ship — no translation layer.

Heads up: the plugin is currently still under review by Figma, so the community link may not be publicly accessible yet. In the meantime, any license holder can grab the plugin source from the download center (link in your purchase email) and run it locally.

Your Pro license includes access to all future updates at no extra cost. As we ship more value, your license becomes more valuable — but your price stays locked in at what you paid.

Here’s what we promised on our roadmap and already shipped:

• Shipped in April 2026: the design-to-code plugin. The Obra shadcn/ui Pro CSS Export plugin generates production-ready CSS straight from your Figma variables.

Here’s what’s coming:

• May 2026: React Blocks — coded React components for all Pro Blocks
• June 2026: Video academy — a course on using and customizing the kit

Teams on Organization or Enterprise plans also get:

• Personal support from the creator for your specific use case
• Pro Blocks on request — request custom blocks tailored to your team’s needs (2 for Org, 4 for Enterprise)
• Introductory session with your design team (Enterprise)

For a full feature-by-feature comparison table, head to our pricing page.

If you’re exploring shadcn/ui for the first time or need a solid base to build on, the Community Edition is a great starting point. It’s free and fully functional.

If you’re working on real projects and want to move faster, the Pro edition saves you significant time with ready-made blocks, better tooling, increased shadcn consistency, and ongoing updates.

At 50% off with the April launch discount (LAUNCHAPRIL), it’s the best deal you’ll get.

View pricing and buy →

1.8.2 is a small polish release. The headline UX change: you now only need to toggle one appearance mode to flip the whole file to dark. Previously dark mode was layered across multiple collections, so it took several toggles to get there.

See the changelog for the full list.

We’re experiencing a delay in getting our plugin reviewed and live.

The Obra shadcn/ui Pro CSS Export plugin is now downloadable in the download center alongside the Figma file.

The download center link is in your original purchase email — check there to get in.

• Access during the review period: while we wait for Figma to approve the community listing, every license tier can grab the plugin source from the download center and run it locally. No marketplace install needed.

• Access after the community listing goes live: once Figma approves the listing, the plugin itself will be free to run for anyone via the community. At that point access to the plugin source code is scoped to Organization and Enterprise tiers, matching how we handle source access for our other tooling.

We’re very sorry, but this is out of our hands. We’re doing what we can by making the plugin locally installable. Please check out this help document to install the plugin locally.

1.8.3 is a tightening-up release: a couple of new components and defaults realigned with shadcn/ui.

The latest version is always in the download center — link is in your purchase email.

• Timeline (OC) for activity feeds and vertical event lists.
• Menubar — the official shadcn component we’d been missing.

• Switch, Radio, Checkbox default label weight is now medium; checkbox group gets a “normal” option.
• Label loses the (OC) tag and gains Normal / Medium weights.
• Paragraph/Regular → Paragraph/Normal across every size.
• Border radii now follow shadcn’s CSS defaults. The CSS Export plugin can infer radii from a single spacing value.

• Backdrop (OC) is lighter with a background blur, matching shadcn docs dialogs.
• Menu gets a translucent style; Menu Item gets a Small size.

Full list in the changelog.

A small follow-up to 1.8.0 with one important fix.

We corrected the default variable colors for primary (now brand-neutrals/900 in light mode, brand-neutrals/200 in dark mode) and foreground (now tw-raw/black in light mode, tw-raw/white in dark mode). Thanks to Outzvoid on YouTube for the sharp eye.

This quick release also brings shadcn consistency updates for Avatar (new sub-components for status badges, badge icons, and count variants) and Alert Dialog (destructive styles, media element support, and two sizes).

See the changelog for the full list of tweaks.

The Obra shadcn/ui kit just got a major update. Here’s the main updates:

• CSS Export Plugin — The new Pro CSS Export plugin outputs shadcn/ui-compatible CSS directly from your Figma variables. Sync styles with your development project? One copy-paste away.
• Closer to shadcn/ui than ever — We deeply reworked the color collections in our kit to remove unofficial variables and match what shadcn/ui uses in code. This helps designers and devs work together more smoothly, since they’re now speaking the same language.
• Better slot usage in components — We improved Figma slots usage across 15+ components
• Improved colors and icons — Taupe, Mauve, Mist, and Olive are in — the new Tailwind colors added in February are now part of the kit. We also upgraded to Lucide 1.0, plus brand icons via Obra Icons — since Lucide removed brand icons. Now defaulting to a 2px stroke.

Existing customers can use the download center (see instructions in your purchase e-mail) to get the latest version.

The headline feature of 1.8.0 is our new CSS export plugin. It lets you export a CSS file straight from your Figma kit, ready to paste into a shadcn/ui project.

The plugin reads the standard variable collections shipped with the kit, so any customization you make in colors and typography comes through in the output.

It also detects fonts from Google Fonts and gives you the matching <link> tags to drop into your <head>.

Heads up: Our Obra shadcn/ui Pro CSS Export (Beta) plugin is currently under review by the Figma team. We will update this blog post with the community link when the review is done.

Organisation and Enterprise license holders can request the plugin source code via our contact form and customize it for their own needs.

To make the CSS export reliable, we did a deep pass on the kit’s variable system. All “unofficial” variables — extras we’d added over time that didn’t exist in shadcn/ui itself — are gone. What remains maps one-to-one to the variables shadcn/ui actually uses in code.

The practical benefit of this is less friction in design–dev handoff. Designers and developers are now looking at the same names, the same scales, and the same semantics. No more “what’s this custom thing?” conversations.

We’ve also updated the color docs to reflect the simpler system, with the legacy variable information tucked into collapsible sections so older kit users can still find it.

For the full changelog, see the changelog page.

The 50% off April launch discount is still active.

Every month, we’re adding more value to our kit. This month, we do it through our exact alignment with shadcn and the related design to code plugin.

Next month, we’re releasing React versions of our Pro Blocks. In June, we’re releasing a series of videos to learn how to work with the kit efficiently.

Use code LAUNCHAPRIL at checkout to lock in your discount now, and get access to future upgrades.

Get your Pro license at 50% off →

As we release new versions of the kit, one of the logical questions is: how can I upgrade?

The general advice in this blog post also applies to other design libraries, not just ours.

We want to be upfront about this: Figma files are not upgradeable. There’s no way to do it automatically.

We wish there were more possibilities around this — features from Figma that support centralized libraries — but there are not.

Whenever you choose to publish a library, you are creating a snapshot that is local to your account, containing your own customizations. For us as library authors, there is no way to know what you customized.

We went back and forth on this problem. We created a page about upgrading on this website. We tried to find ways to update automatically. These are dead ends.

We thought about creating a plugin that upgrades your file for you. Any automated upgrades like that present a lot of testing and development work, and then create a downstream problem in your design files — any upgrades might break existing files tied to the system.

We also haven’t received any inquiries about manual upgrades. As authors of the library, we could theoretically upgrade things manually in your library, by tracking the changelog and executing similar logic. But we also don’t want to solve a non-problem.

As a user of the kit, you could theoretically do this yourself, but it would be difficult to know the exact nuances. We also use a bunch of productivity plugins you’d have to be familiar with to reach the same quality level.

We think the most realistic upgrade path for most teams is examining:

1. How much has your design file drifted from the original? In other words, how many customizations did it receive?
2. How many downstream design files depend on the library? Are there 0 or 15 design files that are receiving updates from this library?
3. How many changes in the new version are relevant to your team? For example, Figma slots. Read the changelog to find out.

Depending on the answers above, the right path might be:

• Stay on your current version. Choose not to upgrade and keep going with the library as-is. There’s nothing wrong with this.
• Manually upgrade specific aspects. Cherry-pick certain changes that tie into new Figma features — for example, adding slots yourself.
• Start fresh with the new version. Decide to run with a new version of the library and re-customize it to your brand, essentially creating a “Library V2” and then working from there.

The new 1.8.0 version is coming out on Friday April 10th.

If you’re a customer on our Organization or Enterprise plan and have an upgrade question — even though it’s a difficult topic — we can help examine your situation. Get in touch!

Hi everyone, I am excited to announce that we have sold the kit over 50 times.

The loop that I was talking about on this blog about getting revenue from the kit and then putting it back into the quality of the kit is starting to happen, and I am super excited about that.

By the way, these are the last days of March - this is your chance to lock into the Obra shadcn/ui kit for the lowest price, with the 75% discount. Use code LAUNCHMARCH on checkout (the discount code field is at the very bottom). You’ll get the Pro edition of the kit, and any future upgrades. Check out our roadmap.

1.8.0 will be released on April 11. A snapshot of the current 1.8.0 file will be made available on March 31 upon request for early adopter customers. Contact us at shadcn@obra.studio.

This blog post is a preview of what’s coming.

New colors — and old colors. shadcn removed slate and gray from ”create” but we are keeping this in the kit. Many designers like to use slate.

Process shot of switching to Lucide at 2px instead of 1.5 - a better default, we think. Thanks for the feedback, Frank G.

We’ve enlisted the Obra team to start working on several aspects, including:

• Components/slots related: We already use slots for the majority of components that could use them, but want to go further. We are working on updates to several components, including Empty and Item components to make them use slots in the best way possible, and considering where we can use slots efficiently.
• Colors: Improving the Tailwind colors to use the 4.2 colors
• Icons: Lucide also released a 1.0 version of their icon set, which we are implementing with 2 pixel strokes as a default (specific feedback from a user of the kit)
• Bringing back the official shadcn/ui examples: Examples like Dashboard, Tasks, Playground, Authentication and what you see when you go to ”create“.

Current state of the design to dev plugin.

We are also working on improving design to dev workflows. We used to have a CSS export plugin that was promising but never got the attention it deserved.

With the kit going commercial and being a success so far, we can finally divert our time to this.

Diving into the CSS export makes it clear that some slight changes will have to be made on the variables front to align to shadcn/ui.

Some unofficial variables like destructive_foreground or destructive_text were created with the best of intentions but ultimately are in the way of teams starting out. Sticking to official shadcn variables makes our kit slightly uglier but helps design to dev workflows.

If you are using our kit in a design to dev situation, we would love to have a call about it and see if we can help with any specifics. This will help match our solution with real-world needs. Feel free to book a call.

With the product selling well, energy levels are high to put more dedicated work into it.

We have a great product on our hands and we’re excited to make this kit better.

We’d like to repeat our call for feedback from our last blog post. If you have anything - it can be the slightest detail - that bothers you about the kit, let us know. You can use the contact form here which also supports attachments.

Let’s go!

It’s been just over a week since we launched Obra shadcn/ui Pro. Thank you to everyone who purchased a license — we’re pumped and ready to make the kit even better.

With the launch behind us, we’re shifting our focus to improving the product. Our roadmap is packed — a design-to-code plugin, coded React blocks, and a video academy are all in the pipeline — but we also want to make sure we’re building the right things in the right order.

In order to know what we can do better, we’d love your feedback. That’s why we’ve added a contact form on the website. Whether it’s a component that could work better, a Pro Block you’d love to see, or something that’s just bugging you, we want to hear it.

We’re having a meeting next week to go over next steps for the kit, and we’ll consider all feedback we receive.

If you haven’t picked up a Pro license yet, the 75% off March launch discount is still active. Use code LAUNCHMARCH at checkout — this is the best deal you’ll get all year.

Get your Pro license at 75% off →

We’re excited to announce Obra shadcn/ui Pro — the highest quality shadcn/ui Figma kit out there, now taken to the next level.

After 8 months of building and maintaining the Community Edition (duplicated over 40,000 times on Figma Community), we’ve poured everything we’ve learned into a Pro edition designed to help working designers move faster. No other shadcn/ui kit comes close to this level of detail and craftsmanship.

The Pro edition builds on top of everything in the Community Edition and adds:

• Pro Blocks across marketing, e-commerce, and application UI — professionally designed, fully built with shadcn/ui variables, ready to copy-paste and customize. Stop building common layouts from scratch. Browse the Pro Blocks preview →
• Team-wide access to Obra Autodocs — our Figma plugin that generates beautiful and useful documentation for your components. Catch design system mistakes, view your components in all modes in 1 click and verify how your shadcn/ui customizations look.
• Lifetime access with all future updates included — the earlier you buy, the more value you get

For a full list of what’s new, check the changelog.

The Pro edition you see today is our starting point, not the finish line. We are confident it provides value, and is the highest quality shadcn/ui Figma kit. Over the coming months, we’ll continue to add significant value — a design-to-code plugin (April), coded React blocks (May), and a video academy (June) are all on our roadmap.

Our pricing model reflects this: as we add more value, prices will increase in steps. But every license purchased today locks in lifetime access to all future updates at no extra cost. The earlier you buy, the better the deal.

To celebrate the launch, we’re offering 75% off in March — meaning early adopters can get a license for as little as €50.

Use code LAUNCHMARCH at checkout. Discounts decrease over the following months (LAUNCHAPRIL for 50% off, LAUNCHMAY for 25% off), with full pricing in effect from June 2026.

Get your Pro license →

Choose the plan that matches your Figma plan. All licenses are one-time purchases. View full pricing details →

The Community Edition remains free and available on Figma Community. You can use it as a foundation to build your own design system on top of — it’s a fully functional kit with all the core shadcn/ui components.

Today we released a new update to the Obra Autodocs plugin. Autodocs can now document different variable modes.

Check out this video to understand how it works:

This is really useful for visualizing your components and checking if your variable set-up across modes looks good.

Find out more on our dedicated Obra Autodocs website.

P.S. In the upcoming commercial version every customer will receive a license to Obra Autodocs for free.

I’ve been preparing for the commercial release of the Obra shadcn/ui kit, and I wanted to share the thinking behind this decision.

My hope is straightforward: get some sales and funnel the money from those initial sales back into kit upgrades, creating a cycle of improvement.

Up until now, I’ve been funding improvements to the kit myself — either by paying freelancers or just spending my own time on it. Hundreds of hours and late nights have been spent on this project.

We launched customization services in December, and so far we’ve had a few great projects where we customized our own kit for clients. That part has been going well.

Recently, we added an estimate module to our website if you are curious to learn what it costs to get our shadcn/ui kit customized to your brand.

Now lately, a budget and people problem surfaced: the people who know how to improve the kit itself are not the same people who are good at taking a brand and applying the kit to it. These are two fundamentally different design tasks.

The customization projects make agency-type money — there’s a possible margin on the project if things go well. But we have to find the right designers who can execute the projects professionally; and obviously pay them for their work. Any time spent on improving the kit itself within the customization projects eats into that margin.

We realized we can’t afford to do both: provide a free kit and keep improving it based on what we learn from client projects.

There’s also a technical dimension. In Figma, it’s not that easy to provide “global updates.” Some changes require a ton of manual work — or writing custom plugins — depending on what you need to change.

We’re 2 people in the team with these skills but once again, things either get time-intensive for me or expensive for the project fast (when relying on a freelancer).

The switch to a commercial model is really a bet on the future of the kit. Without it, the kit probably doesn’t have much of a future, since it doesn’t make sense to keep funneling money into it indefinitely.

The math of a paid model is encouraging. If just one enterprise client or two org-level clients buy the kit, that already gives me enough budget to hire a freelancer for around 15 hours to fix bugs and ship improvements.

If we have enough sales overall, with muyltiple monthly purchases of the kit, my hope is to eventually run a part of Obra Studio, the agency behind this kit, as a product team.

We understand a paid product comes with new expectations and are ready to tackle those. When we look at the quality of competing kits, we feel confident we are 100% there to charge for what we provide.

Here’ s the cycle I want to create: sales funds kit improvements, improvements drive more value, and more value drives more sales. This is the way.

We’ve just released 1.6.0 of the kit, which documents the components in the kit using our newly released documentation plugin Obra Autodocs.

In general, we are preparing for a commercial re-release of this kit.

The community edition file will remain free, but won’t receive any major updates anymore.

We’re launching on March 11th, 2026 with a commercial proposition where we hope the community will support us in our journey to make this a commercial product.

We’re not doing this on a whim: we’ve thought long and hard about where to take this kit, and we think in order to keep providing a great product, the next phase of the kit is being a paid product.

You’ll see some changes on the website and the repository as we move towards a commercial model.

This is pre-announcement and sort of a heads-up for teams considering using our kit. If you have any questions, feel free to reach out via johan@obra.studio.

Read the follow-up post: Why the shadcn UI kit is going commercial

Here’s a demo of a new workflow plugin called Obra Autodocs.

It’s a fast way to generate minimal looking component variant documentation generation.

We built this plugin because we were unhappy with existing option - specifically our idea was to “control the stack” when it came to documenting our design system.

This meant taking control over this aspect of the workflow.

Here’s the plugin’s features:

• Performance-driven: 🔥 Component documentation generation in seconds. No slow grid generation. Retain ability to actually edit your components.
• Turn documentation on or off with a simple toggle. Plugin detects existing documentation and offers a way to turn it on or off. Toggle grid lines on and off as well depending on what you are working on.
• Set custom colors: for those components on darker backgrounds, where the default purple doesn’t work.

There’s a few others that are a bit experimental:

• Align to X or Y grid (Beta)
• Document boolean show/hide properties (Beta)

The plugin is now live on the Figma Community: Obra Autodocs.

We will be defaulting to using this plugin for component tables in the upcoming 1.6.0 version of our kit.

P.S. The plugin also contains a hidden feature to switch Propstar tables to Obra Autodocs tables for an easy switch.

Today we got a question from kit user Taylor Wright. He wrote this:

I've been using your Shadcn UI Kit in Figma, which has been a big help. I'm approaching the point where I'll be working with frontend developers so I'm hoping that all goes well.

Yesterday I was making a custom component for a language toggle (I wanted to do something different from the standard “Switch” component).

One issue I ran into was trying to set the selected text to “general/muted” so it would match the color of the background pill shape (which is “general/muted”).

I can’t tell why I have access to certain colors when some items are selected, but not all the time. Looking at the UI Kit’s Colors page (link), it sounds like there’s some logic for foreground and background colors, but I couldn’t quite understand.

Do you explain this further elsewhere? I’m not even sure how this is enabled in Figma.

I’ve found a temporary workaround, but was hoping there might be something clever that I’ve missed.

Here’s our reply.

Hi Taylor,

Thanks for your detailed question.

This is due to color scoping, some colors are scoped to certain scopes, but sometimes that is actually in the way of work.

You can go into the variables panel. Hit the little settings icon on hover, and change the scope in the 2nd tab of a variable to work around this.

There is no specific mention of color scoping in the docs, we should probably explain this.

• muted is meant for backgrounds and is set to Frame and Shape (this is actually muted background but shadcn/ui omits the word background as a pattern in their naming)
• muted foreground is meant for foregrounds and is set to Shape, Text and Effects.

So in your case, you are trying to use a background color for a foreground color.

The reason to scope variables is that less variables show up when assigning (e.g. only font sizes show up when applying font size as a property). This is a way to make it more manageable.

Presumably - but this would have to be tested - it gives LLMs also an extra data point of how to use a color. But I am pretty certain this info is not used that much when using for example Figma MCP.

I’ve found that it’s not that helpful to apply the scoping for all purposes, since for example, we use rectangles that you can toggle on and off as borders in our table component; so this is technically a fill on a frame; and not a border.

If you would set color scope to stroke only (which seems natural for borders) you wouldn’t be able to access it.

We received permission from Taylor to share his question for the benefit of the community.

We are sure other people are wondering about this.

If you have any shadcn/ui kit questions, feel free to e-mail us at info@obra.studio. Perhaps we can turn this into a series of blog posts?

Today, we released the 1.5.0 version of the kit. Watch the above video for the full explanation about what changed.

This version continues improving our Obra shadcn/ui kit with several improvements. As always you can find the latest version of our kit on Figma Community.

In general, improvements are related to two topics

1. Improving the process of implementing your brand in shadcn/ui kit. When we customize the kit for our clients — see customization services — we are using a workflow that necesitates having the right variables. Please see the updated color docs to find out about how to use the new changes. We detail visually how this works in the above video.
2. More available styles to use the shadcn/ui kit for marketing / landing page purposes. You will find that there is now a larger button as well as a larger paragraph and a “caption” style available by default. While we didn’t originally intend to use shadcn/ui for marketing-style pages, and thought of shadcn/ui as the app layer, there are some definite marketing use cases.

On Wednesday, we explained what happened to the CSS export plugin. We are currently preparing a commercial offering to move the kit to a freemium model. The core of the kit will always remain free, but specific layers on top will become part of a paid offering.

Some community members have asked us what our stance is on “create”. In this blog post, we discuss our opinion and how it affects our kit.

In December, the shadcn/ui website was updated with a feature to “create your own shadcn/ui theme” called Create.

Create essentially allows you to customize aspects of shadcn/ui on the shadcn/ui website itself to generate a theme.

When you start creating a theme, you’d select any of the 5 styles: Vega, Nova, Maia, Lyra and Mira.

Vega is the classic shadcn look, and the one that, in our opinion, works best for most use cases.

Right now, Nova is the style that shows up by default when browsing components on ui.shadcn.com.

Vega is what we use in our kit.

Choosing a style affect multiple things at once:

1. Spacing - How much spacing is used
2. Border radii - How generous border radii are
3. Whether a box or table-view style is used for lists (Works in Maia and Mira)
4. Whether a pill-shaped input control is used for inputs yes or no (Maia only)

To continue customizing, you would choose any of 4 base colors (neutral, stone, zinc and gray) and then use a theme color.

You are also able to choose a font with 13 default choices.

There are more features, like customizing the icon set. You can choose between Lucide, Phospor Icons, Tabler Icons, Remix icons and HugeIcons.

In our customization work we have found the “old” default of Lucide Icons to sometimes not be the best choice. Mostly because Lucide Icons does not include filled icons. We really like Tabler and Phosphor icons and of course, our very own Obra Icons.

We think it’s great that anyone can create a shadcn/ui theme — and that with little effort, any shadcn/ui-powered UI can look better.

But of course, with our team mostly being a team of designers, we find these customizations a bit basic. We customize shadcn/ui as a service so naturally we have opinions about this.

Before “create” there was 1 shadcn/ui look, and we could promise pixel parity with the shadcn/ui docs.

One of the advantages we listed was “Recreates all shadcn/ui components accurately”. Now we have to add a little asterisk note: accurately - Vega style.

Things are not so clear cut anymore:

1. The Nova look is the default in shadcn/ui documentation
2. We built our kit on the Vega look
3. You can reach the Nova look via customizing our variables
4. Yet, we think the Vega look is a better default for most teams.

We’ve discussed the change within our internal team, and what to do about it.

There is no 1:1 relationship between a change to a development framework and what should happen in the UI kit.

We’ve seen some competing kits rush to create plugins to cover this use case, but we think this is the wrong approach. The approach of swapping styles will only ever work on a fresh copy of a kit and is bound to break fast in the real world.

It looks good in a demo, but it won’t work.

We’ve thought long and hard about this, and the thing is that all of the customizations you can make in shadcn/ui create, you can also recreate in our Figma kit.

1. Changing the font: go to typography variables and make the change. See typography.
2. Colors: go to the color variables and make the change. Remap to any of the Tailwind colors or choose your own. See colors.
3. Changing the icon set: check out our icon sets community file. Replace all icons after the blank icon and work from there.
4. Changing the spacing: every spacing value in our kit (even the weird ones) is tied to a variable. You can make the kit appear more or less spacious by changing the overall scale in the top-level variable group for this.
5. Changing the border radii: every border radius value in our kit is tied to a variable as well. You can make a squared look in seconds by changing every value (except infinity, better not touch that one). Or change the overall values of border radii by tweaking the values in the variable panel.

For stylistic changes on the component level, we don’t think it makes sense to have to choose between one style or the other.

We simply have both available in the kit. This then allows designers to experiment with what is right for their project.

Consider an accordion;

In our kit, we provide both variants for accordions: bordered and unbordered (and bordered with no middle borders as an option)

Consider inputs. We provide both variants for inputs: regular and round.

There is no reason why you would have to choose between one or the other. Consider this little user interface, where we have 2 styles used, in a way that makes sense: the search input has distinct round styling, and the main form has regular corners.

All in all, our approach when to having to choose between 2 options is like the meme with the little girl: “why not both”?

Design is about exploring options, not being locked into a choice from the start.

With the 1.4.0 release, we announced a design to development plugin that took the shadcn/ui kit variables and generated CSS code.

We are currently thinking about where to take the Obra shadcn/ui kit commercially. The design to development plugin is deemed too valuable to simply open source and fits straight into our commercial customization offering.

Currently, the offering is a design-only offering. We will be adding front-end services to our offering soon, and the design to development component of this is critical for the workflows.

For anyone depending on the plugin, it is available in the git history of our repo. The code can still be used by anyone - something is released under MIT, is is essentially out there. However, we want to make it clear we will not be offering this plugin in the free, open source offering in the future.

Since the plugin was only duplicated 100-ish times, it seemed like a good moment to do this before more people depended on it for their workflow.

In December ‘25, shadcn released shadcn/ui create.

This feature, available at ui.shadcn.com/create allows you to build your own shadcn/ui.

As part of the feature, people can choose their icon set and have the choice between Lucide, Tabler Icons, HugeIcons, Phosphor Icons, and Remix Icons.

By default, our popular Obra shadcn/ui kit contains Lucide icons.

However, in projects, we are often missing filled icons and just more icons in general. While Lucide is great, the 1500 icons are easily dwarfed by the 5000+ in Tabler.

We published a new file to our Obra Studio profile which contains Tabler Icons, Phosphor Icons, Remix Icons, and our very own Obra Icons.

We omitted Huge Icons because of their restrictive license agreement.

This file can help teams make the swap to other icon sets to customize the shadcn/ui kit.

We did not add these assets to the actual kit on purpose, as it would make the library large and impossible to publish.

Find the community file here.

This is a cross-posted blog post, that originally appeared on the Obra Studio blog.

Lately we find that clients have similar needs:

• A recent rebrand needs to find its way into the app UI: The client has gone through a rebranding, and the rebranding now needs to be reflected in a professional user interface
• Design system - Without the politics: The client needs a solid design system but wants to avoid a big project, since they are moving fast
• AI-ready: The client is heavily using AI tools to generate interfaces and help speed up software development projects

Since June last year, we have been maintaining the Obra shadcn/ui kit, which by now has been duplicated over 37,500 times on Figma Community.

Last week we released version 1.4.0, with extended theming options and a CSS export plugin.

Since launching the kit, several clients have asked us to customize our very own shadcn/ui kit. This has led to some fantastic projects where we are able to tune the kit to real-world needs and improve it, while delivering a solid foundation for our clients.

We’ve now turned our offering into a formula:

• Senior designers customize our open-source Obra shadcn/ui kit to your brand
• We create or recreate 10-20 screens into the new kit, in a sprint-based formula, elevating the UX quality and getting rid of poor AI-generated design decisions

The result: a ready-to-go base of a design system in just a few weeks.

There’s a lot of power in this setup to build out software features:

• First of all, you can connect a design system to Figma Make. After applying the rebrand to the kit, product managers and designers can use the look and feel of your design system to generate prototypes.
• An obvious power is that the design system is inherently connected to development by virtue of it being shadcn/ui based. The kit has been built in such a detailed way that, when screens are interpreted by an LLM, they pick out the right Tailwind variables to make designs real.

Many software companies are focused on speed and can’t afford to have month-long discussion about generic components. By going for a shadcn/ui system based, they can move faster. We help them set up the base of their design system in three weeks instead of three months.

If you’re curious about this offering, check out our page about the shadcn/ui customization services.

And if you’re convinced, we’ll see you in our inbox!

With Obra Studio we’ve helped clients across the world customize our very own shadcn/ui kit. Client projects keep our kit free and open source. They also lead to improvements needed by real-world design teams, available for everyone.

Read our offering around kit customization on our website →.

Check out our Obra shadcn/ui CSS export plugin to automatically export your variable theme to a shadcn/ui theme!

We’ve released the 1.4.0 version of the Obra shadcn/ui kit. As always, grab the kit on the Figma community page. This release comes with a lot of improvements and bug fixes. Check out the changelog for all details.

Here are the general improvements:

• Improved white labeling workflow (aka multi-theme workflow)
• Improved design to development workflow with a custom, open source plugin
• Improved several components to be more robust including Item, Empty State, Input Group (complete the October ‘25 drop)

A bugfix of note is a change to the destructive foreground variable; check out the changelog for all details.

Regarding icons, we now ship without the icon hack and rely on outlined icons. This change caused some debate in our team, but we think simplifying the layer structure is more beneficial than making it harder on everyone to maintain the kit.

We’ve heard that our kit didn’t go far enough when it came to variables usage. With the new variables structure, you can go much further without needing to go custom.

• The typography part has received a major overhaul. You can now adjust the typography and specific heading and paragraph styles by only adjusting variables. This ties into the white-labeling improvements (see below)
• The new spacing structure allows you to make a spacious or compact theme with much more ease than before, as we examined every component to fully rely on auto layout and tokenized spacings
• The new logic for border radii makes it very easy to customize border radii to a fully square or more rounded theme than before.
• By separating out the chart themes from the regular color themes, it is easier to provide support for several chart themes that are independent of the color theme.

We find that the general structure of collections (once again, see below - the section on white-labeling improvments) also helps to have an experimentation layer where you can try out design variations without duplicating an entire single theme and having to maintain hundred of copied variables.

In this release, we’ve re-evaluated the theming layer to provide better support for custom theming in general and more specifically for white-labeling. This will greatly help teams that manage multiple themes in a single Figma library.

The biggest change in the theming layer is doubling down on working with different collections. The different collections are:

1. Colors
2. Typography
3. Border radii
4. Spacing
5. Chart colors
6. Shadows

The spacing and border radii collections now use t-shirt sized variables (e.g. rounded-sm) by default. The fixed values are hidden away in 2 collections that do not get published by default.

Working with so many modes might feel awkward at first, but it enables a word of possibilities when it comes to white-labeling themes — without needing any of Figma’s enterprise features like extended collections or API variable import (also locked to the enterprise tier).

(Check out our batch mode switcher plugin to apply several modes at once)

Watch the demo video for this feature:

As a team, we pinned our hopes on Figma’s export to JSON features, but when that feature released, it felt inadequate for our needs.

When exporting variables via Figma’s native export, first of all there is no automated way to do this, and second of all, you end up with a bunch of JSON files in the design tokens 1.0 spec.

This output now requires further processing. It might be OK for some teams to build a whole dev pipeline around that when they can pull in the changes via the Enterprise API, but this doesn’t work for most teams.

What we did instead to solve design to development is build a plugin that takes your variables and directly translates it to a shadcn theme, as well as Tailwind theme code. You can find our Obra shadcn/ui kit CSS export plugin on Figma community.

This plugin is fully open source to teams can customize it to their needs. Do you have a specific set of variables that need to land in code? Fork away! The plugin, just like our shadcn/ui kit, is released under a very permissive MIT license. You can find the code in our shadcn/ui-kit repository here.

Update: we decided to remove (free) support for this plugin as it ties into our commercial offering.

Watch the demo video for this feature:

With the changes in this release, we are stabilizing the theming layer for others to build on.

Unless we get very specific feedback, do not expect any major changes in this layer anymore. This is the kit release to start building your design system with in 2026.

And if you need any help with that, we’re always available for questions or consulting with Obra Studio.

Read our offering around kit customization on our website →.

We released 1.3.0 of our Obra shadcn/ui kit for Figma.

You can duplicate the new community file here..

This is a release that follows quickly from 1.2.0 in which we enhance the theming layer improvements we introduced in 1.2.0.

The main changes include the following:

• Add spacing to the theming layer: you can now adjust spacing by adjusting the your_brand collection
• Scope variables to the right scope, for example, have fill variables

We have been getting some questions around updating the kit. I made a video last month around this topic, which you find here.

For the details, please head over to the changelog.

We’ve released the 1.2.0 version of our kit this Saturday evening. You can find the kit via this Figma community link.

This release focuses on two main aspects:

1. We reorganized the file with a page-based organization as per popular request - and to work around some performance issues
2. We revised the theming layer to make it easier to make customizations, with a setup that puts your own brand - literally - in the first place

We go through the changes in this video:

As always, find all the release info in our own changelog.

We provide our Obra shadcn/ui Figma library for free to the community.

It is a Figma library that can be used as a base for your shadcn/ui-based projects. Design teams use it to create mock-ups with the official shadcn/ui elements. Some use it as the base for their design system.

We’ve been getting super positive comments about our kit and are happy design teams worldwide are using our kit.

We initially released this project in June and it’s been growing steadily so far. We’ve been supporting this Figma file with updates over the past few months as it grew to over 19,000 duplicates at the time of writing.

In the kit we support Lucide icons, Tailwind v4 colors, and theming (via a default dark and light mode). All shadcn/ui components are faithfully recreated in the kit.

When the October update came out to shadcn/ui, we jumped on it to provide the necessary updates. We keep our kit up-to-date with shadcn/ui.

When a user reports a bug or problem, we more than often fix it within 24 hours of the report. We provide a public log of issues on Github as well as provide a place for ideas and discussions.

Even though the library is a design file, we treat it as an open source project with a changelog that uses semantic versioning (insofar that is possible for design work).

Lately we’ve been getting some questions about how our kits compare to other kits, specifically to commercial kits.

We see the competition heating up in the kit space with new alternatives popping up.

We see possible clients comparing our kits to some commercial offerings and asking us to compare the kits.

We understand this is an important business choice when starting a design system project, so we’d like to elaborate on this.

We think our kit definitely stacks up to the paid options, even though it’s completely free.

We believe the main benefits that the paid options promote as benefits over our kit are rather limited.

The main benefits we’ve seen promoted so far include design-to-code plugins; automatic theme adaptation to tweakcn styles; collections of shadcn-based blocks, and a video series teaching how to use the kit.

For design-to-code, we believe Figma’s official MCP is the go-to solution. We don’t believe individual plugins will match Figma’s native evolution in this space.

We’ve experimented with automatic theme adaption, but we don’t believe tweakcn themes provide enough depth when it comes to branding a UI kit.

The number of variables available in shadcn is limited by default (this is on purpose); the idea that you can fully make it work with those variables is misguided. Just go on tweakcn and look at the actual result of a skin - it’s not the result you professionally want.

We prefer customizing the shadcn/ui kit theme to a brand manually based on a client’s branding guidelines. We analyze the client’s brand and theme the kit acordingly, providing customizations where appropriate. We provide consulting and help around this.

What this feature is: some kits offer ready-made Figma sections, sometimes with a front-end counterpart, often in React.

We think the “pro” blocks option that some kits provide are not exactly the type of design work we want to promote.

Most “pro” blocks we see are blocks for marketing websites (e.g. generic looking pricing sections, call to action sections etc.).

We think shadcn/ui is a great framework for web apps, but using the typical “pro” blocks found for websites in competing kits mostly leads to uninspired design work.

One competitor describes their generic looking pro blocks as “stunning”. The whole point of shadcn/ui is to provide a base for your design work. The choices made are intentionally neutral so that design teams can build on top of it and make their own choices. How could unskinned, basic looking blocks then be stunning?

However, aisde from my objections, in some cases, using shadcn/ui “pro” type of blocks can be helpful to whip together a quick landing page. Not every project needs a designer. Not every FAQ or pricing section needs to be reinvented in every project.

Our kit has a limited number of examples on the Examples page. We believe more examples can help designers help get more out of the kit.

We aim to expand on the existing examples so kit users have more copy-pastable user interfaces available.

Just like with most things in our kit, I am not the only person deciding about the direction. We take a community-driven approach. We’d like your opinion on also adding landing page and application blocks to our kit.

You can chime in here. Are you missing a “pro blocks” feature? What kind of examples are you missing?

Lastly, providing video tutorials is a great idea in our opinion, and something we would like to work on towards the future. We already have videos about our kit, but they don’t follow a structured learning format. We’ve started planning out a video course on how to use the kit.

However, the backbone of using any Figma library is mostly general Figma knowledge. We offer a commercial Figma workshop where we teach teams how to use Figma, and provide guidance adapted to the designer skill level.

Our business model is selling consulting, design and development projects as an agency.

Promoting our free kit leads to client work for our studio, Obra Studio.

Currently the kit leads to people being interested in our design services and to actual design projects. We can already attribute a sizable amount of revenue to our kit that we expect to grow.

We’ve made many design systems in the past, either custom or based on other development frameworks such as Material UI. We think that the Obra shadcn/ui file is an example of the type of quality design file we can deliver as a studio. shadcn/ui is not a design system in itself, but can be used as a base for the start of a design system where design and development are based on the same underlying framework.

Given our business model to grow with our agency, we have no plans to make the kit commercial.

In the future, we plan to:

• track the evolutions in shadcn and update the kit accordingly
• update the kit to support the new featuresin Figma (e.g. the upcoming slot components)
• fix bugs or issues when reported by the community
• continue working on our roadmap of changes
• backport any useful non-client-specific changes we make in our commercial work with the kit
• keep providing a clear changelog

We’re observing that, in the market for UI kits, there is a lot of “hype’ marketing promising you many things. We don’t believe in baseless claims such as promises as “10x design productivity” or “perfect Figma to code conversion”.

On the design side, we believe if you’re going to do something meaningful with a UI kit like ours, you will still need to put in the hours. To get the best results, you will still need to hire a skilled designer to use the kit as a tool to craft great designs.

On the development end, some competing kit’s marketing claims might make you believe you don’t need a front-end developer for your project anymore.

Here, we think the evolutions in AI in terms of getting info from Figma files are strong, but still believe that you need a skilled developer for the job as well to make a correct interpretation between design and code.

We believe our kit stacks up to the competition and is a great option.

With the kit being free, you don’t need to deal with licenses and ever-changing pricing models.

With the kit having an open source model, you are never locked in. If we make a decision you don’t agree with, you can always fork the kit and continue the work.

It’s up to us to remain a quality choice so there is no need for this.

We invite you to check out our kit, use it as you please, and if you some help, we’re here to help as a design & development studio.

Kit user Josh Rubinstein reported an issue with the Toggle Group in our shadcn/ui kit.

We believe this was due to a bug in Figma, where layers with a known size would end up with mixed values, even when making a single layer selection. We will report this bug to Figma.

In 1.1.2, the latest version of the kit, we recreated the component icon behavior in a new component with the exact same name in the exact same place, but technically a new component (with a new component ID).

If you are encountering this issue, and have already duplicated our kit, we recommend deleting the Toggle Group component from your components and copy pasting the new version of the component (from a freshly duplicated Obra shadncn/ui file) into your existing file.

This issue is only relevant for versions from 1.1 on, since the Toggle Group component is new since that version.

We’ve recently gotten the question how to update a design file made with our shadcn/ui kit.

Arjun, who posted the question on our Figma community file duplicated our kit when it was at 0.2.2 and is now wondering how to update to 1.1.

The biggest differences between those two versions are theming, the introduction of variables for border radii and spacing and several bug fixes. In 1.1 several new components were introduced as well.

The answer isn’t so clear-cut. Figma doesn’t provide a clear upgrade path for UI kits. A lot depends on how much you customized in the previous version.

We recommend loading in both libraries, and manually swapping old components for new components. Any customizations to components would have to be re-applied (possibly using the new theming variables).

We like to mark the components of the old library version as deprecated — we like to do this with a colored background on the components to make it visually clear — and use Figma’s swap library function to swap out the newer versions.

We’ve made a small video that shows how we would do it.

I am sure if you’ve used our shadcn/ui kit, you’ve seen that it got more complex over time.

What started out as a simple, opinionated kit that was fast to get started with evolved to a bigger kit that houses the complexity of the whole of shadcn/ui.

Now, this is not a problem per se. Some teams need that power.

However, we realize some users of our kit do not have advanced Figma expertise or do not want to go as deep in their projects as the kit currently does.

We’re planning to release a shadcn/ui “light” kit as a companion kit alongside the real kit. This would be a stripped-down version that would be easier to use and understand for most Figma users.

However, what do we delete? What do we keep in and what should be left out? If you have an opinion, I would like to know it! We’re collecting community input on this topic via this GitHub discussion.

We’ve released the 1.1.0 version of our kit this Sunday evening. You can find the kit via this Figma community link.

This release focuses on adding the new components from shadcn/ui’s October drop and on fixing some bugs. It also adds a round variant to many components such as inputs and buttons.

We track the visual look of shadcn/ui. Whenever they make a change, we also make a change to the kit.

We’re not completely done yet with every new component added, and we’ll be working on more updates the coming time. Specifically the way you can customize inputs needs some more work; we don’t have a round variant for the new button group yet; colors need to be double checked for ghost and outlined buttons in both light and dark modes, and more. An extra pair of helping hands would definitely be welcome, so if you would be enthusiastic to help out improve out kit, drop a note via our contact form.

As always, find all the release info in our own changelog.

Shadcn teased some new components on X, see this post.

This led me recording a new video where I use our Obra shadcn/ui kit and show an example of editing an already complex component, to demonstrate how to make an addition to the kit.

In the video, I am using a combination of plugins to automate manual work: I used Groupify, Propstar, Similayer, as well as the Obra shadcn/ui tools to make an edit to a complex component in just a few minutes.

By the way, we released the 1.0 version of our kit last Thursday. The kit has now been duplicated over 12,000 times!

I’d like to repeat our call to action from last time—as we added more features, but in a way still like a simpler kit, we’d love to hear your thoughts. Perhaps different versions of the kit can be offered for different needs. If you have any thoughts on this, please contribute in this discussion.

We just released the formal 1.0 version of our kit 🎉! After three months of being in public beta and several changes along the way, we hit 1.0.

You can find the design file here, on Figma community.

We take that number seriously as a stable point: since we adhere to semantic versioning (as much as that’s possible for a design file) we will not be releasing any breaking changes.

The file will stay stable with the variables that we have now, the components that exist. If shadcn/ui itself releases further changes, we will check their nature (addition, deletion, change…) and see how we will update the kit. As always we will ask for your community feedback before making any major changes.

Today we hit 11,000 duplicates for our kit. We are excited that design teams are trusting our kit to build their foundations on. We’ve heard that teams from Belgium, Mexico, South Korea, the US and Brazil have been using the kit for their app designs. Awesome. If you use our kit, make sure to let us know!

When we designed this kit, we initially had a philosophy of “do more with less”: we only shipped the colors that were used, we only had 20 or so icons in the kit (the ones actually used) and no dark mode on purpose.

Based on the feedback of the community, we realised that it’s better to be more feature complete. Over the public beta releases we gradually added features:

• August 18, 2025 - 0.2.0 - We learned from the community that they would like all Lucide icons and all Tailwind colors straight-up in the library file instead of dealing with the add-ons.
• September 2, 2025 - 0.3.0 - Added Propstar-based docs for all components.
• September 4, 2025 - 0.4.0 - We added variables for border radii and spacing.
• September 8, 2025 - 0.5.0 - The Obra shadcn/ui kit now supports dark mode and theming. We’ve added variables for light/dark mode (and subsequently, themes) to all components.
• September 15, 2025 - 0.6.0 - We linked to the official shadcn/ui docs in every component

As we added more features, but in a way still like a simpler kit, we’d love to hear your thoughts. Perhaps different versions of the kit can be offered for different needs. If you have any thoughts on this, please contribute in this discussion.

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:

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