# rapidUI

> Accessible, themeable React components for the Rapid Development Framework. Built on shadcn/ui and Base UI, installed with the shadcn CLI.

## Setup

rapidUI is a shadcn/ui registry. Components are copied into the project as source (`components/ui/*`), not installed as a package. Requires React 19, Tailwind CSS v4 and a `components.json` (run `npx shadcn@latest init` first if it is missing).

1. Apply the Rapid theme (CSS variables, fonts, base styles):
   `npx shadcn@latest init https://rdf.dev.360online.com/r/styles/rapid.json`
2. Add a component:
   `npx shadcn@latest add https://rdf.dev.360online.com/r/button.json`
3. Import it:
   `import { Button } from '@/components/ui/button'`

Optional: register the namespace in `components.json` to use short names (`npx shadcn@latest add @rapid/button`):

```json
{ "registries": { "@rapid": "https://rdf.dev.360online.com/r/{name}.json" } }
```

Rules for agents:
- Install with the shadcn CLI instead of writing components by hand; dependencies between components resolve automatically.
- Use theme tokens (`bg-primary`, `text-muted-foreground`, `border-border`, …) rather than raw colours.
- The theme uses shadcn's CSS variables plus `--success` and `--warning` (with `-foreground`), so any shadcn component or example works unchanged. Use `text-success`, `bg-warning/10` and so on for status colours. Buttons and fields are 40px by default (32px for `sm`), text 14px and badges 12px.
- Components are built on Base UI: compose with the `render` prop (e.g. `<DialogTrigger render={<Button />}>`), there is no `asChild`. Changes from the Radix version: https://rdf.dev.360online.com/docs/base-ui/

## Components

