@redrobui/react

React components for the Redrob AI Design System, built with Vite and Tailwind CSS.

🎨 Live Demo

View Interactive Component Demo →

Explore all components, variants, and design tokens in our interactive Storybook.

Installation

npm install @redrobui/react @redrobui/tailwind-config
# or
yarn add @redrobui/react @redrobui/tailwind-config
# or
pnpm add @redrobui/react @redrobui/tailwind-config

Setup

Quick Setup (Recommended)

Just import the pre-built CSS with all utilities included:

/* src/index.css or src/App.css */
@import '@redrobui/tokens/utilities.css';
@import '@redrobui/react/styles.css';

That's it! All color classes and components are ready to use:

• bg-primary-600, text-primary-600, hover:bg-primary-700
• bg-secondary-600, bg-error-600, bg-success-600
• All component styles included

Advanced Setup (Custom Tailwind Config)

If you want to customize or extend the design system:

1. Configure Tailwind CSS:

// tailwind.config.js
const redrobConfig = require('@redrobui/tailwind-config');

module.exports = {
  presets: [redrobConfig],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@redrobui/react/**/*.{js,ts,jsx,tsx}',
  ],
};

2. Import styles:

/* src/index.css or src/App.css */
@import '@redrobui/react/styles.css';
@import 'tailwindcss';

Components

📝 Form Components

Button

Versatile button component with multiple variants and sizes.

import { Button } from '@redrobui/react';

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// With icons
<Button leftIcon={<Icon />}>With Icon</Button>
<Button rightIcon={<Icon />}>With Icon</Button>

// States
<Button isLoading>Loading</Button>
<Button disabled>Disabled</Button>
<Button fullWidth>Full Width</Button>

Input

Text input component with label, helper text, and error states.

import { Input } from '@redrobui/react';

<Input
  label="Email"
  placeholder="Enter email"
  helperText="We'll never share your email"
  error="This field is required"
  size="md"              // 'sm' | 'md' | 'lg'
  disabled={false}
  type="text"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Textarea

Multi-line text input component.

import { Textarea } from '@redrobui/react';

<Textarea
  placeholder="Enter description..."
  className="min-h-[120px]"
  disabled={false}
  required={false}
/>

Select

Dropdown select component with search and custom options.

import Select from '@redrobui/react/Select';

<Select
  label="Country"
  placeholder="Select a country"
  options={[
    { label: "United States", value: "us" },
    { label: "Canada", value: "ca" },
    { label: "Mexico", value: "mx", disabled: true },
  ]}
  onChange={(option) => console.log(option)}
  error="Please select an option"
  helperText="Choose your country"
/>

Checkbox

Checkbox input with label support.

import { Checkbox } from '@redrobui/react';
import { Label } from '@redrobui/react';

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Radio

Radio button group component.

import { RadioGroup, RadioGroupItem } from '@redrobui/react';
import { Label } from '@redrobui/react';

<RadioGroup defaultValue="option-1">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-1" id="option-1" />
    <Label htmlFor="option-1">Option 1</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-2" id="option-2" />
    <Label htmlFor="option-2">Option 2</Label>
  </div>
</RadioGroup>

Switch

Toggle switch component with multiple sizes.

import { Switch } from '@redrobui/react';
import { Label } from '@redrobui/react';

<div className="flex items-center space-x-2">
  <Switch id="airplane" size="default" /> // 'small' | 'medium' | 'default'
  <Label htmlFor="airplane">Airplane Mode</Label>
</div>

🎨 Layout Components

Card

Container component for content grouping.

import { Card } from '@redrobui/react';

<Card>
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</Card>

Separator

Horizontal or vertical divider.

import { Separator } from '@redrobui/react';

<Separator orientation="horizontal" />
<Separator orientation="vertical" className="h-20" />

Accordion

Collapsible content sections.

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@redrobui/react';

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Tabs

Tabbed navigation component.

import { Tabs } from '@redrobui/react';

<Tabs
  tabs={[
    { label: "Home", icon: <Icon /> },
    { label: "Profile", badge: 3 },
    { label: "Settings", disabled: true },
  ]}
  activeTab={activeTab}
  onTabChange={(index) => setActiveTab(index)}
/>

🎯 Feedback Components

Dialog / Modal

Modal dialog component.

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
} from '@redrobui/react';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
      <DialogDescription>
        Are you sure you want to continue?
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button variant="primary">Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Tooltip

Contextual information on hover.

import { Tooltip, TooltipTrigger, TooltipContent } from '@redrobui/react';

<Tooltip>
  <TooltipTrigger asChild>
    <Button>Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Helpful information</p>
  </TooltipContent>
</Tooltip>

Toast

Toast notification system.

import { ToastProvider, useToast } from '@redrobui/react';

// Wrap your app
<ToastProvider>
  <App />
</ToastProvider>

// Use in components
const { toast } = useToast();

toast({
  title: "Success",
  description: "Your changes have been saved.",
  variant: "success",
});

🔄 Loading & Status Components

Skeleton

Loading placeholder component.

import { Skeleton } from '@redrobui/react';

// Different shapes
<Skeleton className="w-[200px] h-4" />
<Skeleton className="w-12 h-12 rounded-full" />
<Skeleton className="w-[300px] h-24" />

// Card skeleton
<div className="space-y-3">
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
  <Skeleton className="h-20 w-full" />
</div>

Loader

Animated loading spinner.

