React components for Redrob AI Design System
npm install @redrobui/reactbash
npm install @redrobui/react @redrobui/tailwind-config
or
yarn add @redrobui/react @redrobui/tailwind-config
or
pnpm add @redrobui/react @redrobui/tailwind-config
`
Setup
$3
Just import the pre-built CSS with all utilities included:
`css
/ 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
$3
If you want to customize or extend the design system:
1. Configure Tailwind CSS:
`js
// 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:
`css
/ src/index.css or src/App.css /
@import '@redrobui/react/styles.css';
@import 'tailwindcss';
`
Components
$3
#### Button
Versatile button component with multiple variants and sizes.
`tsx
import { Button } from '@redrobui/react';
// Variants
// Sizes
// With icons
}>With Icon
}>With Icon
// States
`
#### Input
Text input component with label, helper text, and error states.
`tsx
import { Input } from '@redrobui/react';
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.
`tsx
import { Textarea } from '@redrobui/react';
placeholder="Enter description..."
className="min-h-[120px]"
disabled={false}
required={false}
/>
`
#### Select
Dropdown select component with search and custom options.
`tsx
import Select from '@redrobui/react/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.
`tsx
import { Checkbox } from '@redrobui/react';
import { Label } from '@redrobui/react';
`
#### Radio
Radio button group component.
`tsx
import { RadioGroup, RadioGroupItem } from '@redrobui/react';
import { Label } from '@redrobui/react';
`
#### Switch
Toggle switch component with multiple sizes.
`tsx
import { Switch } from '@redrobui/react';
import { Label } from '@redrobui/react';
// 'small' | 'medium' | 'default'
`
$3
#### Card
Container component for content grouping.
`tsx
import { Card } from '@redrobui/react';
Card Title
Card content goes here
`
#### Separator
Horizontal or vertical divider.
`tsx
import { Separator } from '@redrobui/react';
`
#### Accordion
Collapsible content sections.
`tsx
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from '@redrobui/react';
Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
`
#### Tabs
Tabbed navigation component.
`tsx
import { Tabs } from '@redrobui/react';
tabs={[
{ label: "Home", icon: },
{ label: "Profile", badge: 3 },
{ label: "Settings", disabled: true },
]}
activeTab={activeTab}
onTabChange={(index) => setActiveTab(index)}
/>
`
$3
#### Dialog / Modal
Modal dialog component.
`tsx
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
} from '@redrobui/react';
`
#### Tooltip
Contextual information on hover.
`tsx
import { Tooltip, TooltipTrigger, TooltipContent } from '@redrobui/react';
Helpful information
`
#### Toast
Toast notification system.
`tsx
import { ToastProvider, useToast } from '@redrobui/react';
// Wrap your app
// Use in components
const { toast } = useToast();
toast({
title: "Success",
description: "Your changes have been saved.",
variant: "success",
});
`
$3
#### Skeleton
Loading placeholder component.
`tsx
import { Skeleton } from '@redrobui/react';
// Different shapes
// Card skeleton
`
#### Loader
Animated loading spinner.
`tsx
import { Loader } from '@redrobui/react';
`
#### TextLoader
Text with loading animation.
`tsx
import TextLoader from '@redrobui/react/TextLoader';
`
#### Tag
Status and label tags.
`tsx
import Tag from '@redrobui/react/Tag';
// With icon
variant="completed"
text="Done"
startAdornment={ }
/>
`
$3
#### Breadcrumb
Hierarchical navigation trail.
`tsx
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@redrobui/react';
Home
Docs
Components
`
#### Pagination
Page navigation component.
`tsx
import { Pagination } from '@redrobui/react';
currentPage={currentPage}
totalPages={totalPages}
onPageChange={(page) => setCurrentPage(page)}
/>
`
$3
#### Avatar
User avatar with fallback.
`tsx
import { Avatar, AvatarImage, AvatarFallback } from '@redrobui/react';
JD
// Different sizes
SM
`
#### Table
Data table component with sorting and pagination.
`tsx
import { Table } from '@redrobui/react';
columns={[
{ header: "Name", accessor: "name" },
{ header: "Email", accessor: "email" },
{ header: "Role", accessor: "role" },
]}
data={[
{ name: "John Doe", email: "john@example.com", role: "Admin" },
{ name: "Jane Smith", email: "jane@example.com", role: "User" },
]}
/>
`
$3
#### Dropdown Menu
Contextual menu with actions.
`tsx
import { DropdownMenu } from '@redrobui/react';
trigger={}
items={[
{ label: "Edit", onClick: () => {} },
{ label: "Delete", onClick: () => {}, variant: "danger" },
]}
/>
`
#### Popover
Floating content container.
`tsx
import { Popover } from '@redrobui/react';
trigger={}
content={Popover content}
/>
`
#### Calendar
Date picker component.
`tsx
import { Calendar } from '@redrobui/react';
selected={date}
onSelect={(date) => setDate(date)}
/>
`
Component Composition
Components are designed to be composable:
`tsx
User Profile
JD
John Doe
john@example.com
`
TypeScript
Full TypeScript support with exported types:
`tsx
import type {
ButtonProps,
CardProps,
InputProps,
SelectOptionType,
} from '@redrobui/react';
const MyButton: React.FC = (props) => {
return ;
};
`
Accessibility
All components follow WAI-ARIA guidelines:
- Keyboard navigation support
- Screen reader friendly
- Focus management
- ARIA attributes
- Semantic HTML
Customization
$3
`tsx
import { Button, type ButtonProps } from '@redrobui/react';
interface MyButtonProps extends ButtonProps {
icon?: React.ReactNode;
}
export const MyButton: React.FC = ({ icon, ...props }) => {
return ;
};
`
$3
`tsx
// Use className for custom styles
// Or use Tailwind classes
`
$3
`js
// 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
$3
`bash
npm run dev
`
$3
`bash
npm run build
`
$3
`bash
npm run preview
``