Home
React
Modern & Accessible UI Component Library for React – ROI UI

Modern & Accessible UI Component Library for React – ROI UI

preetecool Added 2 days ago
Live Demo Download Source Code

Description:

ROI UI is a modern UI component library that provides accessible and customizable components for web applications.

It builds upon Base UI, a collection of unstyled components, to deliver a collection of pre-styled components and blocks for developers.

Features

  • 🎭 Motion Integration: Subtle animations powered by Motion and CSS for enhanced user experience.
  • 🎨 Multiple Styling Methods: Supports both CSS Modules and Tailwind CSS for component styling.
  • 🌓 Theme Support: Includes light and dark theme variables with Oklch color space.
  • 📦 Pre-built Blocks: Provides composed UI elements like AI Chat and Transaction History for common patterns.
  • âš¡ Source Code Access: All components include available source code for complete customization.

How to Use It

1. Install the necessary Base UI using your preferred package manager.

npm install @base-ui-components/react

2. Add the ROI UI utilities to your project using shadcn/ui CLI.

npx shadcn@latest add @roiui/utils

3. For components like dialogs and popovers to work correctly, you need to add a portal container to your root layout file.

// layout.tsx
<body>
  <div className="root">
    {children}
  </div>
</body>

4. Add Global Styles to your main CSS file.

/* globals.css */
.root {
  isolation: isolate;
}
@layer fallbacks, dynamic;
.light,
[data-theme="light"],
:root {
  --radius: 0.6rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.2365 0.0078 17.71);
  /* Add the rest of the light theme variables here */
}
.dark,
[data-theme="dark"] {
  --background: oklch(0.15 0 0);
  --foreground: oklch(0.94 0 0);
  /* Add the rest of the dark theme variables here */
}
...

5. Import and use any ROI UI component in your project

// button-demo.tsx
import { Button } from "@/components/ui/button/button";
export default function ButtonDemo() {
  return <Button>Click Me</Button>;
}

6. Available UI components.

  • Accordion: Collapsible content sections with animated transitions.
  • Alert: Contextual feedback messages for user actions.
  • Alert Dialog: Modal dialog requiring user confirmation.
  • Autocomplete: Text input with suggested completion values.
  • Avatar: User profile image with fallback support.
  • Badge: Small status indicators or counting labels.
  • Button: Interactive button element with multiple variants.
  • Card: Container for related content and actions.
  • Carousel: Scrollable element for displaying multiple items.
  • Charts: Data visualization components for analytics.
  • Checkbox: Binary input control for selection states.
  • Checkbox Group: Multiple checkbox management with shared state.
  • Collapsible: Content area with show/hide functionality.
  • Combobox: Select input with filtering and suggestions.
  • Command: Command palette interface for application actions.
  • Context Menu: Right-click triggered contextual options.
  • Copy Button: Element for copying text to clipboard.
  • Dialog: Modal window overlaying primary content.
  • Dropdown Menu: Navigation menu triggered by button interaction.
  • Field: Form input with label and validation messaging.
  • Fieldset: Grouping for related form controls.
  • Form: Container managing form state and submission.
  • Input: Text entry field with various type attributes.
  • Like Button: Toggle button for favoriting content.
  • Menubar: Horizontal navigation menu container.
  • Meter: Progress indicator for measurement values.
  • Navigation Menu: Site navigation with multiple hierarchy levels.
  • Number Field: Input restricted to numerical values.
  • Popover: Floating container displaying contextual content.
  • Preview Card: Content card with image and description.
  • Progress: Linear progress indicator for task completion.
  • Radio: Single selection control from multiple options.
  • Scroll Area: Container with custom scrollbar styling.
  • Select: Dropdown menu for option selection.
  • Separator: Visual divider between content sections.
  • Slider: Input for selecting values from a continuous range.
  • Switch: Toggle control for binary states.
  • Table: Data presentation with rows and columns.
  • Tabs: Interface for switching between content panels.
  • Toast: Temporary notification message display.
  • Toggle: Button with on/off state indication.
  • Toggle Group: Set of related toggle controls.
  • Toolbar: Container for action buttons and controls.
  • Tooltip: Text label appearing on element hover.

7. Available UI blocks.

  • AI Chat: A complete, pre-built interface for implementing conversational AI and chatbot functionalities.
  • Expandable Card: A card block that can reveal additional information or actions upon user interaction.
  • Transaction History: A structured layout designed for displaying a list of financial transactions with relevant details.
  • Image Card: A card block optimized for showcasing images, often including titles, descriptions, or actions.
  • Login Card: A card block that provides a user interface for authentication forms.
  • Task Card: A card block for displaying and managing individual tasks within a list or board.
  • Website Traffic: A component composition for visualizing website traffic data, potentially including charts and statistics.
  • Profile Menu: A pre-built dropdown menu tailored for user profile actions like settings and logout.

Related Resources

  • Base UI: The foundation of ROI UI, providing unstyled, accessible components.
  • Radix UI: A low-level UI component library that focuses on accessibility, customization, and developer experience.
  • shadcn/ui: A collection of re-usable components that you can copy and paste into your apps.

FAQs

Q: How does ROI UI differ from shadcn/ui?
A: ROI UI is heavily inspired by shadcn/ui’s architecture but is built on top of Base UI instead of Radix UI. This provides a different set of underlying primitives and a connection to the MUI ecosystem.

Q: Are the animations customizable?
A: Yes, the animations are implemented using Motion or CSS, and you have the source code to modify them to fit your project’s aesthetic.

Q: Can I use individual components without installing the entire library?
A: Yes, you can import components individually to optimize bundle size.

Add Comment