Obra shadcn/ui Pro React
Production-ready shadcn/ui blocks, in React
The Pro Blocks from Figma, implemented in React and Tailwind. Add them to your project and ship real pages instead of placeholders.
Applications
10 blocks-
CRM Dashboard 01 ·
@obra/crm-dashboard-01 -
CRM Wizard 01 ·
@obra/crm-wizard-01 -
Table 01 ·
@obra/table-01 -
Add Contact Dialog 01 ·
@obra/add-contact-dialog-01 -
Sign Up 01 ·
@obra/sign-up-01
E-commerce
63 blocks-
Product Detail 01 ·
@obra/product-detail-01 -
Product Grid 01 ·
@obra/product-grid-01 -
Cart 01 ·
@obra/cart-01 -
Checkout 01 ·
@obra/checkout-01 -
Order Confirmation 01 ·
@obra/order-confirmation-01
Marketing
41 blocks-
Hero 02 ·
@obra/hero-02 -
Features 02 ·
@obra/features-02 -
Pricing 01 ·
@obra/pricing-01 -
Comparison 01 ·
@obra/comparison-01 -
FAQ 01 ·
@obra/faq-01
114 blocks in the registry today. Your license unlocks all of them.
Built the way you build
Install from our private shadcn registry
Pull blocks into your project with the shadcn CLI. Access comes with every Obra shadcn/ui Pro license. Read the setup guide.
$ npx shadcn@latest add @obra/hero-02 ✔ Checking registry. ✔ Created 3 files: + src/components/blocks/hero-02.tsx + src/components/oc-marketing-block.tsx + src/components/oc-image-placeholder.tsx
shadcn/ui at the core
Every block is composed from standard shadcn/ui components, so it fits into an existing project. Missing components are installed for you.
Adapts to your theme
Blocks are styled with shadcn/ui tokens only, no hardcoded colors, so they match the rest of your app with no restyling.
Tailwind CSS and Lucide icons
The same styling and icon set as the rest of your stack.
TypeScript and responsive by default
Published as typed .tsx; JavaScript projects get plain JSX. Dashboard, wizard and table also come as dedicated mobile blocks.
FAQ
Any React framework with a working shadcn/ui setup: Next.js, Vite, React Router (formerly Remix), and any other React project with components.json at the root. If you don't have one yet, run npx shadcn@latest init first. Blocks install in Radix as well as Base UI shadcn/ui projects.
React Pro ($149, one-time) gives you the React Pro Blocks through our private registry, without the Figma kit. Every Figma + React Pro license includes them too. See the pricing page.
Yes. The registry has grown with every release, most recently with 63 E-commerce blocks in Pro Blocks 1.2.0. Updates are included with your license. See the Pro Blocks changelog.
Yes. The blocks are published as TypeScript (.tsx). If your project isn't set up for TypeScript, the shadcn/ui CLI strips the types and writes plain JSX.
Your registry token is the first two segments of your Pro license key. Put it in .env.local as OBRA_TOKEN and add the @obra registry to components.json. The developer tutorial has the full setup.
You can try a selection of blocks live on this page, with the same viewer customers use. After you buy, your license key unlocks every block and its code.
Ship your next page this week
Buy React Pro · $149One-time purchase, lifetime access and all future blocks. React only, no Figma kit.
Also included with every Figma + React Pro license