import { Loader } from '@redrobui/react';

<Loader />

TextLoader

Text with loading animation.

import TextLoader from '@redrobui/react/TextLoader';

<TextLoader text="Loading..." spinner={true} />

Tag

Status and label tags.

import Tag from '@redrobui/react/Tag';

<Tag variant="completed" text="Done" />
<Tag variant="pending" text="In Progress" />
<Tag variant="declined" text="Rejected" />
<Tag variant="draft" text="Draft" />
<Tag variant="accepted" text="Approved" />
<Tag variant="soon" text="Coming Soon" />

// With icon
<Tag
  variant="completed"
  text="Done"
  startAdornment={<CheckIcon className="w-3 h-3" />}
/>

🧭 Navigation Components

Breadcrumb

Hierarchical navigation trail.

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@redrobui/react';

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Components</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Pagination

Page navigation component.

import { Pagination } from '@redrobui/react';

<Pagination
  currentPage={currentPage}
  totalPages={totalPages}
  onPageChange={(page) => setCurrentPage(page)}
/>

👤 Display Components

Avatar

User avatar with fallback.

import { Avatar, AvatarImage, AvatarFallback } from '@redrobui/react';

<Avatar>
  <AvatarImage src="https://example.com/avatar.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

// Different sizes
<Avatar className="h-8 w-8">
  <AvatarImage src="..." />
  <AvatarFallback>SM</AvatarFallback>
</Avatar>

Table

Data table component with sorting and pagination.

import { Table } from '@redrobui/react';

<Table
  columns={[
    { header: "Name", accessor: "name" },
    { header: "Email", accessor: "email" },
    { header: "Role", accessor: "role" },
  ]}
  data={[
    { name: "John Doe", email: "[email protected]", role: "Admin" },
    { name: "Jane Smith", email: "[email protected]", role: "User" },
  ]}
/>

🎛️ Advanced Components

Dropdown Menu

Contextual menu with actions.

import { DropdownMenu } from '@redrobui/react';

<DropdownMenu
  trigger={<Button>Options</Button>}
  items={[
    { label: "Edit", onClick: () => {} },
    { label: "Delete", onClick: () => {}, variant: "danger" },
  ]}
/>

Popover

Floating content container.

import { Popover } from '@redrobui/react';

<Popover
  trigger={<Button>Open</Button>}
  content={<div>Popover content</div>}
/>

Calendar

Date picker component.

import { Calendar } from '@redrobui/react';

<Calendar
  selected={date}
  onSelect={(date) => setDate(date)}
/>

Component Composition

Components are designed to be composable:

<Card className="p-6">
  <div className="space-y-4">
    <div className="flex items-center justify-between">
      <h2 className="text-xl font-bold">User Profile</h2>
      <Tag variant="completed" text="Active" />
    </div>
    
    <Separator />
    
    <div className="flex items-center space-x-4">
      <Avatar>
        <AvatarImage src="..." />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      <div>
        <h3 className="font-medium">John Doe</h3>
        <p className="text-sm text-gray-500">[email protected]</p>
      </div>
    </div>
    
    <Separator />
    
    <div className="space-y-2">
      <Input label="Name" defaultValue="John Doe" />
      <Input label="Email" defaultValue="[email protected]" />
      
      <div className="flex items-center space-x-2">
        <Switch id="notifications" />
        <Label htmlFor="notifications">Email notifications</Label>
      </div>
    </div>
    
    <div className="flex gap-2">
      <Button variant="outline" fullWidth>Cancel</Button>
      <Button variant="primary" fullWidth>Save Changes</Button>
    </div>
  </div>
</Card>

TypeScript

Full TypeScript support with exported types:

import type {
  ButtonProps,
  CardProps,
  InputProps,
  SelectOptionType,
} from '@redrobui/react';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Accessibility

All components follow WAI-ARIA guidelines:

• Keyboard navigation support
• Screen reader friendly
• Focus management
• ARIA attributes
• Semantic HTML

Customization

Extending Components

import { Button, type ButtonProps } from '@redrobui/react';

interface MyButtonProps extends ButtonProps {
  icon?: React.ReactNode;
}

export const MyButton: React.FC<MyButtonProps> = ({ icon, ...props }) => {
  return <Button leftIcon={icon} {...props} />;
};

Custom Styling

// Use className for custom styles
<Button className="my-custom-class">
  Custom Button
</Button>

// Or use Tailwind classes
<Button className="bg-purple-600 hover:bg-purple-700">
  Purple Button
</Button>

Tailwind Extension

// tailwind.config.js
const redrobConfig = require('@redrobui/tailwind-config');

module.exports = {
  presets: [redrobConfig],
  theme: {
    extend: {
      colors: {
        brand: '#your-color',
      },
    },
  },
};

Best Practices

1. Import styles once - In your main entry file
2. Use design tokens - Instead of hardcoded values
3. Leverage variants - Use variant props instead of custom styling
4. Type safety - Utilize TypeScript types for better DX
5. Composability - Compose complex UIs from simple components
6. Accessibility - Always include proper labels and ARIA attributes

Examples

See the React example app for a complete implementation.

Related Packages

• @redrobui/tokens - Design tokens
• @redrobui/tailwind-config - Tailwind preset
• @redrobui/icons - Icon library
• @redrobui/vue - Vue 3 components

Development

Start dev server

npm run dev

Build

npm run build

Preview

npm run preview

License

MIT