Development

This part of the docs is for developers. Start here if you bought React Pro, or if you’re the developer on a team that uses the Obra shadcn/ui Pro Figma kit.

React Pro Blocks#

The React Pro Blocks are 100+ marketing, e-commerce and application blocks, built with shadcn/ui and published in our private shadcn/ui registry. You install them into your project with the shadcn/ui CLI, like any other shadcn component.

You need a license key that includes React: React Pro, or any Figma + React license. The key is in your purchase email.

Quick start#

1. Add the Obra registry to the components.json at the root of your shadcn/ui project:

{
  "registries": {
    "@obra": {
      "url": "https://registry.shadcn.obra.studio/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${OBRA_TOKEN}"
      }
    }
  }
}

2. Put the first two segments of your license key in .env.local:

OBRA_TOKEN="XXXXXXXX-XXXX"

3. Install a block:

npx shadcn@latest add @obra/hero-02

The CLI adds the block to your project and installs the shadcn/ui components it needs.

Next steps#

• Developer tutorial: the full setup, with troubleshooting.
• Pro Blocks overview: what’s in the registry and how the blocks are built.
• Browse all blocks: preview every block in any shadcn/ui style before you install it.
• Customer center: log in with your license key to find your registry token.

Design tokens from Figma#

If your designers customize the Obra shadcn/ui Figma kit, the CSS Export plugin turns their Figma variables into a shadcn-compatible globals.css. The Pro Blocks use the same tokens, so they pick up your brand automatically.

• CSS Export plugin: developer tutorial
• CSS Export plugin: manual install

Questions#

Use the contact form and we’ll help you out.