Origin UI is the registry for people who like shadcn/ui and want more of it, rather than something on top of it. Almost everything in it is a primitive taken further: the same Radix behaviour, the same token system, the same visual language, with the variants a real product needs and the base does not ship. 44 of its components are published on 21st.
That makes it the least exciting registry to write about and one of the most useful to install from.
The primitives, extended
Dialog and Avatar are the enhanced versions of the shadcn originals. Button, Accordion, Popover and Command are the same idea across the rest of the set.
The value here is variant coverage. shadcn's Avatar is an image with a fallback; a product needs a group, a status dot, a size scale. shadcn's Dialog is a dialog; a product needs the scrollable-body case and the fixed-footer case. Origin fills exactly those gaps, which is why it tends to survive contact with a design system that already exists.
The hooks
The part that is easy to miss, because a registry is usually assumed to be components. useImageUpload is the most-bookmarked item in the set, and usePagination is the other one worth knowing.
The registry format supports hooks as first-class items, and this is one of the few registries that uses that properly. An image upload hook is a genuinely annoying thing to write twice: file selection, preview, crop, progress and error, none of which is visual.
The date and form pieces
Calendar [React Day Picker] is the version built on React Day Picker, which is the same engine shadcn's own Calendar uses, so it drops into an existing setup without a second date library. That matters more than it sounds: the usual failure when adopting a picker from elsewhere is ending up with two date libraries and two locale configurations.
![Calendar [React Day Picker] by originui](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=auto/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991983843.png)
When it is not the answer
If you want a landing page to look like something, this is the wrong registry. There are no animated heroes, no shader backgrounds and no scroll effects, because the whole point is to look like shadcn. Aceternity, Magic UI and Kokonut UI are where that lives, and the directory has the rest.
The combination that works: Origin for the application surfaces, one motion registry for the marketing pages, and a deliberate decision about which components are allowed to come from where.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| Origin UI | The originals with the author's own documentation | One registry's worth of components |
| shadcn/ui | The base every one of these extends | Fewer variants than a product usually needs |
| React Aria | Behaviour when you want to own every pixel | You write the visuals |
| 21st | These components with live previews, plus everything nearby | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a component, get the previews inline, and let the agent write the file.
Browse the registry directory →
Frequently asked
- What does Origin UI add over shadcn/ui?
- Variant coverage. shadcn's Avatar is an image with a fallback; a product needs a group, a status dot and a size scale. shadcn's Dialog is a dialog; a product needs the scrollable-body and fixed-footer cases. Origin fills those gaps in the same visual language, which is why it survives contact with an existing design system.
- Can a shadcn registry ship hooks?
- Yes, hooks are first-class items in the registry format, and Origin UI is one of the few registries that uses that properly. Its most-bookmarked item is an image upload hook, which handles file selection, preview, crop, progress and error, none of which is visual and all of which is annoying to write twice.
- Will Origin UI's calendar conflict with shadcn's?
- No, and that is the point. It is built on React Day Picker, the same engine shadcn's own Calendar uses, so it drops into an existing setup without a second date library. The usual failure when adopting a picker from elsewhere is ending up with two date libraries and two locale configurations.
- When is Origin UI the wrong choice?
- When you want a landing page to look like something. There are no animated heroes, shader backgrounds or scroll effects, because the whole point is to look like shadcn. For that, an animated registry is the right shelf, ideally paired with Origin for the application surfaces.