---
name: "@lumiui"
slug: "lumiui"
description: "Lumi UI is a composable React component library built on Base UI (MUI team's headless primitives) and Tailwind CSS, offering both pre-assembled composite components and raw primitive building blocks. Ships form and input components (Form, Input, Autocomplete, Combobox, OTP Field, Number Field, Select, Slider, Switch, Textarea), layout and navigation (Accordion, Tabs, Command Menu, Navigation Menu, Scroll Area, Sidebar), overlays (Dialog, Alert Dialog, Context Menu, Drawer, Dropdown Menu, Popover, Sheet, Tooltip), feedback (Meter, Progress, Toast), and display (Avatar, Chart, Resizable, Toolbar). Multiple built-in themes (Dune, Canopy, Celeste, Lagoon, Orchid). Use for: teams that prefer Base UI's accessibility model over Radix UI while still wanting Tailwind-styled, fully owned components."
category: "Component library (general)"
tags: ["accessibility", "auth", "blocks", "buttons", "cards", "charts", "components", "dashboard", "design-system", "forms", "hooks", "loaders", "media", "mobile", "navigation", "onboarding", "overlays", "theming"]
framework: "react"
license: "MIT"
author: "patrick-xin"
website: "https://www.lumiui.dev"
github: "https://github.com/patrick-xin/lumi-ui"
registry: "https://www.lumiui.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 25
component_count: 67
generated_at: "2026-07-28T08:59:05.895Z"
---

# @lumiui

