Components
Available components#
The following shadcn/ui components are available as Figma components:
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
Native Select is not included because its styling depends on the OS.
Obra Custom components#
The Pro edition includes custom components marked (OC) — short for Obra Custom. These are not part of shadcn/ui officially, and that’s the point: they exist to fill the gaps shadcn/ui leaves open and to keep our Pro Blocks reusable.
What OC components are for:
- Building blocks for Pro Blocks. Most OC components started life inside a Pro Block — once we noticed the same pattern across multiple blocks (an inline form message, a decorative icon, a star rating), we lifted it out into its own component so the blocks could share it.
- Common UI patterns shadcn/ui doesn’t ship. Things like backdrops, dropzones, timelines, and star ratings come up in real product work but aren’t part of shadcn’s surface. OC fills that gap without you having to build them from scratch.
- Keeping the official kit aligned with shadcn/ui. When shadcn-style components have a variant the official kit doesn’t (rounded buttons, rounded inputs, a label with a required asterisk), we move that variant into the OC layer rather than altering the official component. That way our Button, Input, and Label still match shadcn/ui one-to-one.
What they aren’t:
- Not a replacement for shadcn/ui components. If a component exists in shadcn/ui, use that one. Reach for OC only when the pattern isn’t covered by the official set.
- Not guaranteed to map to code on their own. OC components are Figma-side helpers. They’re designed to compose with shadcn/ui primitives in a real codebase — but unlike the official components, they don’t have a one-to-one shadcn/ui counterpart you can copy-paste.
You can safely delete any OC components you don’t use when forking the kit into your own design system.
Adding your own components. The kit ships with a dedicated page where you can drop in components you build on top of the kit, so they live alongside the OC layer instead of getting mixed into the official shadcn/ui set. You’re of course free to organize your own components however you want — the dedicated page is a convenience, not a requirement.
The current set:
Not available#
The following components are not available in the kit since they are purely code-technical components with no user interface:
- React Hook Form
Deprecated#
The following components are not available, since they are deprecated in shadcn itself.
- Form
- Toast
Styles and variables#
Typography is customizable via a combination of Figma styles and variables. See the typography documentation for details.