# Redpanda UI

> Open-source component distribution built with React, TypeScript, Tailwind CSS, Motion and the shadcn CLI. Browse components you can install, modify, and use in your projects.

## General

- [Introduction](https://redpanda-ui-registry.netlify.app/docs): A customizable, open-source component library for building modern, flexible user interfaces.
- [Install](https://redpanda-ui-registry.netlify.app/docs/install): Set up the Redpanda UI Registry in your project, then install components.
- [Upgrading to Base UI](https://redpanda-ui-registry.netlify.app/docs/upgrading-to-base-ui): Migrating consumer apps to the Base UI–backed registry (major release).
- [MCP](https://redpanda-ui-registry.netlify.app/docs/mcp): How to use the shadcn MCP with Redpanda UI Registry.
- [Dependencies](https://redpanda-ui-registry.netlify.app/docs/dependencies): Required dependencies and version compatibility for Redpanda UI components
- [Contributing](https://redpanda-ui-registry.netlify.app/docs/contributing): Learn how to add new components to the Redpanda UI Registry.
- [Changelog](https://redpanda-ui-registry.netlify.app/docs/changelog): Updates to the Redpanda UI Registry.

## Foundation

- [Theme](https://redpanda-ui-registry.netlify.app/docs/theme): Customize the look and feel of your application with the Redpanda UI theme system.
- [Theming your app](https://redpanda-ui-registry.netlify.app/docs/theming): Restyle the whole system from one override sheet, and keep it honest as the registry moves.
- [Interaction states](https://redpanda-ui-registry.netlify.app/docs/interaction-states): How hover, pressed and focus are built — three archetypes chosen by rest appearance, and the naming contract that keeps them from silently failing.

## Components

- [Accordion](https://redpanda-ui-registry.netlify.app/docs/accordion): A vertically stacked set of interactive headings that each reveal an associated section of content.
- [Alert](https://redpanda-ui-registry.netlify.app/docs/alert): Displays a callout for user attention.
- [Alert Dialog](https://redpanda-ui-registry.netlify.app/docs/alert-dialog): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://redpanda-ui-registry.netlify.app/docs/aspect-ratio): Constrains content to a desired width-to-height ratio.
- [Attachment](https://redpanda-ui-registry.netlify.app/docs/attachment): Displays a file or image attachment with media, metadata, upload state, and actions.
- [Auto Form](https://redpanda-ui-registry.netlify.app/docs/auto-form): Generate registry-native forms from Buf protobuf descriptors.
- [Avatar](https://redpanda-ui-registry.netlify.app/docs/avatar): An image element with a fallback for representing the user.
- [Avatar Group](https://redpanda-ui-registry.netlify.app/docs/avatar-group): An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it.
- [Badge](https://redpanda-ui-registry.netlify.app/docs/badge): Displays a badge or a component that looks like a badge.
- [BadgeGroup](https://redpanda-ui-registry.netlify.app/docs/badge-group): A composable component for displaying a group of badges with overflow handling and "+N more" pattern.
- [Banner](https://redpanda-ui-registry.netlify.app/docs/banner): Add a banner to your site.
- [Breadcrumb](https://redpanda-ui-registry.netlify.app/docs/breadcrumb): Displays the path to the current resource using a hierarchy of links.
- [Bubble](https://redpanda-ui-registry.netlify.app/docs/bubble): Displays conversational content with variants, alignment, grouping, reactions, and polymorphic content.
- [Button](https://redpanda-ui-registry.netlify.app/docs/button): Displays a button or a component that looks like a button.
- [Button Group](https://redpanda-ui-registry.netlify.app/docs/button-group): A container that groups related buttons together with consistent styling.
- [Calendar](https://redpanda-ui-registry.netlify.app/docs/calendar): A date field component that allows users to enter and edit date.
- [Card](https://redpanda-ui-registry.netlify.app/docs/card): Displays a card with header, content, and footer.
- [Carousel](https://redpanda-ui-registry.netlify.app/docs/carousel): A carousel with motion and swipe built using Embla.
- [Chart](https://redpanda-ui-registry.netlify.app/docs/chart): Beautiful charts. Built using Recharts. Copy and paste into your apps.
- [Checkbox](https://redpanda-ui-registry.netlify.app/docs/checkbox): A control that lets the user turn an option on or off, or pick several options from a list, with checked, unchecked and indeterminate states.
- [Choicebox](https://redpanda-ui-registry.netlify.app/docs/choicebox): Choiceboxes are a great way to show radio or checkbox options with a card style.
- [Code Block](https://redpanda-ui-registry.netlify.app/docs/code-block): A customizable code block component with syntax highlighting, copy functionality, and scroll area support.
- [Code Block (Dynamic)](https://redpanda-ui-registry.netlify.app/docs/code-block-dynamic): A codeblock that also highlights code. Based on Shiki 式 syntax highlighter
- [Code Comparison](https://redpanda-ui-registry.netlify.app/docs/code-comparison): A component which compares two code snippets.
- [Code Editor](https://redpanda-ui-registry.netlify.app/docs/code-editor): A code editor component featuring syntax highlighting and animation.
- [Code Tabs](https://redpanda-ui-registry.netlify.app/docs/code-tabs): A tabs component that displays code for different languages/CLI commands.
- [Collapsible](https://redpanda-ui-registry.netlify.app/docs/collapsible): An interactive component which expands/collapses a panel.
- [Combobox](https://redpanda-ui-registry.netlify.app/docs/combobox): A searchable select input with autocomplete functionality.
- [Command](https://redpanda-ui-registry.netlify.app/docs/command): Fast, composable, unstyled command menu for React.
- [Context Menu](https://redpanda-ui-registry.netlify.app/docs/context-menu): Displays a menu of actions or functions at the pointer when the user right-clicks an element, with submenus, checkboxes and shortcuts.
- [Copy Button](https://redpanda-ui-registry.netlify.app/docs/copy-button): A button with a copy to clipboard animation and optional text label.
- [Count Dot](https://redpanda-ui-registry.netlify.app/docs/count-dot): A numerical indicator dot for displaying counts with semantic color variants and optional stacked positioning.
- [Credenza](https://redpanda-ui-registry.netlify.app/docs/credenza): Ready-made responsive modal component for shadcn/ui.
- [Data Table](https://redpanda-ui-registry.netlify.app/docs/data-table): Feature-composed TanStack Table V9 data grids with sorting, filtering, pagination, selection, and external state ownership.
- [Data Table Filter](https://redpanda-ui-registry.netlify.app/docs/data-table-filter): Faceted filter bar for data tables with submenu-based option selection, text filters, and operator support.
- [Date Picker](https://redpanda-ui-registry.netlify.app/docs/date-picker): A date picker component with range and presets.
- [Dialog](https://redpanda-ui-registry.netlify.app/docs/dialog): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- [Dot Group](https://redpanda-ui-registry.netlify.app/docs/dot-group): A positioning container that pins indicator dots to the corners of content elements, with optional overflow handling and standalone stacking mode.
- [Drag Scroll Area](https://redpanda-ui-registry.netlify.app/docs/drag-scroll-area): Makes an overflowing horizontal strip drag-scrollable, with alpha edge fades and keyboard-focus-into-view.
- [Drawer](https://redpanda-ui-registry.netlify.app/docs/drawer): A drawer component.
- [Dropdown Menu](https://redpanda-ui-registry.netlify.app/docs/dropdown-menu): Displays a menu of actions or functions when the user presses a trigger button, with groups, submenus, checkbox and radio items, and shortcuts.
- [Dropzone](https://redpanda-ui-registry.netlify.app/docs/dropzone): Allows users to drag-and-drop files into a container to upload or process them.
- [Editable Text](https://redpanda-ui-registry.netlify.app/docs/editable-text): An inline editable text component that toggles between display and edit modes on click.
- [Empty](https://redpanda-ui-registry.netlify.app/docs/empty): An empty state for a page, table or panel with no content yet, with an icon, a title, a short explanation and the action that fills it.
- [Field](https://redpanda-ui-registry.netlify.app/docs/field): Lays out a form control with its label, description and error message, so inputs, selects and checkboxes line up and announce errors accessibly.
- [Files](https://redpanda-ui-registry.netlify.app/docs/files): A component that allows you to display a list of files and folders.
- [Form](https://redpanda-ui-registry.netlify.app/docs/form): Building forms with React Hook Form and Zod.
- [Group](https://redpanda-ui-registry.netlify.app/docs/group): A layout component that groups related form elements together.
- [Hover Card](https://redpanda-ui-registry.netlify.app/docs/hover-card): For sighted users to preview content available behind a link.
- [Icons](https://redpanda-ui-registry.netlify.app/docs/icons): A collection of brand and UI icons available through the registry system.
- [Input](https://redpanda-ui-registry.netlify.app/docs/input): Displays a form input field or a component that looks like an input field.
- [Input Group](https://redpanda-ui-registry.netlify.app/docs/input-group): Adds icons, text, buttons or keyboard hints before or after an input or textarea, so extra information and actions sit inside the same control.
- [Input OTP](https://redpanda-ui-registry.netlify.app/docs/input-otp): Accessible one-time password component with copy-paste functionality.
- [Item](https://redpanda-ui-registry.netlify.app/docs/item): A versatile component that you can use to display any content.
- [JSON Field](https://redpanda-ui-registry.netlify.app/docs/json-field): A form component for editing structured JSON data with schema-driven form fields and a raw JSON editor.
- [JSON Viewer](https://redpanda-ui-registry.netlify.app/docs/json-viewer): Displays a JSON viewer in a stringified format.
- [Kbd](https://redpanda-ui-registry.netlify.app/docs/kbd): Used to display textual user input from keyboard.
- [Key Value Field](https://redpanda-ui-registry.netlify.app/docs/key-value-field): A form component for managing a dynamic list of key-value pairs with add and delete controls.
- [Label](https://redpanda-ui-registry.netlify.app/docs/label): An accessible label associated with controls.
- [ListCard](https://redpanda-ui-registry.netlify.app/docs/list-card): A slot-based card component for displaying items in a list or grid of cards.
- [ListView](https://redpanda-ui-registry.netlify.app/docs/list-view): A CSS Grid-based horizontal layout for displaying items with start, intermediary, and end slots.
- [Marker](https://redpanda-ui-registry.netlify.app/docs/marker): Displays status updates, system notes, bordered rows, and labeled separators in conversations.
- [Menubar](https://redpanda-ui-registry.netlify.app/docs/menubar): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Message](https://redpanda-ui-registry.netlify.app/docs/message): Lays out a conversation message with optional avatar, header, footer, grouping, and alignment.
- [Message Scroller](https://redpanda-ui-registry.netlify.app/docs/message-scroller): Anchors conversation turns, follows streamed replies, restores threads, preserves prepended history, and jumps to messages.
- [Mini Calendar](https://redpanda-ui-registry.netlify.app/docs/mini-calendar): A composable mini calendar component for picking dates close to today.
- [Multi Select](https://redpanda-ui-registry.netlify.app/docs/multi-select): Lets the user pick several options from a searchable list opened by a button, with the chosen options shown as removable chips in the trigger.
- [Navigation Menu](https://redpanda-ui-registry.netlify.app/docs/navigation-menu): A collection of links for navigating websites.
- [Pagination](https://redpanda-ui-registry.netlify.app/docs/pagination): Pagination with page navigation, next and previous links.
- [Popover](https://redpanda-ui-registry.netlify.app/docs/popover): Displays rich content in a portal, triggered by a button.
- [Progress](https://redpanda-ui-registry.netlify.app/docs/progress): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- [Questionnaire](https://redpanda-ui-registry.netlify.app/docs/questionnaire): Collect ordered answers with progress, validation, and keyboard navigation.
- [Radio Group](https://redpanda-ui-registry.netlify.app/docs/radio-group): A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
- [Redpanda Logo](https://redpanda-ui-registry.netlify.app/docs/redpanda-logo): The canonical Redpanda brand logo — horizontal, stacked, and mark-only lockups from the 2025 rebrand.
- [Redpanda Provider](https://redpanda-ui-registry.netlify.app/docs/redpanda-provider): A single root provider that wires up theming, motion config, and the Sonner toaster for any consumer app.
- [Resizable](https://redpanda-ui-registry.netlify.app/docs/resizable): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://redpanda-ui-registry.netlify.app/docs/scroll-area): Augments native scroll functionality for custom, cross-browser styling.
- [Scroll Progress](https://redpanda-ui-registry.netlify.app/docs/scroll-progress): A scroll progress component that displays the progress of the scroll.
- [Select](https://redpanda-ui-registry.netlify.app/docs/select): Displays a list of options for the user to pick one from, opened by a button, with groups, separators and keyboard navigation.
- [Separator](https://redpanda-ui-registry.netlify.app/docs/separator): Visually or semantically separates content.
- [Sheet](https://redpanda-ui-registry.netlify.app/docs/sheet): Extends the Dialog component to display content that complements the main content of the screen.
- [Sidebar](https://redpanda-ui-registry.netlify.app/docs/sidebar): A composable, themeable and customizable sidebar component. Created by Shadcn, animated by Animate UI, updated by malinskibeniamin.
- [Skeleton](https://redpanda-ui-registry.netlify.app/docs/skeleton): Use to show a placeholder while content is loading.
- [Slider](https://redpanda-ui-registry.netlify.app/docs/slider): An input where the user selects a value from within a given range.
- [Sonner](https://redpanda-ui-registry.netlify.app/docs/sonner): An opinionated toast component for React.
- [Spinner](https://redpanda-ui-registry.netlify.app/docs/spinner): An indicator that can be used to show a loading state.
- [Stat](https://redpanda-ui-registry.netlify.app/docs/stat): Display a labelled metric with an optional change indicator, plus a responsive group wrapper.
- [Status Badge](https://redpanda-ui-registry.netlify.app/docs/status-badge): Displays a pulsing status indicator with a label, useful for showing the state of a process or service.
- [Status Dot](https://redpanda-ui-registry.netlify.app/docs/status-dot): A standalone animated status indicator dot with semantic color variants and optional stacked positioning.
- [Stepper](https://redpanda-ui-registry.netlify.app/docs/stepper): A stepper component empowering developers to build complex, multi-step processes with ease.
- [Switch](https://redpanda-ui-registry.netlify.app/docs/switch): A toggle that turns a single setting on or off right away, like enabling a feature, with a sliding thumb that shows its current state.
- [Table](https://redpanda-ui-registry.netlify.app/docs/table): A responsive table component.
- [Tabs](https://redpanda-ui-registry.netlify.app/docs/tabs): A set of layered sections of content—known as tab panels—that are displayed one at a time.
- [Tags](https://redpanda-ui-registry.netlify.app/docs/tags): Tags are a way to apply multiple labels to an item.
- [Textarea](https://redpanda-ui-registry.netlify.app/docs/textarea): Displays a form textarea or a component that looks like a textarea.
- [Timeline](https://redpanda-ui-registry.netlify.app/docs/timeline): Displays a timeline of events.
- [Toast](https://redpanda-ui-registry.netlify.app/docs/toast): A succinct message displayed temporarily.
- [Toggle](https://redpanda-ui-registry.netlify.app/docs/toggle): A two-state button that can be either on or off.
- [Toggle Group](https://redpanda-ui-registry.netlify.app/docs/toggle-group): A set of two-state buttons that can be toggled on or off.
- [Tooltip](https://redpanda-ui-registry.netlify.app/docs/tooltip): A popup that appears when an element is hovered or focused, showing a hint for sighted users.
- [Typography](https://redpanda-ui-registry.netlify.app/docs/typography): Comprehensive typography system with headings, text variants, labels, numbers, and more

## Hooks

- [useProtoForm](https://redpanda-ui-registry.netlify.app/docs/use-proto-form): Proto-driven form validation hook using Standard Schema and protovalidate-es.
- [useAnimatedAutoHeight](https://redpanda-ui-registry.netlify.app/docs/use-animated-auto-height): Smoothly animate a container's height as its content grows or shrinks.
- [useControllableState](https://redpanda-ui-registry.netlify.app/docs/use-controllable-state): Support both controlled and uncontrolled usage of a stateful value from a single hook.
- [useCopyToClipboard](https://redpanda-ui-registry.netlify.app/docs/use-copy-to-clipboard): Copy text to the clipboard and track a transient "copied" state for feedback.
- [useDataTableFilter](https://redpanda-ui-registry.netlify.app/docs/use-data-table-filter): Headless filter state and actions for building faceted DataTable filter bars.
- [useDataTableSearchParams](https://redpanda-ui-registry.netlify.app/docs/use-data-table-search-params): Sync TanStack Table V9 state through route-owned, validated TanStack Router search params.
- [useFileUpload](https://redpanda-ui-registry.netlify.app/docs/use-file-upload): Headless state and handlers for file selection via click or drag-and-drop, with validation and previews.
- [useFullscreen](https://redpanda-ui-registry.netlify.app/docs/use-fullscreen): Toggle browser fullscreen and track whether the document is currently fullscreen.
- [useIsMobile](https://redpanda-ui-registry.netlify.app/docs/use-mobile): Detect whether the viewport is below the mobile breakpoint (768px).
- [useLayoutEffect](https://redpanda-ui-registry.netlify.app/docs/use-layout-effect): An SSR-safe useLayoutEffect that becomes a no-op on the server instead of warning.
- [useMediaQuery](https://redpanda-ui-registry.netlify.app/docs/use-media-query): Subscribe to a CSS media query and re-render when it starts or stops matching.
- [usePortalContainer](https://redpanda-ui-registry.netlify.app/docs/use-portal-container): Read the DOM element that portalled overlays (dialogs, popovers, tooltips) should render into.
- [useScrollShadow](https://redpanda-ui-registry.netlify.app/docs/use-scroll-shadow): Track whether a scroll container has hidden content past its start/end edges, so you can fade in shadows on the overflowing sides only.
- [useShiki](https://redpanda-ui-registry.netlify.app/docs/use-shiki): Client-side syntax highlighting that renders code to React nodes with Shiki.
- [useTokenPagination](https://redpanda-ui-registry.netlify.app/docs/use-token-pagination): Forward-only token-based pagination that bridges gRPC/Connect APIs to TanStack Table.

## Patterns

- [Authentication](https://redpanda-ui-registry.netlify.app/docs/authentication): Auth0 screens, reproduced 1-1 in Tailwind. Created by malinskibeniamin.
- [Chat with useChat](https://redpanda-ui-registry.netlify.app/docs/chat): Compose registry chat primitives with AI SDK streaming, stop, retry, visible errors, and attachments.
- [Create Layout](https://redpanda-ui-registry.netlify.app/docs/create-layout): A responsive layout component for create and form interfaces with an optional summary sidebar.
- [List Layout](https://redpanda-ui-registry.netlify.app/docs/list-layout): A composable, responsive layout component for list views with header, filters, content, and footer sections.
- [Animation](https://redpanda-ui-registry.netlify.app/docs/loading-animation): A list of example Redpanda loading animations.

### Layouts

- [Filtered Table Pattern](https://redpanda-ui-registry.netlify.app/docs/patterns/filtered-table): A toolbar with faceted filters and table actions above a data table.
- [Form Footer Pattern](https://redpanda-ui-registry.netlify.app/docs/patterns/form-footer): Consistent action placement for CRUD form operations.
- [Header Pattern](https://redpanda-ui-registry.netlify.app/docs/patterns/header): A page header with title, description, and primary action button.
- [Key Value Pattern](https://redpanda-ui-registry.netlify.app/docs/patterns/key-value): Composing editable key-value forms and displaying them in readonly mode as badges.

## Agent skills

- [redpanda-ui](https://redpanda-ui-registry.netlify.app/.well-known/agent-skills/redpanda-ui/SKILL.md): Redpanda UI Registry: a shadcn-style React component registry (Base UI, Tailwind CSS v4, Motion) whose components install with the shadcn CLI as @redpanda/<name> from https://redpanda-ui-registry.netlify.app/r/{name}.json. Use when setting up components.json with the @redpanda registry, running bunx shadcn@latest add @redpanda/..., installing @redpanda/theme or theme.css, wiring RedpandaProvider, ThemeProvider, ThemeScript or initTheme, theming with a theme-overrides.css sheet and the theme checker, using design tokens instead of dark: classes, building forms with Form, react-hook-form and zod or useProtoForm and Auto Form, updating components with --overwrite or shadcn diff, migrating from Radix to Base UI (asChild to render, onSelect to onClick, data-[state] attributes), migrating from fumadocs/cli, or configuring the shadcn MCP server for the registry.

## Agent resources

- [llms-full.txt](https://redpanda-ui-registry.netlify.app/llms-full.txt): The full Markdown of every page in one file.
- [Page Markdown](https://redpanda-ui-registry.netlify.app/index.md): Append `.md` to any page URL to fetch that page as raw Markdown.
- [JSON API](https://redpanda-ui-registry.netlify.app/api/docs/pages.json): Page index of the JSON docs API; each entry links the page's JSON and Markdown forms. Described by the OpenAPI document at https://redpanda-ui-registry.netlify.app/openapi.json.
- [Agent skills](https://redpanda-ui-registry.netlify.app/.well-known/agent-skills/index.json): Agent Skills discovery index of the skills this site publishes.
- [API catalog](https://redpanda-ui-registry.netlify.app/.well-known/api-catalog): RFC 9727 linkset of the APIs documented here.
- [AI catalog](https://redpanda-ui-registry.netlify.app/.well-known/ai-catalog.json): ARD manifest of the agent-facing resources on this site (MCP server, skills, APIs).
- [agent-readability.json](https://redpanda-ui-registry.netlify.app/agent-readability.json): Manifest of every agent-facing artifact on this site.
- [Sitemap](https://redpanda-ui-registry.netlify.app/sitemap.xml): Every indexable page URL with its last-modified date.