@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.

60 components react shadcn-cli

website ↗ github ↗ registry ↗

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

60 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