Blode

Overview

Blode UI, by Matthew Blode, is an open-source shadcn registry of accessible React components for teams on Tailwind CSS v4. It offers 92 components built on Base UI, installed with the shadcn CLI so the source lands in the repo ready to edit. The registry also includes seven shared library files and a base item for project setup.

Behavior comes from Base UI primitives, and every preview on the site repaints from the same CSS variables, with Blode, Indigo, Rose and Teal themes plus a theme visualiser. Beyond the shadcn baseline, it adds chat and AI pieces, scheduling inputs and form helpers, and ships agent skills so coding agents follow the library's conventions.

Features

• Base UI behavior: Accessible primitives for dialogs, menus, selects, comboboxes, number fields and more.
• Form inputs: Currency, phone, password, search, OTP, time, timezone and font pickers, plus color picker and multi-combobox.
• Chat and AI: Chat message, message scroller, prompt, attachment, thinking indicator, thinking steps and an ask-user-questions component.
• Data display: Data table, bar list, stat, meter, circular progress, progress list and image comparison.
• App patterns: Bulk action bar, responsive dialog, share sheet, add-to-homescreen prompt, stepper and weekly hours.
• Theming: Shared CSS variables with four preset themes and a visualiser.
• Agent skills: Documentation for AI coding agents on how to use the components.

Tech stack

• React, Base UI
• Tailwind CSS v4, tw-animate-css
• React Hook Form, Zod, Motion, date-fns, cmdk, Embla Carousel

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @blode/component-name