Introduction
The shared component registry behind every Uqudo project.
Uqudo UI is a shadcn registry, not an npm package. Components are not
imported from a dependency: the shadcn CLI copies their source into your
project, where you own and can edit them.
That keeps one canonical implementation of a button, a logger or a layout block in this repository, while each consuming project keeps full control of the code it ships.
npx shadcn@latest init --preset "https://ui-components.dev.uqudo.io/r/init-uqudo-ui.json?base=radix" --yes
npx shadcn@latest add @uqudo/buttonThe first command is a one-time setup: it writes components.json, installs
the theme as app/uqudo-theme.css and registers the @uqudo
namespace. The installation guide walks through it,
including the variant for projects that already use shadcn.
How it works
registry.json in this repository is the source of truth. It lists every
distributable item and the files each one ships.
shadcn build compiles it to static JSON under public/r/, which this app
serves at https://ui-components.dev.uqudo.io/r/{name}.json.
The CLI reads that JSON, resolves dependencies, and writes the files into your
project — components land in components/uqudo/ui/, so they never collide with
your own components/ui/.
Why a registry instead of a package
| npm package | Registry | |
|---|---|---|
| Where the code lives | node_modules, read-only | Your repository, editable |
| Styling overrides | Prop or CSS escape hatches | Edit the component |
| Upgrades | Bump a version | Re-run add, review the diff |
| Bundle cost | Whole package | Only the files you added |
The trade-off is deliberate: updates are explicit rather than automatic. Re-run
add for an item to pull the latest version and review the change like any
other diff.
Next steps
Installation
Apply the preset once, clean up globals.css, start adding items.
Theme
Colours, radius, fonts and shadows in one importable CSS file.
Button
Variants, sizes, icons and asChild composition.
Sidebar
Composable application sidebar with collapsible and mobile modes.
Logger & OpenTelemetry
Structured logging and tracing for Next.js.
Ignore installed files
One-time ESLint and Prettier hook so new items stay out of format checks.