Pro Blocks - Documentation - Obra shadcn/ui kit

The Pro Blocks are the marketing, e-commerce and application sections that ship with the Obra shadcn/ui Pro kit — heroes, navs, footers, feature grids, FAQs, product pages, carts, checkouts, dashboards, tables, auth screens, and more. They’re also sold on their own as React Pro. 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-02

The 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#

100+ blocks in three categories:

Marketing Blocks: heroes, navigation, footers, doormats, CTAs, pricing, FAQs, feature grids, comparisons, logos, ratings, quotes, stats, team, cookie banners, and more.
E-commerce Blocks: storefront headers, heroes and banners, category sections, product grids and carousels, product detail, cart, checkout, order confirmation, offers and coupons, gallery modals, product cards and footers.
Application Blocks: CRM dashboard, CRM wizard, contact dialog, sign up, log in, table, and more.
A few OC (Obra Custom) components used as building blocks across the Pro Blocks (such as OCMarketingBlock and OCImagePlaceholder).

You can preview every block in any shadcn/ui style on the registry.

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.