An open-source shadcn registry of 93 React components built on Base UI and Tailwind CSS v4. Install them one at a time and own the source.
Blode UI is a shadcn/ui registry built by Matthew Blode. Register the @blode namespace once, then pull components in one at a time. Each one lands in your codebase as source you own and edit, not as a package dependency.
Accessibility from Base UI. Keyboard navigation, focus management, and ARIA come from the primitive, not from markup written by hand for each component.
Tailwind v4 tokens. Colours, radii, and field metrics are CSS custom properties, so you can retheme a component without forking it.
Open code. No wrapper API to learn and no release to wait on. Change the file.
Get started
Point the shadcn CLI at the design system. It registers the @blode namespace, sets blode-icons-react as the icon library, and writes Blode's tokens into your CSS in one step:
Installation has the setup for a new project, an existing shadcn project, and each supported framework.
What is in the registry
93 components, all built on Base UI primitives and styled with the same token set:
Forms. Button, input, textarea, select, checkbox, radio group, switch, slider, and toggle, plus the harder ones: autocomplete, combobox, multi-combobox, date picker, number field, OTP input, and masked inputs for phone, password, and currency.
Overlays. Dialog, alert dialog, sheet, drawer, popover, tooltip, hover card, dropdown menu, context menu, and menubar. Paired elements share their open and close timing so nothing desyncs.
Navigation. Breadcrumb, tabs, pagination, sidebar, navigation menu, and a command palette.
Data display. Table, data table, bar list, stat, meter, badge, avatar, and skeleton.
Feedback. Alert, toasts through Sonner, progress, circular progress, spinner, and empty state.
AI interfaces. Chat message, bubble, prompt, attachment, thinking indicator, and thinking steps, for building assistant UIs on the same primitives.
Composed blocks. Larger pieces that usually get rebuilt from scratch in every project: weekly opening hours, a before/after comparison slider, a Google Fonts picker, a time zone picker, and add-to-homescreen instructions for installing a web app.
Every colour, radius, and field metric is a CSS custom property, shipped by the @blode/ui design system item rather than copied into each component. Theming covers the token set, the light and dark palettes, and how to change the radius scale without touching a component file.
Working with Claude Code or another AI assistant? Install the Blode UI skill so it writes the right commands and matches the design system.
