Last chance for 50% off — CSS Export plugin approved — 1.9.3 released - Blog

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.

Architecture of components

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.

Coming up: Nova style

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.

Important token fix in 1.9.3

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.

Pro Blocks as React code — still on track for May 11

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.

Last chance: 50% off ends April 30