Blode UI

React components you own

For React teams on Tailwind v4: install any of 92 Base UI components with the shadcn CLI, and the source lands in your repo, ready to edit.

Open the install guide

$ npx shadcn@latest init https://blode.co/ui/r/ui.json

Try every component here

Pick a theme and every preview repaints from the same CSS variables. Copy the install command from any card.

Theme

How it works

Blode UI is never a package you import. Each component is a file in your repo, so you change it the way you change the rest of your code.

Behaviour from Base UI
Keyboard navigation, focus management and ARIA come from Base UI primitives, so you can restyle a component without solving accessibility again.
ComfortableDefaultCompact
Live. Tab in, then use the arrow keys.
Your agent knows the rules
npx skills add mblode/ui gives Claude Code and other agents the @blode install commands and the design rules, so the UI they write matches yours.
```
$ npx skills add mblode/ui# from blode.co/ui/design.mdMotion confirms a state change and nothing else.Focus ring. Always visible, never a glow.
```

Questions

What is Blode UI?

Blode UI is an open-source shadcn registry of 92 React components built on Base UI and Tailwind CSS v4. You install each component with the shadcn CLI, and its source is copied into your project, where you read it and change it like any other file.

Is Blode UI free?

Yes. Blode UI is MIT licensed, so you can use it in personal and commercial projects without paying or asking. The source is on GitHub at mblode/ui.

Can I add it to an existing shadcn project?

Yes. Add the design system with npx shadcn@latest add @blode/ui, then add components as usual. @blode is listed in shadcn's registry directory, so there is nothing to register first, and your existing components.json is left alone. If an older shadcn CLI can't resolve @blode, run npx shadcn@latest registry add @blode=https://blode.co/ui/r/{name}.json first.

How is it different from shadcn/ui?

It installs through the same shadcn CLI and the files will look familiar. The differences are deliberate: success and warning colours beside destructive, a linear radius scale, a global reduced-motion guarantee, no transition-all, and components shadcn does not ship, such as Currency Input and Timezone Picker.

Do I have to keep it updated?

No. There is no package to upgrade, because every component is a file in your repo. When a component changes upstream, run its add command again and review the diff, or keep your version.