@roiui

Roi UI (named after the Greek word for flow) is an open-source component library built on Base UI primitives, styled with both CSS Modules and Tailwind CSS, with tasteful Motion (Framer Motion) animations. Components (40+): Accordion, Alert, AlertDialog, Autocomplete, Avatar, Badge, Button, Card, Carousel, Charts, Checkbox, CheckboxGroup, Collapsible, Combobox, Command, ContextMenu, CopyButton, Dialog, Drawer, DropdownMenu, ExpandableCard, Field, Fieldset, Form, Input, Kbd, Menubar, Meter, NavigationMenu, NumberField, OTP Field, Popover, PreviewCard, Progress, Radio, ScrollArea, Select, Separator, Slider, Switch, Table, Tabs, Toast, Toggle, ToggleGroup, Toolbar, Tooltip. Also includes layout Blocks. Fully free and open-source (MIT). Use for: projects preferring Base UI over Radix UI that want subtle, well-crafted animations and a choice of CSS Modules or Tailwind styling.

124 components react shadcn-cli

website ↗ github ↗ registry ↗ agent brief (.md) ↗ clone source (124 .json) ↗ clone brief (PROMPT.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://roiui.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://roiui.com/r/registry.json

bun bunx shadcn@latest add https://roiui.com/r/registry.json

fetch registry curl -s https://roiui.com/r/registry.json

Components

124 total

utils item

npx shadcn@latest add https://roiui.com/r/utils.json

utils-tailwind item

npx shadcn@latest add https://roiui.com/r/utils-tailwind.json

Accordion item

A collapsible content component.

npx shadcn@latest add https://roiui.com/r/accordion.json

Alert Dialog item

A modal dialog that interrupts the user with important content.

npx shadcn@latest add https://roiui.com/r/alert-dialog.json

Autocomplete item

An input that suggests options as you type.

npx shadcn@latest add https://roiui.com/r/autocomplete.json

Alert item

A component for displaying important messages to users.

npx shadcn@latest add https://roiui.com/r/alert.json

Avatar item

An image element with a fallback for representing the user.

npx shadcn@latest add https://roiui.com/r/avatar.json

Background item

A background component with various visual effects.

npx shadcn@latest add https://roiui.com/r/background.json

Badge item

A small count and labeling component.

npx shadcn@latest add https://roiui.com/r/badge.json

Button item

A button component.

npx shadcn@latest add https://roiui.com/r/button.json

Card item

A container component for displaying content.

npx shadcn@latest add https://roiui.com/r/card.json

Calendar item

A date picker calendar component.

npx shadcn@latest add https://roiui.com/r/calendar.json

Carousel item

A slideshow component for cycling through content.

npx shadcn@latest add https://roiui.com/r/carousel.json

Checkbox item

A control that allows users to select one or more options from a set.

npx shadcn@latest add https://roiui.com/r/checkbox.json

Checkbox Group item

A set of checkboxes with shared state management for selecting multiple options.

npx shadcn@latest add https://roiui.com/r/checkbox-group.json

Collapsible item

An expandable/collapsible panel controlled by a button.

npx shadcn@latest add https://roiui.com/r/collapsible.json

Combobox item

A searchable select component.

npx shadcn@latest add https://roiui.com/r/combobox.json

Command item

A command palette component.

npx shadcn@latest add https://roiui.com/r/command.json

Context Menu item

A menu component triggered by right-click or long press.

npx shadcn@latest add https://roiui.com/r/context-menu.json

Copy Button item

A button component with animated copy-to-clipboard functionality.

npx shadcn@latest add https://roiui.com/r/copy-button.json

Dialog item

A modal dialog component.

npx shadcn@latest add https://roiui.com/r/dialog.json

Drawer item

A panel that slides in from the edge of the screen with swipe-to-dismiss gestures.

npx shadcn@latest add https://roiui.com/r/drawer.json

Dropdown Menu item

A dropdown menu component.

npx shadcn@latest add https://roiui.com/r/dropdown-menu.json

Expandable Card item

A card component that can expand to show more content.

npx shadcn@latest add https://roiui.com/r/expandable-card.json

Expandable Card Carousel item

A carousel of expandable cards showcasing core philosophies.

npx shadcn@latest add https://roiui.com/r/expandable-card-carousel.json

Field item

A form field component with label and validation.

npx shadcn@latest add https://roiui.com/r/field.json

Fieldset item

A native fieldset element with an easily stylable legend.

npx shadcn@latest add https://roiui.com/r/fieldset.json

Form item

A form component for handling user input.

npx shadcn@latest add https://roiui.com/r/form.json

Input item

An input component for user text entry.

npx shadcn@latest add https://roiui.com/r/input.json

Like Button item

A button component for liking content.

npx shadcn@latest add https://roiui.com/r/like-button.json

Kbd item

A component for displaying keyboard keys and shortcuts.

npx shadcn@latest add https://roiui.com/r/kbd.json

Menubar item

A horizontal menu bar component.

npx shadcn@latest add https://roiui.com/r/menubar.json

Meter item

A graphical display of a numeric value within a range.

npx shadcn@latest add https://roiui.com/r/meter.json

Navigation Menu item

A navigation menu component.

npx shadcn@latest add https://roiui.com/r/navigation-menu.json

OTP Field item

A one-time password and verification code entry field.

npx shadcn@latest add https://roiui.com/r/otp-field.json

Popover item

A floating content container.

npx shadcn@latest add https://roiui.com/r/popover.json

Radio item

A customizable radio button component for selecting one option from a group.

npx shadcn@latest add https://roiui.com/r/radio.json

Scroll Area item

A native scroll container with custom scrollbars.

npx shadcn@latest add https://roiui.com/r/scroll-area.json

Select item

A customizable select component for choosing from a list of options.

npx shadcn@latest add https://roiui.com/r/select.json

Separator item

A separator element accessible to screen readers.

npx shadcn@latest add https://roiui.com/r/separator.json

Slider item

A slider component for selecting values from a range.

npx shadcn@latest add https://roiui.com/r/slider.json

Switch item

A toggle switch component.

npx shadcn@latest add https://roiui.com/r/switch.json

Tabs item

A set of layered sections of content.

npx shadcn@latest add https://roiui.com/r/tabs.json

Table item

A responsive table component for displaying structured tabular data.

npx shadcn@latest add https://roiui.com/r/table.json

Toast item

A succinct message notification.

npx shadcn@latest add https://roiui.com/r/toast.json

Toggle item

A two-state button that can be turned on or off.

npx shadcn@latest add https://roiui.com/r/toggle.json

Toggle Group item

A set of two-state buttons that can be toggled on or off with shared state management.

npx shadcn@latest add https://roiui.com/r/toggle-group.json

Toolbar item

A toolbar component for grouping action buttons and controls.

npx shadcn@latest add https://roiui.com/r/toolbar.json

Tooltip item

A popup that displays information on hover.

npx shadcn@latest add https://roiui.com/r/tooltip.json

Chart item

Composable chart components for building any type of data visualization with Recharts primitives.

npx shadcn@latest add https://roiui.com/r/chart.json

Progress item

Displays the status of a task that takes a long time.

npx shadcn@latest add https://roiui.com/r/progress.json

Prop Table item

An expandable table for documenting component props.

npx shadcn@latest add https://roiui.com/r/prop-table.json

Number Field item

A numeric input element with increment/decrement buttons and a scrub area.

npx shadcn@latest add https://roiui.com/r/number-field.json

Slider item

A range input component for selecting values within a given range.

npx shadcn@latest add https://roiui.com/r/slider.json

Card Login item

A login card component with email/password fields and social login options.

npx shadcn@latest add https://roiui.com/r/card-login.json

Card Task item

A task card component with badges, avatars, and action menu.

npx shadcn@latest add https://roiui.com/r/card-task.json

Card Traffic item

A website traffic card component with line chart and statistics.

npx shadcn@latest add https://roiui.com/r/card-traffic.json

Card Image Section item

A section with 4 image cards in a masonry layout.

npx shadcn@latest add https://roiui.com/r/card-image-section.json

AI Chat item

An AI chat input component with mode selector and action buttons.

npx shadcn@latest add https://roiui.com/r/ai-chat.json

Progress Card item

A file upload progress card with multiple file tracking.

npx shadcn@latest add https://roiui.com/r/card-progress.json

Pricing Section item

A pricing section with three plan cards.

npx shadcn@latest add https://roiui.com/r/pricing-section.json

Kanban Board item

A full-featured kanban board with drag-and-drop functionality.

npx shadcn@latest add https://roiui.com/r/kanban-board.json

Accordion (Tailwind) item

A collapsible content component.

npx shadcn@latest add https://roiui.com/r/accordion-tailwind.json

Alert (Tailwind) item

A component for displaying important messages to users.

npx shadcn@latest add https://roiui.com/r/alert-tailwind.json

Alert Dialog (Tailwind) item

A modal dialog that interrupts the user with important content.

npx shadcn@latest add https://roiui.com/r/alert-dialog-tailwind.json

Autocomplete (Tailwind) item

An input that suggests options as you type.

npx shadcn@latest add https://roiui.com/r/autocomplete-tailwind.json

Avatar (Tailwind) item

An image element with a fallback for representing the user.

npx shadcn@latest add https://roiui.com/r/avatar-tailwind.json

Background (Tailwind) item

A background component with various visual effects.

npx shadcn@latest add https://roiui.com/r/background-tailwind.json

Badge (Tailwind) item

A small count and labeling component.

npx shadcn@latest add https://roiui.com/r/badge-tailwind.json

Button (Tailwind) item

A button component.

npx shadcn@latest add https://roiui.com/r/button-tailwind.json

Card (Tailwind) item

A container component for displaying content.

npx shadcn@latest add https://roiui.com/r/card-tailwind.json

Calendar (Tailwind) item

A date picker calendar component.

npx shadcn@latest add https://roiui.com/r/calendar-tailwind.json

Carousel (Tailwind) item

A slideshow component for cycling through content.

npx shadcn@latest add https://roiui.com/r/carousel-tailwind.json

Checkbox (Tailwind) item

A control that allows users to select one or more options from a set.

npx shadcn@latest add https://roiui.com/r/checkbox-tailwind.json

Checkbox Group (Tailwind) item

A set of checkboxes with shared state management for selecting multiple options.

npx shadcn@latest add https://roiui.com/r/checkbox-group-tailwind.json

Collapsible (Tailwind) item

An expandable/collapsible panel controlled by a button.

npx shadcn@latest add https://roiui.com/r/collapsible-tailwind.json

Combobox (Tailwind) item

A searchable select component.

npx shadcn@latest add https://roiui.com/r/combobox-tailwind.json

Command (Tailwind) item

A command palette component.

npx shadcn@latest add https://roiui.com/r/command-tailwind.json

Context Menu (Tailwind) item

A menu component triggered by right-click or long press.

npx shadcn@latest add https://roiui.com/r/context-menu-tailwind.json

Copy Button (Tailwind) item

A button component with animated copy-to-clipboard functionality.

npx shadcn@latest add https://roiui.com/r/copy-button-tailwind.json

Dialog (Tailwind) item

A modal dialog component.

npx shadcn@latest add https://roiui.com/r/dialog-tailwind.json

Drawer (Tailwind) item

A panel that slides in from the edge of the screen with swipe-to-dismiss gestures.

npx shadcn@latest add https://roiui.com/r/drawer-tailwind.json

Dropdown Menu (Tailwind) item

A dropdown menu component.

npx shadcn@latest add https://roiui.com/r/dropdown-menu-tailwind.json

Field (Tailwind) item

A form field component with label and validation.

npx shadcn@latest add https://roiui.com/r/field-tailwind.json

Fieldset (Tailwind) item

A native fieldset element with an easily stylable legend.

npx shadcn@latest add https://roiui.com/r/fieldset-tailwind.json

Form (Tailwind) item

A form component for handling user input.

npx shadcn@latest add https://roiui.com/r/form-tailwind.json

Input (Tailwind) item

An input component for user text entry.

npx shadcn@latest add https://roiui.com/r/input-tailwind.json

Like Button (Tailwind) item

A button component for liking content.

npx shadcn@latest add https://roiui.com/r/like-button-tailwind.json

Kbd (Tailwind) item

A component for displaying keyboard keys and shortcuts.

npx shadcn@latest add https://roiui.com/r/kbd-tailwind.json

Menubar (Tailwind) item

A horizontal menu bar component.

npx shadcn@latest add https://roiui.com/r/menubar-tailwind.json

Meter (Tailwind) item

A graphical display of a numeric value within a range.

npx shadcn@latest add https://roiui.com/r/meter-tailwind.json

Navigation Menu (Tailwind) item

A navigation menu component.

npx shadcn@latest add https://roiui.com/r/navigation-menu-tailwind.json

OTP Field (Tailwind) item

A one-time password and verification code entry field.

npx shadcn@latest add https://roiui.com/r/otp-field-tailwind.json

Number Field (Tailwind) item

A numeric input element with increment/decrement buttons and a scrub area.

npx shadcn@latest add https://roiui.com/r/number-field-tailwind.json

Popover (Tailwind) item

A floating content container.

npx shadcn@latest add https://roiui.com/r/popover-tailwind.json

Preview Card (Tailwind) item

A floating preview card component.

npx shadcn@latest add https://roiui.com/r/preview-card-tailwind.json

Progress (Tailwind) item

Displays the status of a task that takes a long time.

npx shadcn@latest add https://roiui.com/r/progress-tailwind.json

Prop Table (Tailwind) item

An expandable table for documenting component props.

npx shadcn@latest add https://roiui.com/r/prop-table-tailwind.json

Radio (Tailwind) item

A customizable radio button component for selecting one option from a group.

npx shadcn@latest add https://roiui.com/r/radio-tailwind.json

Scroll Area (Tailwind) item

A native scroll container with custom scrollbars.

npx shadcn@latest add https://roiui.com/r/scroll-area-tailwind.json

Select (Tailwind) item

A customizable select component for choosing from a list of options.

npx shadcn@latest add https://roiui.com/r/select-tailwind.json

Separator (Tailwind) item

A separator element accessible to screen readers.

npx shadcn@latest add https://roiui.com/r/separator-tailwind.json

Slider (Tailwind) item

A slider component for selecting values from a range.

npx shadcn@latest add https://roiui.com/r/slider-tailwind.json

Switch (Tailwind) item

A toggle switch component.

npx shadcn@latest add https://roiui.com/r/switch-tailwind.json

Tabs (Tailwind) item

A set of layered sections of content.

npx shadcn@latest add https://roiui.com/r/tabs-tailwind.json

Table (Tailwind) item

A responsive table component for displaying structured tabular data.

npx shadcn@latest add https://roiui.com/r/table-tailwind.json

Toast (Tailwind) item

A succinct message notification.

npx shadcn@latest add https://roiui.com/r/toast-tailwind.json

Toggle (Tailwind) item

A two-state button that can be turned on or off.

npx shadcn@latest add https://roiui.com/r/toggle-tailwind.json

Toggle Group (Tailwind) item

A set of two-state buttons that can be toggled on or off with shared state management.

npx shadcn@latest add https://roiui.com/r/toggle-group-tailwind.json

Tooltip (Tailwind) item

A popup that displays information on hover.

npx shadcn@latest add https://roiui.com/r/tooltip-tailwind.json

Toolbar (Tailwind) item

A toolbar component for grouping action buttons and controls.

npx shadcn@latest add https://roiui.com/r/toolbar-tailwind.json

Chart (Tailwind) item

Composable chart components for building any type of data visualization with Recharts primitives.

npx shadcn@latest add https://roiui.com/r/chart-tailwind.json

AI Chat (Tailwind) item

An AI chat input component with mode selector and action buttons.

npx shadcn@latest add https://roiui.com/r/ai-chat-tailwind.json

Progress Card (Tailwind) item

A file upload progress card with multiple file tracking.

npx shadcn@latest add https://roiui.com/r/card-progress-tailwind.json

Card Image Section (Tailwind) item

A section with 4 image cards in a masonry layout.

npx shadcn@latest add https://roiui.com/r/card-image-section-tailwind.json

Card Login (Tailwind) item

A login card component with email/password fields and social login options.

npx shadcn@latest add https://roiui.com/r/card-login-tailwind.json

Card Task (Tailwind) item

A task card component with badges, avatars, and action menu.

npx shadcn@latest add https://roiui.com/r/card-task-tailwind.json

Card Traffic (Tailwind) item

A website traffic card component with line chart and statistics.

npx shadcn@latest add https://roiui.com/r/card-traffic-tailwind.json

Expandable Card (Tailwind) item

A card component that can expand to show more content.

npx shadcn@latest add https://roiui.com/r/expandable-card-tailwind.json

Expandable Card Carousel (Tailwind) item

A carousel of expandable cards showcasing core philosophies.

npx shadcn@latest add https://roiui.com/r/expandable-card-carousel-tailwind.json

Pricing Section (Tailwind) item

A pricing section with three plan cards.

npx shadcn@latest add https://roiui.com/r/pricing-section-tailwind.json

Kanban Board (Tailwind) item

A full-featured kanban board with drag-and-drop functionality.

npx shadcn@latest add https://roiui.com/r/kanban-board-tailwind.json

Expandable Card Spread item

A spread of expandable cards with mobile swipe-to-cycle stack view.

npx shadcn@latest add https://roiui.com/r/expandable-card-spread.json

Expandable Card Spread (Tailwind) item

A spread of expandable cards with mobile swipe-to-cycle stack view.

npx shadcn@latest add https://roiui.com/r/expandable-card-spread-tailwind.json