Pro Blocks
The Pro Blocks are the marketing and application sections that ship with the Obra shadcn/ui Pro kit — heroes, navs, footers, feature grids, FAQs, dashboards, tables, auth screens, and more. Starting with 1.10.0, they’re available as React components through the shadcn/ui registry CLI, in addition to the HTML versions we shipped originally.
How it works#
The Pro Blocks live in a private shadcn/ui registry hosted by Obra. Once you add the registry to your components.json and provide your Pro license token, you can pull any block into your project with a single command:
npx shadcn@latest add @obra/hero-02The CLI fetches the block’s source from our registry, drops the files into your project (using your own component aliases), and adds any missing shadcn/ui dependencies along the way.
What’s included#
- All Marketing Blocks — heroes (02–05), navigation, footers, doormats, CTAs, pricing, FAQs, feature grids, comparisons, logos, ratings, quotes, stats, team, cookie banners, and more.
- A growing set of Application Blocks — CRM dashboard, CRM wizard, contact dialog, sign up, log in, table, and counting.
- A few OC (Obra Custom) components used as building blocks across the Pro Blocks (such as
OCMarketingBlockandOCImagePlaceholder).
The full list of currently-published blocks lives in the Pro Blocks page on the product site.
Going further#
- Developer tutorial: installing Pro Blocks from the registry — step-by-step setup of the registry, authentication with your license key, and installing your first block.
Pairing with the CSS Export plugin#
The Pro Blocks pair naturally with the CSS Export plugin. The plugin gives you a globals.css that matches your Figma file’s tokens; the Pro Blocks give you the React markup that consumes those tokens. Run them together and the design from Figma comes through to code without any token-by-token translation.