Obra shadcn/ui

Overview

Obra shadcn/ui is a shadcn/ui design system for Figma and React from Obra Studio, built for designers who want to set up a brand's design system in hours instead of weeks. It started as a free Figma Community kit that has now been duplicated more than 50,000 times, and has grown into a paid Pro edition with matching React code.

The Pro Figma + React edition, from $249 according to the site, includes every shadcn/ui component built with proper Figma component properties and slots, a manageable variables library, and a CSS Export plugin that takes a designed theme to code. It also ships more than 100 Pro Blocks, each available as React code installed with the shadcn/ui CLI. The React Pro Blocks are also sold separately for $149.

Features

• Free Community edition: 57 shadcn/ui components in the Nova style, light mode, built with variables, auto layout and component properties.
• Pro components: All shadcn/ui components, with theming that follows your base choices across the whole kit.
• Theming: Light and dark mode, multi-brand support and a CSS Export plugin.
• Pro Blocks: 100+ blocks in marketing, e-commerce and application UI categories.
• React Pro Blocks: TypeScript, responsive blocks styled with your shadcn/ui tokens and installed with one CLI command.
• Assets: All Tailwind 4.2 colors and more than 1,800 Lucide icons.
• Upgrade path: Community and Pro share the same theme and variable structure.
• Active releases: Version 2.4.0 added Trace and Code Block components, after a 2.3.0 e-commerce release.

Tech stack

• Figma, React, TypeScript, Tailwind CSS 4.2, shadcn/ui, Lucide