---
name: "@blode"
slug: "blode"
description: "An open-source registry of accessible React components built on Base UI and Tailwind CSS v4. Install with one command, then own the source."
category: "AI/chat UI"
tags: ["accessibility", "ai", "auth", "buttons", "cards", "dashboard", "forms", "hooks", "loaders", "media", "mobile", "navigation", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "mblode"
website: "https://blode.co/ui"
github: "https://github.com/mblode/blode-ui"
registry: "https://blode.co/ui/r/registry.json"
pro: false
pro_url: null
github_stars: 4
component_count: 99
generated_at: "2026-09-05T09:50:59.044Z"
---

# @blode

An open-source registry of accessible React components built on Base UI and Tailwind CSS v4. Install with one command, then own the source.

## Links

- Website: https://blode.co/ui
- GitHub: https://github.com/mblode/blode-ui
- Registry JSON: https://blode.co/ui/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/blode
- This file: https://sh4dcn.vercel.app/md/blode.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://blode.co/ui/r/registry.json
pnpm dlx shadcn@latest add https://blode.co/ui/r/registry.json
bunx shadcn@latest add https://blode.co/ui/r/registry.json
# clone the source repo
git clone https://github.com/mblode/blode-ui.git
# fetch the raw registry index
curl -s https://blode.co/ui/r/registry.json
```

## Components (99)

| name | type | description | install |
| --- | --- | --- | --- |
| ui | registry:base | Blode UI design-system base built on Base UI. | `npx shadcn@latest add https://blode.co/ui/r/ui.json` |
| accordion | registry:ui | A vertically stacked set of interactive headings that reveal or hide associated content. | `npx shadcn@latest add https://blode.co/ui/r/accordion.json` |
| add-to-homescreen | registry:ui | A sheet of platform-aware instructions for installing a web app to the home screen. | `npx shadcn@latest add https://blode.co/ui/r/add-to-homescreen.json` |
| alert | registry:ui | A callout that displays a short, important message to attract attention. | `npx shadcn@latest add https://blode.co/ui/r/alert.json` |
| alert-dialog | registry:ui | A modal dialog that interrupts the user with important content and expects a response. | `npx shadcn@latest add https://blode.co/ui/r/alert-dialog.json` |
| aspect-ratio | registry:ui | A component that maintains a consistent width-to-height ratio. | `npx shadcn@latest add https://blode.co/ui/r/aspect-ratio.json` |
| autocomplete | registry:ui | An input that suggests matching values while typing. | `npx shadcn@latest add https://blode.co/ui/r/autocomplete.json` |
| avatar | registry:ui | An image element with a fallback for representing the user. | `npx shadcn@latest add https://blode.co/ui/r/avatar.json` |
| bar-list | registry:ui | A compact comparison list that visualises values as horizontal bars. | `npx shadcn@latest add https://blode.co/ui/r/bar-list.json` |
| badge | registry:ui | A small status indicator for labelling and categorising items. | `npx shadcn@latest add https://blode.co/ui/r/badge.json` |
| breadcrumb | registry:ui | A navigation aid that shows the current page location within a hierarchy. | `npx shadcn@latest add https://blode.co/ui/r/breadcrumb.json` |
| bulk-action-bar | registry:ui | A sticky bar that surfaces actions for the currently selected rows. | `npx shadcn@latest add https://blode.co/ui/r/bulk-action-bar.json` |
| button | registry:ui | An interactive element that triggers an action when clicked. | `npx shadcn@latest add https://blode.co/ui/r/button.json` |
| button-group | registry:ui | A container that groups related buttons together with shared styling. | `npx shadcn@latest add https://blode.co/ui/r/button-group.json` |
| calendar | registry:ui | A date field component that allows users to pick dates. | `npx shadcn@latest add https://blode.co/ui/r/calendar.json` |
| card | registry:ui | A container for grouping related content and actions. | `npx shadcn@latest add https://blode.co/ui/r/card.json` |
| carousel | registry:ui | A slideshow component for cycling through a set of content. | `npx shadcn@latest add https://blode.co/ui/r/carousel.json` |
| circular-progress | registry:ui | A circular indicator that shows the progress of a task. | `npx shadcn@latest add https://blode.co/ui/r/circular-progress.json` |
| checkbox | registry:ui | A control that allows the user to toggle between checked and unchecked states. | `npx shadcn@latest add https://blode.co/ui/r/checkbox.json` |
| checkbox-group | registry:ui | A grouped set of related checkboxes managed with shared state. | `npx shadcn@latest add https://blode.co/ui/r/checkbox-group.json` |
| collapsible | registry:ui | An interactive component that expands and collapses a panel of content. | `npx shadcn@latest add https://blode.co/ui/r/collapsible.json` |
| color-picker | registry:ui | A saturation area, hue slider, hex input and suggested swatches for choosing a color. | `npx shadcn@latest add https://blode.co/ui/r/color-picker.json` |
| currency-input | registry:ui | A formatted input field for entering monetary values. | `npx shadcn@latest add https://blode.co/ui/r/currency-input.json` |
| combobox | registry:ui | An autocomplete input that combines a text field with a filterable dropdown list. | `npx shadcn@latest add https://blode.co/ui/r/combobox.json` |
| font-picker | registry:ui | A searchable picker for Google Fonts with live previews. | `npx shadcn@latest add https://blode.co/ui/r/font-picker.json` |
| image-comparison | registry:ui | A draggable slider that wipes between a before and after image. | `npx shadcn@latest add https://blode.co/ui/r/image-comparison.json` |
| multi-combobox | registry:ui | A combobox that allows selecting multiple items with tag-style badges. | `npx shadcn@latest add https://blode.co/ui/r/multi-combobox.json` |
| command | registry:ui | A command palette for fast, keyboard-driven searching and navigation. | `npx shadcn@latest add https://blode.co/ui/r/command.json` |
| context-menu | registry:ui | A menu that appears on right-click, providing contextual actions. | `npx shadcn@latest add https://blode.co/ui/r/context-menu.json` |
| copy-button | registry:ui | A button that copies text to the clipboard with animated feedback. | `npx shadcn@latest add https://blode.co/ui/r/copy-button.json` |
| dialog | registry:ui | A modal window that overlays the main content and requires user interaction. | `npx shadcn@latest add https://blode.co/ui/r/dialog.json` |
| drawer | registry:ui | A panel that slides in from the edge of the screen. | `npx shadcn@latest add https://blode.co/ui/r/drawer.json` |
| dropdown-menu | registry:ui | A menu that opens from a trigger button, displaying a list of actions. | `npx shadcn@latest add https://blode.co/ui/r/dropdown-menu.json` |
| empty | registry:ui | A placeholder displayed when there is no content or data to show. | `npx shadcn@latest add https://blode.co/ui/r/empty.json` |
| field | registry:ui | A form field wrapper that pairs a label, input, and helper text. | `npx shadcn@latest add https://blode.co/ui/r/field.json` |
| form | registry:ui | A form component with validation powered by React Hook Form and Zod. | `npx shadcn@latest add https://blode.co/ui/r/form.json` |
| hover-card | registry:ui | A popup card that appears when hovering over a trigger element. | `npx shadcn@latest add https://blode.co/ui/r/hover-card.json` |
| input | registry:ui | A text input field for capturing user data. | `npx shadcn@latest add https://blode.co/ui/r/input.json` |
| input-group | registry:ui | A wrapper that combines an input with addons like icons or buttons. | `npx shadcn@latest add https://blode.co/ui/r/input-group.json` |
| input-otp | registry:ui | A one-time password input with individual character fields. | `npx shadcn@latest add https://blode.co/ui/r/input-otp.json` |
| item | registry:ui | A flexible list item component for menus, settings, and data rows. | `npx shadcn@latest add https://blode.co/ui/r/item.json` |
| label | registry:ui | An accessible label that associates text with a form control. | `npx shadcn@latest add https://blode.co/ui/r/label.json` |
| menubar | registry:ui | A horizontal menu bar with dropdown menus, commonly used for application navigation. | `npx shadcn@latest add https://blode.co/ui/r/menubar.json` |
| meter | registry:ui | A meter that shows a scalar value within a bounded range. | `npx shadcn@latest add https://blode.co/ui/r/meter.json` |
| navigation-menu | registry:ui | A responsive navigation component with support for dropdown panels. | `npx shadcn@latest add https://blode.co/ui/r/navigation-menu.json` |
| number-field | registry:ui | A numeric input with increment, decrement, and scrubbing interactions. | `npx shadcn@latest add https://blode.co/ui/r/number-field.json` |
| pagination | registry:ui | A navigation component for paging through content across multiple pages. | `npx shadcn@latest add https://blode.co/ui/r/pagination.json` |
| password-input | registry:ui | A password input with a toggle button to show or hide the password. | `npx shadcn@latest add https://blode.co/ui/r/password-input.json` |
| phone-input | registry:ui | An international phone number input with country code selector. | `npx shadcn@latest add https://blode.co/ui/r/phone-input.json` |
| popover | registry:ui | A floating panel that appears next to a trigger element. | `npx shadcn@latest add https://blode.co/ui/r/popover.json` |
| progress | registry:ui | A horizontal bar that indicates the completion progress of a task. | `npx shadcn@latest add https://blode.co/ui/r/progress.json` |
| progress-list | registry:ui | A vertical list of progress items with completed and pending states. | `npx shadcn@latest add https://blode.co/ui/r/progress-list.json` |
| prompt | registry:ui | A confirmation dialog that asks the user for input before proceeding. | `npx shadcn@latest add https://blode.co/ui/r/prompt.json` |
| radio-group | registry:ui | A set of mutually exclusive options where only one can be selected. | `npx shadcn@latest add https://blode.co/ui/r/radio-group.json` |
| resizable | registry:ui | A layout component with draggable handles for resizing panels. | `npx shadcn@latest add https://blode.co/ui/r/resizable.json` |
| responsive-dialog | registry:ui | A dialog on desktop that becomes a drawer on small screens. | `npx shadcn@latest add https://blode.co/ui/r/responsive-dialog.json` |
| scroll-area | registry:ui | A scrollable container with custom styled scrollbars. | `npx shadcn@latest add https://blode.co/ui/r/scroll-area.json` |
| search-input | registry:ui | A search field with a clear button and an optional cycling placeholder. | `npx shadcn@latest add https://blode.co/ui/r/search-input.json` |
| select | registry:ui | A dropdown control for choosing a single value from a list of options. | `npx shadcn@latest add https://blode.co/ui/r/select.json` |
| separator | registry:ui | A visual divider that separates content into distinct sections. | `npx shadcn@latest add https://blode.co/ui/r/separator.json` |
| share | registry:ui | A button that opens the native share sheet and falls back to copying the link. | `npx shadcn@latest add https://blode.co/ui/r/share.json` |
| sheet | registry:ui | A panel that slides in from the edge of the viewport with an overlay. | `npx shadcn@latest add https://blode.co/ui/r/sheet.json` |
| sidebar | registry:ui | A collapsible side navigation component with multiple layout variants. | `npx shadcn@latest add https://blode.co/ui/r/sidebar.json` |
| skeleton | registry:ui | A placeholder animation that indicates content is loading. | `npx shadcn@latest add https://blode.co/ui/r/skeleton.json` |
| slider | registry:ui | A draggable control for selecting a numeric value within a range. | `npx shadcn@latest add https://blode.co/ui/r/slider.json` |
| sonner | registry:ui | A toast notification component powered by Sonner. | `npx shadcn@latest add https://blode.co/ui/r/sonner.json` |
| spinner | registry:ui | An animated loading indicator for asynchronous operations. | `npx shadcn@latest add https://blode.co/ui/r/spinner.json` |
| stat | registry:ui | A compact metric card for showing a headline value and label. | `npx shadcn@latest add https://blode.co/ui/r/stat.json` |
| stepper | registry:ui | A numbered progress indicator for a multi-step flow. | `npx shadcn@latest add https://blode.co/ui/r/stepper.json` |
| switch | registry:ui | A toggle control for switching between on and off states. | `npx shadcn@latest add https://blode.co/ui/r/switch.json` |
| table | registry:ui | A responsive table for displaying structured data in rows and columns. | `npx shadcn@latest add https://blode.co/ui/r/table.json` |
| tabs | registry:ui | A tabbed interface that organises content into switchable panels. | `npx shadcn@latest add https://blode.co/ui/r/tabs.json` |
| textarea | registry:ui | A multi-line text input field for longer form content. | `npx shadcn@latest add https://blode.co/ui/r/textarea.json` |
| time-picker | registry:ui | A select of times at a fixed interval, formatted for the locale. | `npx shadcn@latest add https://blode.co/ui/r/time-picker.json` |
| timezone-picker | registry:ui | A searchable list of IANA time zones with their current offset and time. | `npx shadcn@latest add https://blode.co/ui/r/timezone-picker.json` |
| toggle | registry:ui | A two-state button that can be toggled on or off. | `npx shadcn@latest add https://blode.co/ui/r/toggle.json` |
| toggle-group | registry:ui | A set of toggle buttons where one or more can be active. | `npx shadcn@latest add https://blode.co/ui/r/toggle-group.json` |
| tooltip | registry:ui | A popup that displays helpful information when hovering or focusing an element. | `npx shadcn@latest add https://blode.co/ui/r/tooltip.json` |
| kbd | registry:ui | A styled keyboard key indicator for displaying shortcuts and key combinations. | `npx shadcn@latest add https://blode.co/ui/r/kbd.json` |
| native-select | registry:ui | A styled wrapper around the native HTML select element. | `npx shadcn@latest add https://blode.co/ui/r/native-select.json` |
| direction | registry:ui | A context provider for managing text direction (LTR/RTL) across components. | `npx shadcn@latest add https://blode.co/ui/r/direction.json` |
| file-thumbnail | registry:ui | A square preview tile for an attached file — an image thumbnail or a file icon with name. | `npx shadcn@latest add https://blode.co/ui/r/file-thumbnail.json` |
| chat-message | registry:ui | A chat transcript entry for user and assistant messages, with attachments and a hover meta row. | `npx shadcn@latest add https://blode.co/ui/r/chat-message.json` |
| input-message | registry:ui | A chat composer with an auto-resizing textarea, action slots, a send button, and drag-and-drop attachments. | `npx shadcn@latest add https://blode.co/ui/r/input-message.json` |
| thinking-indicator | registry:ui | An animated status indicator with a morphing glyph and cycling text for thinking states. | `npx shadcn@latest add https://blode.co/ui/r/thinking-indicator.json` |
| thinking-steps | registry:ui | A collapsible chain-of-thought stepper with steps, sources, details, and images. | `npx shadcn@latest add https://blode.co/ui/r/thinking-steps.json` |
| ask-user-questions | registry:ui | A stepped questionnaire with single- or multi-select options, free-form answers, and skip. | `npx shadcn@latest add https://blode.co/ui/r/ask-user-questions.json` |
| bubble | registry:ui | A message surface for chat interfaces, with variants, alignment, reactions, and composable content. | `npx shadcn@latest add https://blode.co/ui/r/bubble.json` |
| message | registry:ui | A row primitive for chat transcripts, pairing an avatar with content, header, and footer, aligned to the start or end. | `npx shadcn@latest add https://blode.co/ui/r/message.json` |
| message-scroller | registry:ui | A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message. | `npx shadcn@latest add https://blode.co/ui/r/message-scroller.json` |
| attachment | registry:ui | A card for files and images with upload, processing, error, and done states, an optional full-card trigger, and a scrollable group. | `npx shadcn@latest add https://blode.co/ui/r/attachment.json` |
| marker | registry:ui | A compact inline status line for activity feeds and transcripts, with optional icon, separator, and border variants. | `npx shadcn@latest add https://blode.co/ui/r/marker.json` |
| weekly-hours | registry:ui | An editor for opening hours across the days of the week. | `npx shadcn@latest add https://blode.co/ui/r/weekly-hours.json` |
| utils | registry:lib | Utility functions including cn() for merging Tailwind CSS classes. | `npx shadcn@latest add https://blode.co/ui/r/utils.json` |
| google-fonts | registry:lib | Fetch and preview Google Fonts, with stylesheet injection and cleanup. | `npx shadcn@latest add https://blode.co/ui/r/google-fonts.json` |
| use-copy-to-clipboard | registry:lib | A hook that copies text to the clipboard and resets after a timeout. | `npx shadcn@latest add https://blode.co/ui/r/use-copy-to-clipboard.json` |
| use-install-prompt | registry:lib | A hook that exposes Chromium's deferred install prompt. | `npx shadcn@latest add https://blode.co/ui/r/use-install-prompt.json` |
| use-mobile | registry:lib | A hook that detects whether the viewport matches a mobile breakpoint. | `npx shadcn@latest add https://blode.co/ui/r/use-mobile.json` |
| use-tab-observer | registry:lib | A hook that observes and tracks the active tab indicator position. | `npx shadcn@latest add https://blode.co/ui/r/use-tab-observer.json` |

## For AI agents

```text
You are adding components from @blode to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/blode.md) for the component list.
2. Fetch the machine-readable index: https://blode.co/ui/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: blode).
```