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 in the Origin UI library 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=webp/https://cdn.21st.dev/user_originui/calendar/default/preview.1737991983843.png)
Origin UI alternatives to compare
If you want a landing page to look like something, this is the wrong registry. There are no animated heroes, shader backgrounds or scroll effects, because the whole point is to look like shadcn.
| Library | Best for | Components to preview |
|---|---|---|
| ReUI | Broader product and marketing coverage | Hero, Slide Button, Card Carousel |
| Aceternity UI | Dark, high-impact marketing effects | Aurora Background, Lamp, Container Scroll Animation |
| Magic UI | Polished motion for developer-tool landing pages | Animated Beam, Globe, Text Reveal |
| Kokonut UI | AI inputs and geometric backgrounds | AI Voice Input, Background Paths, Shape Landing Hero |
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 |
| Origin UI on 21st | The browsable library with live previews and component source | One registry's worth of components |
| 21st library directory | Comparing complete libraries before individual components | 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 Origin UI library →
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.