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

You’re a frontend developer. You’ve received a design based on the Obra Pro shadcn/ui kit.

Now what do you do? In this blog post we’ll walk you through the journey of setting up your shadcn project and grabbing the styling through our code export plugin, which can be found on the Figma community.

Step 1: Set up your project with shadcn/ui Create

Go to shadcn/ui Create and set up the closest representation to the kit you received.

When in doubt, ask your designer! We used these settings to match the default setup:

• Style: Vega
• Base color: Neutral
• Theme: Neutral
• Chart color: Blue
• Heading: Geist
• Font: Geist
• Icon Library: Lucide
• Radius: Default
• Menu: Default / Solid
• Menu Accent: Subtle

If there are any known aspects of shadcn/ui Create that match your project, customize as such.

For example, if you know that the base color was changed to Stone, adjust to that setting.

(Do know that the colors “Slate” and “Gray” were removed from shadcn/ui Create)

Step 2: Initialize your project

Copy the preset to set up your project, e.g. --preset bd1h19N2.

For this blog post we set up a new project with these settings:

npx shadcn@latest init --preset bd1h19N2 --base base --template next

Run the dev server:

npm run dev

Add the demo:

npx shadcn@latest add demo --overwrite

Add the demo component to your project, add the import:

import { Demo } from 'ui/components/demo'

And add it to, for example the main page:

<Demo />

Step 3: Use the Obra shadcn CSS export plugin

Copy the globals CSS from the CSS export into globals.css (this file can also be named differently, like style.css, depending on your framework choice)

You will see that the colors change to the colors defined in Figma variables.

Step 4: optional - use type styles

We also provide a way to output the type styles to your project.

The way this is set up is that it creates a Tailwind 4 @utility class per default type style (heading 1-4 and the different paragraph sizes)

On the main page of the plugin, turn on the Obra extended option.

You will now also see typography styles output.

For Org and Enterprise: customize the plugin

For Org and Enterprise customers, we offer accesss to the source code so you can customize this plugin to your needs.

We also offer customization of this plugin to serve your design to dev needs via our agency Obra Studio.