Lumi UI is a composable React component library built on Base UI (MUI team's headless primitives) and Tailwind CSS, offering both pre-assembled composite components and raw primitive building blocks. Ships form and input components (Form, Input, Autocomplete, Combobox, OTP Field, Number Field, Select, Slider, Switch, Textarea), layout and navigation (Accordion, Tabs, Command Menu, Navigation Menu, Scroll Area, Sidebar), overlays (Dialog, Alert Dialog, Context Menu, Drawer, Dropdown Menu, Popover, Sheet, Tooltip), feedback (Meter, Progress, Toast), and display (Avatar, Chart, Resizable, Toolbar). Multiple built-in themes (Dune, Canopy, Celeste, Lagoon, Orchid). Use for: teams that prefer Base UI's accessibility model over Radix UI while still wanting Tailwind-styled, fully owned components.

## Links

- Website: https://www.lumiui.dev
- GitHub: https://github.com/patrick-xin/lumi-ui
- Registry JSON: https://www.lumiui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/lumiui
- This file: https://sh4dcn.vercel.app/md/lumiui.md

## Install

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

## Components (67)

| name | type | description | install |
| --- | --- | --- | --- |
| ui | registry:ui | — | `npx shadcn@latest add https://www.lumiui.dev/r/ui.json` |
| chat-input | registry:ui | A chat input component. | `npx shadcn@latest add https://www.lumiui.dev/r/chat-input.json` |
| utils | registry:lib | — | `npx shadcn@latest add https://www.lumiui.dev/r/utils.json` |
| use-mobile | registry:hook | — | `npx shadcn@latest add https://www.lumiui.dev/r/use-mobile.json` |
| accordion | registry:ui | A set of collapsible panels with headings. | `npx shadcn@latest add https://www.lumiui.dev/r/accordion.json` |
| avatar | registry:ui | An easily stylable avatar component. | `npx shadcn@latest add https://www.lumiui.dev/r/avatar.json` |
| alert-dialog | registry:ui | A dialog that requires user response to proceed. | `npx shadcn@latest add https://www.lumiui.dev/r/alert-dialog.json` |
| dialog | registry:ui | A popup that opens on top of the entire page. | `npx shadcn@latest add https://www.lumiui.dev/r/dialog.json` |
| drawer | registry:ui | A panel that slides in from the edge of the screen. | `npx shadcn@latest add https://www.lumiui.dev/r/drawer.json` |
| tabs | registry:ui | A component for toggling between related panels on the same page. | `npx shadcn@latest add https://www.lumiui.dev/r/tabs.json` |
| scroll-area | registry:ui | A native scroll container with custom scrollbars. | `npx shadcn@latest add https://www.lumiui.dev/r/scroll-area.json` |
| popover | registry:ui | An accessible popup anchored to a button. | `npx shadcn@latest add https://www.lumiui.dev/r/popover.json` |
| dropdown-menu | registry:ui | A list of actions in a dropdown, enhanced with keyboard navigation. | `npx shadcn@latest add https://www.lumiui.dev/r/dropdown-menu.json` |
| autocomplete | registry:ui | An input that suggests options as you type. | `npx shadcn@latest add https://www.lumiui.dev/r/autocomplete.json` |
| input | registry:ui | A native input element that automatically works with Field. | `npx shadcn@latest add https://www.lumiui.dev/r/input.json` |
| button | registry:ui | A button component that can be rendered as another tag or focusable when disabled. | `npx shadcn@latest add https://www.lumiui.dev/r/button.json` |
| checkbox | registry:ui | An easily stylable checkbox component. | `npx shadcn@latest add https://www.lumiui.dev/r/checkbox.json` |
| switch | registry:ui | A control that indicates whether a setting is on or off. | `npx shadcn@latest add https://www.lumiui.dev/r/switch.json` |
| select | registry:ui | A common form component for choosing a predefined value in a dropdown menu. | `npx shadcn@latest add https://www.lumiui.dev/r/select.json` |
| navigation-menu | registry:ui | A collection of links and menus for website navigation. | `npx shadcn@latest add https://www.lumiui.dev/r/navigation-menu.json` |
| collapsible | registry:ui | A collapsible panel controlled by a button. | `npx shadcn@latest add https://www.lumiui.dev/r/collapsible.json` |
| command-menu | registry:ui | A mobile-friendly command palette for search and quick actions. | `npx shadcn@latest add https://www.lumiui.dev/r/command-menu.json` |
| preview-card | registry:ui | An accessible popup anchored to a button. | `npx shadcn@latest add https://www.lumiui.dev/r/preview-card.json` |
| progress | registry:ui | Displays the status of a task that takes a long time. | `npx shadcn@latest add https://www.lumiui.dev/r/progress.json` |
| field | registry:ui | A component that provides labeling and validation for form controls. | `npx shadcn@latest add https://www.lumiui.dev/r/field.json` |
| fieldset | registry:ui | A native fieldset element with an easily stylable legend. | `npx shadcn@latest add https://www.lumiui.dev/r/fieldset.json` |
| form | registry:ui | A native form element with consolidated error handling. | `npx shadcn@latest add https://www.lumiui.dev/r/form.json` |
| radio | registry:ui | An easily stylable radio button component. | `npx shadcn@latest add https://www.lumiui.dev/r/radio.json` |
| tooltip | registry:ui | A popup that appears when an element is hovered or focused, showing a hint for sighted users. | `npx shadcn@latest add https://www.lumiui.dev/r/tooltip.json` |
| toggle | registry:ui | A two-state button that can be on or off. | `npx shadcn@latest add https://www.lumiui.dev/r/toggle.json` |
| toggle-group | registry:ui | Provides a shared state to a series of toggle buttons. | `npx shadcn@latest add https://www.lumiui.dev/r/toggle-group.json` |
| toast | registry:ui | Generates toast notifications. | `npx shadcn@latest add https://www.lumiui.dev/r/toast.json` |
| checkbox-group | registry:ui | Provides a shared state to a series of checkboxes. | `npx shadcn@latest add https://www.lumiui.dev/r/checkbox-group.json` |
| slider | registry:ui | An easily stylable range input. | `npx shadcn@latest add https://www.lumiui.dev/r/slider.json` |
| separator | registry:ui | A separator element accessible to screen readers. | `npx shadcn@latest add https://www.lumiui.dev/r/separator.json` |
| number-field | registry:ui | A numeric input element with increment and decrement buttons, and a scrub area. | `npx shadcn@latest add https://www.lumiui.dev/r/number-field.json` |
| meter | registry:ui | A graphical display of a numeric value within a range. | `npx shadcn@latest add https://www.lumiui.dev/r/meter.json` |
| otp-field | registry:ui | A one-time password input composed of individual character slots. | `npx shadcn@latest add https://www.lumiui.dev/r/otp-field.json` |
| toolbar | registry:ui | A container for grouping a set of buttons and controls. | `npx shadcn@latest add https://www.lumiui.dev/r/toolbar.json` |
| context-menu | registry:ui | A menu that appears at the pointer on right click or long press. | `npx shadcn@latest add https://www.lumiui.dev/r/context-menu.json` |
| combobox | registry:ui | An input combined with a list of predefined items to select. | `npx shadcn@latest add https://www.lumiui.dev/r/combobox.json` |
| menubar | registry:ui | A menu bar providing commands and options for your application. | `npx shadcn@latest add https://www.lumiui.dev/r/menubar.json` |
| sheet | registry:ui | Extends the Dialog component to display content that complements the main content of the screen. | `npx shadcn@latest add https://www.lumiui.dev/r/sheet.json` |
| resizable | registry:ui | Accessible resizable panel groups and layouts with keyboard support. | `npx shadcn@latest add https://www.lumiui.dev/r/resizable.json` |
| arrow-svg | registry:ui | Arrow SVG component. | `npx shadcn@latest add https://www.lumiui.dev/r/arrow-svg.json` |
| label | registry:ui | Renders an accessible label associated with controls. | `npx shadcn@latest add https://www.lumiui.dev/r/label.json` |
| sidebar | registry:ui | App sidebar | `npx shadcn@latest add https://www.lumiui.dev/r/sidebar.json` |
| textarea | registry:ui | A native textarea element. | `npx shadcn@latest add https://www.lumiui.dev/r/textarea.json` |
| chart | registry:ui | Beautiful charts. Built using Recharts. | `npx shadcn@latest add https://www.lumiui.dev/r/chart.json` |
| breadcrumb | registry:ui | Displays the path to the current resource using a hierarchy of links. | `npx shadcn@latest add https://www.lumiui.dev/r/breadcrumb.json` |
| badge | registry:ui | Displays a small count or status indicator. | `npx shadcn@latest add https://www.lumiui.dev/r/badge.json` |
| card | registry:ui | Displays content inside a themed container. | `npx shadcn@latest add https://www.lumiui.dev/r/card.json` |
| kbd | registry:ui | Styles keyboard key hints and key groups. | `npx shadcn@latest add https://www.lumiui.dev/r/kbd.json` |
| skeleton | registry:ui | A placeholder used while content is loading. | `npx shadcn@latest add https://www.lumiui.dev/r/skeleton.json` |
| sidebar-01 | registry:block | Sidebar with collapsible icons and sections. | `npx shadcn@latest add https://www.lumiui.dev/r/sidebar-01.json` |
| sidebar-02 | registry:block | Dashboard layout with sidebar and main content area. | `npx shadcn@latest add https://www.lumiui.dev/r/sidebar-02.json` |
| dialog-01 | registry:block | Complex user management UI with nested dialogs. | `npx shadcn@latest add https://www.lumiui.dev/r/dialog-01.json` |
| dialog-02 | registry:block | Image gallery with nested auth dialogs. Inspired by Unsplash. | `npx shadcn@latest add https://www.lumiui.dev/r/dialog-02.json` |
| project-status-picker | registry:component | A compact status selector optimized for efficiency. Features custom hotkey logic for instant selection, rich item rendering with status colors, and contextual … | `npx shadcn@latest add https://www.lumiui.dev/r/project-status-picker.json` |
| expandable-dialog | registry:component | Responsive dialog that can expand and shrink | `npx shadcn@latest add https://www.lumiui.dev/r/expandable-dialog.json` |
| morphing-dialog | registry:component | A fluid card-to-modal transition pattern. Combines Base UI's accessible dialog primitives with Framer Motion's shared layout animations for a seamless expansio… | `npx shadcn@latest add https://www.lumiui.dev/r/morphing-dialog.json` |
| vercel-notification | registry:component | A Vercel-style notification center that adapts to the device. Renders as a popover on desktop and a bottom sheet on mobile, featuring animated tabs and hover a… | `npx shadcn@latest add https://www.lumiui.dev/r/vercel-notification.json` |
| t3-model-selector | registry:component | A multi-tabbed popover for selecting items from categorized groups. Features vertical navigation, search filtering, and rich hover details. Inspired by T3 Chat. | `npx shadcn@latest add https://www.lumiui.dev/r/t3-model-selector.json` |
| slider-video-trimmer | registry:component | A video editing interface for trimming video clips. Features a timeline with draggable handles, a preview player, and export functionality. | `npx shadcn@latest add https://www.lumiui.dev/r/slider-video-trimmer.json` |
| team-switcher | registry:component | A team switcher component that allows users to switch teams. Features a sheet modal for creating new teams. | `npx shadcn@latest add https://www.lumiui.dev/r/team-switcher.json` |
| collapsible-file-tree | registry:component | A file tree component with collapsible folders and file badges. | `npx shadcn@latest add https://www.lumiui.dev/r/collapsible-file-tree.json` |
| onboarding-dialog | registry:component | A multi-step onboarding dialog with carousel navigation. | `npx shadcn@latest add https://www.lumiui.dev/r/onboarding-dialog.json` |

## For AI agents

```text
You are adding components from @lumiui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/lumiui.md) for the component list.
2. Fetch the machine-readable index: https://www.lumiui.dev/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: lumiui).
```