← Back to overview

Design to dev: getting started with the Obra shadcn/ui kit

Johan Ronsse
Johan Ronsse

May 5th, 2026

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.

Enjoyed this post?

Subscribe to receive new blog posts directly in your inbox when they're published.

Subscribe