Reactors-UI

A comprehensive UI Kit library with custom design tokens and TypeScript support. Built for modern React applications with accessibility, performance, and developer experience in mind.

🔗 Quick Links

• 📖 Complete Documentation & Examples - Interactive Storybook with all components
• 📦 npm Package - Install and usage info
• 📝 Changelog - Version history and updates

✨ Key Features

• 🎨 Modern Design System - Built with Tailwind CSS v4
• ♿ Accessibility First - ARIA compliant with Radix UI primitives
• 🎯 Full TypeScript Support - Complete type definitions
• 🧩 Tree Shakable - Import only what you need
• 📱 Mobile-First Responsive - Works on all devices
• 📊 Advanced Data Tables - TanStack Table integration
• ⚡ Performance Optimized - Modern React patterns

📦 Installation

npm install reactors-ui
# or
yarn add reactors-ui
# or
pnpm add reactors-ui

Required Peer Dependencies

npm install react react-dom @radix-ui/react-checkbox @radix-ui/react-radio-group @radix-ui/react-slot @radix-ui/react-switch @tanstack/react-table react-select react-window

Version requirements:

• react: >=18.0.0
• react-dom: >=18.0.0
• @radix-ui/react-checkbox: ^1.3.2
• @radix-ui/react-radio-group: ^1.3.7
• @radix-ui/react-slot: ^1.2.3
• @radix-ui/react-switch: ^1.2.5
• @tanstack/react-table: ^8.21.3

🚀 Quick Start

1. Import Styles

import 'reactors-ui/styles.css';

2. Start Using Components

import { Button, Alert, Card, CardBody } from 'reactors-ui';

function App() {
  return (
    <div className='space-y-4 p-4'>
      <Alert
        variant='success'
        title='Welcome!'
        description="You're ready to use Reactors-UI"
      />

      <Button color='green' onClick={() => alert('Hello!')}>
        Get Started
      </Button>

      <Card>
        <CardBody>
          <h3 className='text-lg font-semibold'>Your First Component</h3>
          <p>Check out our Storybook for more examples!</p>
        </CardBody>
      </Card>
    </div>
  );
}

📚 Component Categories

🎯 Form Controls

Button • Input • Select • Checkbox • Radio • Switch • File Upload

📋 Layout & Display

Card • Modal • Alert • Avatar • Badge • Skeleton • Spinner • Typography

🧭 Navigation

Breadcrumbs • Tabs • Pagination

📊 Data Display

Table • Data Table (with TanStack) • Toast • Icon

🔧 Advanced Components

• AsyncSelect - For dynamic option loading
• VirtualizedSelect - Handle large datasets efficiently
• Data Table - Full-featured tables with sorting, filtering, pagination

💡 For detailed examples, props, and usage: Visit our Interactive Storybook

🎨 Customization & Theming

Reactors-UI uses a comprehensive design token system that integrates seamlessly with Tailwind CSS:

import { Button } from 'reactors-ui';

// Use built-in variants
<Button color="green" size="lg">Primary Action</Button>

// Or customize with Tailwind classes
<Button className="bg-purple-600 hover:bg-purple-700">
  Custom Styled
</Button>

Learn more about theming in our Design System Documentation.

🔧 Design Token Integration

Reactors-UI includes automatic safelist generation to ensure all design token utilities are available in your CSS, even for dynamic styling patterns:

• ✅ 7,500+ utilities automatically included from design tokens
• ✅ Zero configuration - works out of the box
• ✅ Always in sync - automatically updated when design tokens change
• ✅ Optimized builds - only includes utilities that exist in your design system

This means you can use any color, spacing, or typography token dynamically without worrying about missing CSS classes:

// These utilities are guaranteed to be available
const dynamicColor = 'primary-500';
<Button className={`bg-${dynamicColor} text-white`}>Dynamic Styling</Button>;

♿ Accessibility Built-in

Every component follows WCAG guidelines and includes:

• ✅ Full ARIA support with proper roles and attributes
• ⌨️ Complete keyboard navigation
• 🔊 Screen reader optimization
• 🎯 Focus management and indicators
• 🌓 High contrast mode support

📱 Mobile-First & Responsive

All components work beautifully across devices:

<Button size='sm' className='md:size-lg lg:size-xl'>
  Responsive Button
</Button>

🏗️ TypeScript Support

Get full IntelliSense and type safety:

import { ButtonProps, AlertProps } from 'reactors-ui';

// Full type support for all component props
const MyButton: React.FC<ButtonProps> = props => {
  return <Button {...props} />;
};

📄 License

Licensed under GPL-3.0+. You can use, modify, and distribute this software, but derivative works must also be GPL-3.0+ licensed.

🙏 Built With

Thanks to these amazing open-source projects: Radix UI • Tailwind CSS • TanStack Table • React Select • React Window

📖 Get Started with Storybook • 📦 View on npm

Made with ❤️ by the Reactors-UI team