Design to dev: getting started with the Obra shadcn/ui kit
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.