Dev Design Library

ROI UI components

A UI library designed to keep you in the flow

Components
59
Framework
React
Stack
React, TypeScript, CSS Modules
GitHub stars
51
Source
https://github.com/preetecool/roi-ui
Website
https://roiui.com
Install
npx shadcn@latest add @roiui/{name}

All ROI UI components

  • Accordion: A collapsible content component.
  • AI Composer: An AI chat input component with mode selector and action buttons.
  • Alert: A component for displaying important messages to users.
  • Alert Dialog: A modal dialog that interrupts the user with important content.
  • Autocomplete: An input that suggests options as you type.
  • Avatar: An image element with a fallback for representing the user.
  • Background: A background component with various visual effects.
  • Badge: A small count and labeling component.
  • Button: A button component.
  • Calendar: A date picker calendar component.
  • Card: A container component for displaying content.
  • Card Image Section: A section with 4 image cards in a masonry layout.
  • Login Card: A login card component with email/password fields and social login options.
  • Progress Card: A file upload progress card with multiple file tracking.
  • Task Card: A task card component with badges, avatars, and action menu.
  • Traffic Card: A website traffic card component with line chart and statistics.
  • Carousel: A slideshow component for cycling through content.
  • Chart: Composable chart components for building any type of data visualization with Recharts primitives.
  • Checkbox: A control that allows users to select one or more options from a set.
  • Checkbox Group: A set of checkboxes with shared state management for selecting multiple options.
  • Collapsible: An expandable/collapsible panel controlled by a button.
  • Combobox: A searchable select component.
  • Command: A command palette component.
  • Context Menu: A menu component triggered by right-click or long press.
  • Copy Button: A button component with animated copy-to-clipboard functionality.
  • Dialog: A modal dialog component.
  • Drawer: A panel that slides in from the edge of the screen with swipe-to-dismiss gestures.
  • Dropdown Menu: A dropdown menu component.
  • Expandable Card: A card component that can expand to show more content.
  • Expandable Card Carousel: A carousel of expandable cards showcasing core philosophies.
  • Expandable Card Spread: A spread of expandable cards with mobile swipe-to-cycle stack view.
  • Field: A form field component with label and validation.
  • Fieldset: A native fieldset element with an easily stylable legend.
  • Form: A form component for handling user input.
  • Input: An input component for user text entry.
  • Kbd: A component for displaying keyboard keys and shortcuts.
  • Like Button: A button component for liking content.
  • Menubar: A horizontal menu bar component.
  • Meter: A graphical display of a numeric value within a range.
  • Navigation Menu: A navigation menu component.
  • Number Field: A numeric input element with increment/decrement buttons and a scrub area.
  • OTP Field: A one-time password and verification code entry field.
  • Popover: A floating content container.
  • Pricing Section: A pricing section with three plan cards.
  • Progress: Displays the status of a task that takes a long time.
  • Prop Table: An expandable table for documenting component props.
  • Radio: A customizable radio button component for selecting one option from a group.
  • Scroll Area: A native scroll container with custom scrollbars.
  • Select: A customizable select component for choosing from a list of options.
  • Separator: A separator element accessible to screen readers.
  • Slider: A slider component for selecting values from a range.
  • Switch: A toggle switch component.
  • Table: A responsive table component for displaying structured tabular data.
  • Tabs: A set of layered sections of content.
  • Toast: A succinct message notification.
  • Toggle: A two-state button that can be turned on or off.
  • Toggle Group: A set of two-state buttons that can be toggled on or off with shared state management.
  • Toolbar: A toolbar component for grouping action buttons and controls.
  • Tooltip: A popup that displays information on hover.

Browse by category