- [Accordion](https://rdf.dev.360online.com/docs/components/accordion/): Vertically stacked, collapsible sections built on Base UI Accordion. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/accordion.json`
- [Alert](https://rdf.dev.360online.com/docs/components/alert/): Inline callout for status messages, with default and destructive variants and an optional action. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/alert.json`
- [Alert Dialog](https://rdf.dev.360online.com/docs/components/alert-dialog/): Modal confirmation dialog that interrupts the user and expects a response. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/alert-dialog.json`
- [Aspect Ratio](https://rdf.dev.360online.com/docs/components/aspect-ratio/): Displays content within a fixed width-to-height ratio. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/aspect-ratio.json`
- [Attachment](https://rdf.dev.360online.com/docs/components/attachment/): File attachment chip with name, size and remove action, for chat and forms. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/attachment.json`
- [Avatar](https://rdf.dev.360online.com/docs/components/avatar/): User image with a text fallback, built on Base UI Avatar. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/avatar.json`
- [Badge](https://rdf.dev.360online.com/docs/components/badge/): Small status or count label with semantic color variants. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/badge.json`
- [Banner](https://rdf.dev.360online.com/docs/components/banner/): Page-wide message at the top of a page, such as planned maintenance or an outage, that can be dismissed. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/banner.json`
- [Breadcrumb](https://rdf.dev.360online.com/docs/components/breadcrumb/): Hierarchical page trail with separators and an overflow ellipsis. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/breadcrumb.json`
- [Bubble](https://rdf.dev.360online.com/docs/components/bubble/): Chat message bubble with incoming and outgoing styles. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/bubble.json`
- [Button](https://rdf.dev.360online.com/docs/components/button/): Button with default, outline, secondary, ghost, destructive and link variants, sm, default and lg sizes plus icon sizes; renders as a link or another element with `render`. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/button.json`
- [Button Group](https://rdf.dev.360online.com/docs/components/button-group/): Groups related buttons into a single attached control, with optional separators. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/button-group.json`
- [Calendar](https://rdf.dev.360online.com/docs/components/calendar/): Date grid built on react-day-picker, used by the date pickers. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/calendar.json`
- [Card](https://rdf.dev.360online.com/docs/components/card/): Surface container with header, title, description, content and footer slots. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/card.json`
- [Carousel](https://rdf.dev.360online.com/docs/components/carousel/): Swipeable carousel with previous/next controls, built on Embla. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/carousel.json`
- [Chart](https://rdf.dev.360online.com/docs/components/chart/): Recharts wrapper with theme-aware colors, tooltips and legends. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/chart.json`
- [Checkbox](https://rdf.dev.360online.com/docs/components/checkbox/): Accessible checkbox with checked, unchecked and indeterminate states. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/checkbox.json`
- [Collapsible](https://rdf.dev.360online.com/docs/components/collapsible/): Show and hide a single region of content, built on Base UI Collapsible. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/collapsible.json`
- [Color Picker](https://rdf.dev.360online.com/docs/components/color-picker/): Color picker with a saturation/hue area and hex input in a popover. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/color-picker.json`
- [Combobox](https://rdf.dev.360online.com/docs/components/combobox/): Composable combobox with a compound API built on Popover and Command. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/combobox.json`
- [Command](https://rdf.dev.360online.com/docs/components/command/): Command menu / searchable list built on cmdk, usable inline or in a dialog. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/command.json`
- [Context Menu](https://rdf.dev.360online.com/docs/components/context-menu/): Right-click menu with items, checkboxes, radio items and submenus. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/context-menu.json`
- [Data Table](https://rdf.dev.360online.com/docs/components/data-table/): TanStack Table wrapper with toolbar, faceted filters, pagination, column visibility and resizing. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/data-table.json`
- [Date Time Picker](https://rdf.dev.360online.com/docs/components/datetime-picker/): Combined date and time picker in a popover. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/datetime-picker.json`
- [Description List](https://rdf.dev.360online.com/docs/components/description-list/): Key–value pairs such as applicant, property and fee, as valid dl markup in stacked, side-by-side or grid layouts. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/description-list.json`
- [Dialog](https://rdf.dev.360online.com/docs/components/dialog/): Modal window with header, footer, title and description, built on Base UI Dialog. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/dialog.json`
- [Direction](https://rdf.dev.360online.com/docs/components/direction/): Provider that sets left-to-right or right-to-left direction for its subtree. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/direction.json`
- [Drawer](https://rdf.dev.360online.com/docs/components/drawer/): Panel that slides in from an edge of the screen and can be swiped closed, built on Base UI Drawer. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/drawer.json`
- [Dropdown Menu](https://rdf.dev.360online.com/docs/components/dropdown-menu/): Menu triggered by a button, with items, groups, checkboxes, radio items and submenus. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/dropdown-menu.json`
- [Empty](https://rdf.dev.360online.com/docs/components/empty/): Empty state with icon, title, description and actions. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/empty.json`
- [Field](https://rdf.dev.360online.com/docs/components/field/): Accessible form field layout: label, control, description and error, with horizontal and vertical orientations. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/field.json`
- [File Dropzone](https://rdf.dev.360online.com/docs/components/file-dropzone/): Drag-and-drop multi-file uploader with size and type validation, built on react-dropzone. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/file-dropzone.json`
- [File Input](https://rdf.dev.360online.com/docs/components/file-input/): Single file or image input with preview, drag-and-drop and size validation. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/file-input.json`
- [Form](https://rdf.dev.360online.com/docs/components/form/): react-hook-form bindings (`Form`, `FormField`, `FormItem`, `FormMessage`) with accessible labels and errors. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/form.json`
- [Full Calendar](https://rdf.dev.360online.com/docs/components/full-calendar/): Month, week and day calendar for apps that show and schedule events, with a time grid and all-day events. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/full-calendar.json`
- [Hover Card](https://rdf.dev.360online.com/docs/components/hover-card/): Preview card shown when hovering or focusing a link. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/hover-card.json`
- [Input](https://rdf.dev.360online.com/docs/components/input/): Text input with consistent sizing, focus and invalid states. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/input.json`
- [Input Group](https://rdf.dev.360online.com/docs/components/input-group/): Input with leading/trailing addons, buttons and text slots. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/input-group.json`
- [Input OTP](https://rdf.dev.360online.com/docs/components/input-otp/): One-time-password input with individual slots, built on input-otp. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/input-otp.json`
- [Item](https://rdf.dev.360online.com/docs/components/item/): Flexible row for lists: media, title, description and actions, with outline and muted variants. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/item.json`
- [Kbd](https://rdf.dev.360online.com/docs/components/kbd/): Keyboard key and shortcut display. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/kbd.json`
- [Label](https://rdf.dev.360online.com/docs/components/label/): Accessible form label built on Base UI Label. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/label.json`
- [Marker](https://rdf.dev.360online.com/docs/components/marker/): Small status marker (dot, count or label) to annotate other elements. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/marker.json`
- [Menubar](https://rdf.dev.360online.com/docs/components/menubar/): Desktop-style menu bar with menus, submenus, checkboxes and radio items. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/menubar.json`
- [Message](https://rdf.dev.360online.com/docs/components/message/): Chat message layout with avatar, author, content and actions. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/message.json`
- [Message Scroller](https://rdf.dev.360online.com/docs/components/message-scroller/): Scroll container for chat messages that sticks to the bottom as new messages arrive. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/message-scroller.json`
- [Native Select](https://rdf.dev.360online.com/docs/components/native-select/): A styled native HTML select element for simple lists and mobile-friendly forms. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/native-select.json`
- [Navigation Menu](https://rdf.dev.360online.com/docs/components/navigation-menu/): Top-level site navigation with dropdown panels. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/navigation-menu.json`
- [Number Input](https://rdf.dev.360online.com/docs/components/number-input/): Numeric input with increment and decrement buttons and min/max/step. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/number-input.json`
- [Organization Switcher](https://rdf.dev.360online.com/docs/components/organization-switcher/): Shows which organisation the user works in and lets them switch, with optional sub-organisations, search and favourites. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/organization-switcher.json`
- [Pagination](https://rdf.dev.360online.com/docs/components/pagination/): Page navigation with previous/next, page links and ellipsis. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/pagination.json`
- [Popover](https://rdf.dev.360online.com/docs/components/popover/): Floating panel anchored to a trigger, built on Base UI Popover. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/popover.json`
- [Progress](https://rdf.dev.360online.com/docs/components/progress/): Horizontal progress bar built on Base UI Progress. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/progress.json`
- [Questionnaire](https://rdf.dev.360online.com/docs/components/questionnaire/): Step-by-step question flow with single and multiple choice answers. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/questionnaire.json`
- [Radio Group](https://rdf.dev.360online.com/docs/components/radio-group/): Set of mutually exclusive options built on Base UI Radio Group. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/radio-group.json`
- [Resizable](https://rdf.dev.360online.com/docs/components/resizable/): Resizable panel groups with drag handles, built on react-resizable-panels. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/resizable.json`
- [Rich Text Content](https://rdf.dev.360online.com/docs/components/rich-text-content/): Renders HTML produced by the rich text editor with consistent typography. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/rich-text-content.json`
- [Rich Text Editor](https://rdf.dev.360online.com/docs/components/rich-text-editor/): Tiptap rich text editor with formatting toolbar, links, alignment and font size. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/rich-text-editor.json`
- [Scroll Area](https://rdf.dev.360online.com/docs/components/scroll-area/): Custom-styled scroll container built on Base UI Scroll Area. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/scroll-area.json`
- [Select](https://rdf.dev.360online.com/docs/components/select/): Native-feeling select menu built on Base UI Select. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/select.json`
- [Separator](https://rdf.dev.360online.com/docs/components/separator/): Horizontal or vertical divider line. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/separator.json`
- [Sheet](https://rdf.dev.360online.com/docs/components/sheet/): Panel that slides in from a screen edge, built on Base UI Dialog. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/sheet.json`
- [Sidebar](https://rdf.dev.360online.com/docs/components/sidebar/): Composable, collapsible application sidebar with mobile sheet support. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/sidebar.json`
- [Skeleton](https://rdf.dev.360online.com/docs/components/skeleton/): Animated placeholder shown while content loads. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/skeleton.json`
- [Slider](https://rdf.dev.360online.com/docs/components/slider/): Range slider with one or more thumbs, built on Base UI Slider. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/slider.json`
- [Spinner](https://rdf.dev.360online.com/docs/components/spinner/): Loading indicator. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/spinner.json`
- [Stat Card](https://rdf.dev.360online.com/docs/components/stat-card/): A key figure with a label, a trend and a comparison, for dashboards and overviews. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/stat-card.json`
- [Sub Tabs](https://rdf.dev.360online.com/docs/components/sub-tabs/): Secondary, lower-emphasis tabs for nested navigation. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/sub-tabs.json`
- [Switch](https://rdf.dev.360online.com/docs/components/switch/): On/off toggle switch built on Base UI Switch. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/switch.json`
- [Table](https://rdf.dev.360online.com/docs/components/table/): Semantic, styled HTML table primitives. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/table.json`
- [Tabs](https://rdf.dev.360online.com/docs/components/tabs/): Tabbed views built on Base UI Tabs. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/tabs.json`
- [Textarea](https://rdf.dev.360online.com/docs/components/textarea/): Multi-line text input. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/textarea.json`
- [Time Picker](https://rdf.dev.360online.com/docs/components/time-picker/): Time picker: a 24-hour field with hour/minute segments in the style of Input, standalone segment inputs, and a visual popover variant. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/time-picker.json`
- [Toast](https://rdf.dev.360online.com/docs/components/toast/): Short notifications that appear over the page, built on Base UI Toast, with types, actions and loading states. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/toast.json`
- [Toggle](https://rdf.dev.360online.com/docs/components/toggle/): Two-state button built on Base UI Toggle. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/toggle.json`
- [Toggle Group](https://rdf.dev.360online.com/docs/components/toggle-group/): Group of toggles with single or multiple selection. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/toggle-group.json`
- [Tooltip](https://rdf.dev.360online.com/docs/components/tooltip/): Hover/focus hint built on Base UI Tooltip. Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/tooltip.json`

## Themes

- [Rapid theme](https://rdf.dev.360online.com/r/styles/rapid.json): rapidUI colour tokens, light and dark.
- [Neutral theme](https://rdf.dev.360online.com/r/styles/neutral.json): Zinc-based neutral palette.

## Optional

- [How the registry works](https://rdf.dev.360online.com/docs/registry/): What an install does, how to get updates and why rapidUI is a registry and not an npm package.
- [Changelog](https://rdf.dev.360online.com/docs/changelog/): What changed in each release.
- [Migrating to Base UI](https://rdf.dev.360online.com/docs/base-ui/): What changed when rapidUI moved from Radix to Base UI.
- [llms-full.txt](https://rdf.dev.360online.com/llms-full.txt): Every component's documentation and full source code in one file.
- [Registry index](https://rdf.dev.360online.com/r/registry.json): Machine-readable list of all items.