---
name: "@roiui"
slug: "roiui"
description: "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."
category: "Component library (general)"
tags: ["aesthetic", "ai", "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "components", "dashboard", "design-system", "forms", "hooks", "loaders", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: null
author: "preetecool"
website: "https://roiui.com"
github: "https://github.com/preetecool/roi-ui"
registry: "https://roiui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 51
component_count: 124
generated_at: "2026-07-28T08:00:50.948Z"
---

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

## Links

- Website: https://roiui.com
- GitHub: https://github.com/preetecool/roi-ui
- Registry JSON: https://roiui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/roiui
- This file: https://sh4dcn.vercel.app/md/roiui.md

## Install

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

## Components (124)

| name | type | description | install |
| --- | --- | --- | --- |
| utils | registry:item | — | `npx shadcn@latest add https://roiui.com/r/utils.json` |
| utils-tailwind | registry:item | — | `npx shadcn@latest add https://roiui.com/r/utils-tailwind.json` |
| accordion | registry:item | A collapsible content component. | `npx shadcn@latest add https://roiui.com/r/accordion.json` |
| alert-dialog | registry:item | A modal dialog that interrupts the user with important content. | `npx shadcn@latest add https://roiui.com/r/alert-dialog.json` |
| autocomplete | registry:item | An input that suggests options as you type. | `npx shadcn@latest add https://roiui.com/r/autocomplete.json` |
| alert | registry:item | A component for displaying important messages to users. | `npx shadcn@latest add https://roiui.com/r/alert.json` |
| avatar | registry:item | An image element with a fallback for representing the user. | `npx shadcn@latest add https://roiui.com/r/avatar.json` |
| background | registry:item | A background component with various visual effects. | `npx shadcn@latest add https://roiui.com/r/background.json` |
| badge | registry:item | A small count and labeling component. | `npx shadcn@latest add https://roiui.com/r/badge.json` |
| button | registry:item | A button component. | `npx shadcn@latest add https://roiui.com/r/button.json` |
| card | registry:item | A container component for displaying content. | `npx shadcn@latest add https://roiui.com/r/card.json` |
| calendar | registry:item | A date picker calendar component. | `npx shadcn@latest add https://roiui.com/r/calendar.json` |
| carousel | registry:item | A slideshow component for cycling through content. | `npx shadcn@latest add https://roiui.com/r/carousel.json` |
| checkbox | registry: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 | registry: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 | registry:item | An expandable/collapsible panel controlled by a button. | `npx shadcn@latest add https://roiui.com/r/collapsible.json` |
| combobox | registry:item | A searchable select component. | `npx shadcn@latest add https://roiui.com/r/combobox.json` |
| command | registry:item | A command palette component. | `npx shadcn@latest add https://roiui.com/r/command.json` |
| context-menu | registry:item | A menu component triggered by right-click or long press. | `npx shadcn@latest add https://roiui.com/r/context-menu.json` |
| copy-button | registry:item | A button component with animated copy-to-clipboard functionality. | `npx shadcn@latest add https://roiui.com/r/copy-button.json` |
| dialog | registry:item | A modal dialog component. | `npx shadcn@latest add https://roiui.com/r/dialog.json` |
| drawer | registry: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 | registry:item | A dropdown menu component. | `npx shadcn@latest add https://roiui.com/r/dropdown-menu.json` |
| expandable-card | registry: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 | registry:item | A carousel of expandable cards showcasing core philosophies. | `npx shadcn@latest add https://roiui.com/r/expandable-card-carousel.json` |
| field | registry:item | A form field component with label and validation. | `npx shadcn@latest add https://roiui.com/r/field.json` |
| fieldset | registry:item | A native fieldset element with an easily stylable legend. | `npx shadcn@latest add https://roiui.com/r/fieldset.json` |
| form | registry:item | A form component for handling user input. | `npx shadcn@latest add https://roiui.com/r/form.json` |
| input | registry:item | An input component for user text entry. | `npx shadcn@latest add https://roiui.com/r/input.json` |
| like-button | registry:item | A button component for liking content. | `npx shadcn@latest add https://roiui.com/r/like-button.json` |
| kbd | registry:item | A component for displaying keyboard keys and shortcuts. | `npx shadcn@latest add https://roiui.com/r/kbd.json` |
| menubar | registry:item | A horizontal menu bar component. | `npx shadcn@latest add https://roiui.com/r/menubar.json` |
| meter | registry:item | A graphical display of a numeric value within a range. | `npx shadcn@latest add https://roiui.com/r/meter.json` |
| navigation-menu | registry:item | A navigation menu component. | `npx shadcn@latest add https://roiui.com/r/navigation-menu.json` |
| otp-field | registry:item | A one-time password and verification code entry field. | `npx shadcn@latest add https://roiui.com/r/otp-field.json` |
| popover | registry:item | A floating content container. | `npx shadcn@latest add https://roiui.com/r/popover.json` |
| radio | registry: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 | registry:item | A native scroll container with custom scrollbars. | `npx shadcn@latest add https://roiui.com/r/scroll-area.json` |
| select | registry:item | A customizable select component for choosing from a list of options. | `npx shadcn@latest add https://roiui.com/r/select.json` |
| separator | registry:item | A separator element accessible to screen readers. | `npx shadcn@latest add https://roiui.com/r/separator.json` |
| slider | registry:item | A slider component for selecting values from a range. | `npx shadcn@latest add https://roiui.com/r/slider.json` |
| switch | registry:item | A toggle switch component. | `npx shadcn@latest add https://roiui.com/r/switch.json` |
| tabs | registry:item | A set of layered sections of content. | `npx shadcn@latest add https://roiui.com/r/tabs.json` |
| table | registry:item | A responsive table component for displaying structured tabular data. | `npx shadcn@latest add https://roiui.com/r/table.json` |
| toast | registry:item | A succinct message notification. | `npx shadcn@latest add https://roiui.com/r/toast.json` |
| toggle | registry:item | A two-state button that can be turned on or off. | `npx shadcn@latest add https://roiui.com/r/toggle.json` |
| toggle-group | registry: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 | registry:item | A toolbar component for grouping action buttons and controls. | `npx shadcn@latest add https://roiui.com/r/toolbar.json` |
| tooltip | registry:item | A popup that displays information on hover. | `npx shadcn@latest add https://roiui.com/r/tooltip.json` |
| chart | registry: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 | registry:item | Displays the status of a task that takes a long time. | `npx shadcn@latest add https://roiui.com/r/progress.json` |
| prop-table | registry:item | An expandable table for documenting component props. | `npx shadcn@latest add https://roiui.com/r/prop-table.json` |
| number-field | registry: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 | registry:item | A range input component for selecting values within a given range. | `npx shadcn@latest add https://roiui.com/r/slider.json` |
| card-login | registry: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 | registry:item | A task card component with badges, avatars, and action menu. | `npx shadcn@latest add https://roiui.com/r/card-task.json` |
| card-traffic | registry: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 | registry: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 | registry:item | An AI chat input component with mode selector and action buttons. | `npx shadcn@latest add https://roiui.com/r/ai-chat.json` |
| card-progress | registry:item | A file upload progress card with multiple file tracking. | `npx shadcn@latest add https://roiui.com/r/card-progress.json` |
| pricing-section | registry:item | A pricing section with three plan cards. | `npx shadcn@latest add https://roiui.com/r/pricing-section.json` |
| kanban-board | registry:item | A full-featured kanban board with drag-and-drop functionality. | `npx shadcn@latest add https://roiui.com/r/kanban-board.json` |
| accordion-tailwind | registry:item | A collapsible content component. | `npx shadcn@latest add https://roiui.com/r/accordion-tailwind.json` |
| alert-tailwind | registry:item | A component for displaying important messages to users. | `npx shadcn@latest add https://roiui.com/r/alert-tailwind.json` |
| alert-dialog-tailwind | registry: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 | registry:item | An input that suggests options as you type. | `npx shadcn@latest add https://roiui.com/r/autocomplete-tailwind.json` |
| avatar-tailwind | registry:item | An image element with a fallback for representing the user. | `npx shadcn@latest add https://roiui.com/r/avatar-tailwind.json` |
| background-tailwind | registry:item | A background component with various visual effects. | `npx shadcn@latest add https://roiui.com/r/background-tailwind.json` |
| badge-tailwind | registry:item | A small count and labeling component. | `npx shadcn@latest add https://roiui.com/r/badge-tailwind.json` |
| button-tailwind | registry:item | A button component. | `npx shadcn@latest add https://roiui.com/r/button-tailwind.json` |
| card-tailwind | registry:item | A container component for displaying content. | `npx shadcn@latest add https://roiui.com/r/card-tailwind.json` |
| calendar-tailwind | registry:item | A date picker calendar component. | `npx shadcn@latest add https://roiui.com/r/calendar-tailwind.json` |
| carousel-tailwind | registry:item | A slideshow component for cycling through content. | `npx shadcn@latest add https://roiui.com/r/carousel-tailwind.json` |
| checkbox-tailwind | registry: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 | registry: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 | registry:item | An expandable/collapsible panel controlled by a button. | `npx shadcn@latest add https://roiui.com/r/collapsible-tailwind.json` |
| combobox-tailwind | registry:item | A searchable select component. | `npx shadcn@latest add https://roiui.com/r/combobox-tailwind.json` |
| command-tailwind | registry:item | A command palette component. | `npx shadcn@latest add https://roiui.com/r/command-tailwind.json` |
| context-menu-tailwind | registry: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 | registry:item | A button component with animated copy-to-clipboard functionality. | `npx shadcn@latest add https://roiui.com/r/copy-button-tailwind.json` |
| dialog-tailwind | registry:item | A modal dialog component. | `npx shadcn@latest add https://roiui.com/r/dialog-tailwind.json` |
| drawer-tailwind | registry: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 | registry:item | A dropdown menu component. | `npx shadcn@latest add https://roiui.com/r/dropdown-menu-tailwind.json` |
| field-tailwind | registry:item | A form field component with label and validation. | `npx shadcn@latest add https://roiui.com/r/field-tailwind.json` |
| fieldset-tailwind | registry:item | A native fieldset element with an easily stylable legend. | `npx shadcn@latest add https://roiui.com/r/fieldset-tailwind.json` |
| form-tailwind | registry:item | A form component for handling user input. | `npx shadcn@latest add https://roiui.com/r/form-tailwind.json` |
| input-tailwind | registry:item | An input component for user text entry. | `npx shadcn@latest add https://roiui.com/r/input-tailwind.json` |
| like-button-tailwind | registry:item | A button component for liking content. | `npx shadcn@latest add https://roiui.com/r/like-button-tailwind.json` |
| kbd-tailwind | registry:item | A component for displaying keyboard keys and shortcuts. | `npx shadcn@latest add https://roiui.com/r/kbd-tailwind.json` |
| menubar-tailwind | registry:item | A horizontal menu bar component. | `npx shadcn@latest add https://roiui.com/r/menubar-tailwind.json` |
| meter-tailwind | registry: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 | registry:item | A navigation menu component. | `npx shadcn@latest add https://roiui.com/r/navigation-menu-tailwind.json` |
| otp-field-tailwind | registry: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 | registry: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 | registry:item | A floating content container. | `npx shadcn@latest add https://roiui.com/r/popover-tailwind.json` |
| preview-card-tailwind | registry:item | A floating preview card component. | `npx shadcn@latest add https://roiui.com/r/preview-card-tailwind.json` |
| progress-tailwind | registry: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 | registry:item | An expandable table for documenting component props. | `npx shadcn@latest add https://roiui.com/r/prop-table-tailwind.json` |
| radio-tailwind | registry: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 | registry:item | A native scroll container with custom scrollbars. | `npx shadcn@latest add https://roiui.com/r/scroll-area-tailwind.json` |
| select-tailwind | registry: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 | registry:item | A separator element accessible to screen readers. | `npx shadcn@latest add https://roiui.com/r/separator-tailwind.json` |
| slider-tailwind | registry:item | A slider component for selecting values from a range. | `npx shadcn@latest add https://roiui.com/r/slider-tailwind.json` |
| switch-tailwind | registry:item | A toggle switch component. | `npx shadcn@latest add https://roiui.com/r/switch-tailwind.json` |
| tabs-tailwind | registry:item | A set of layered sections of content. | `npx shadcn@latest add https://roiui.com/r/tabs-tailwind.json` |
| table-tailwind | registry:item | A responsive table component for displaying structured tabular data. | `npx shadcn@latest add https://roiui.com/r/table-tailwind.json` |
| toast-tailwind | registry:item | A succinct message notification. | `npx shadcn@latest add https://roiui.com/r/toast-tailwind.json` |
| toggle-tailwind | registry: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 | registry: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 | registry:item | A popup that displays information on hover. | `npx shadcn@latest add https://roiui.com/r/tooltip-tailwind.json` |
| toolbar-tailwind | registry:item | A toolbar component for grouping action buttons and controls. | `npx shadcn@latest add https://roiui.com/r/toolbar-tailwind.json` |
| chart-tailwind | registry: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 | registry:item | An AI chat input component with mode selector and action buttons. | `npx shadcn@latest add https://roiui.com/r/ai-chat-tailwind.json` |
| card-progress-tailwind | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:item | A pricing section with three plan cards. | `npx shadcn@latest add https://roiui.com/r/pricing-section-tailwind.json` |
| kanban-board-tailwind | registry: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 | registry: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 | registry: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` |

## For AI agents

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