Reactables - Modern React UI Components

Why Choose Reactables?

Built with modern web standards and accessibility in mind

🎨

Modern Design

Clean, accessible components with a consistent design system

📦

TypeScript

Full TypeScript support with comprehensive type definitions

🎯

Accessible

Built with accessibility in mind, following WCAG guidelines

🚀

Lightweight

Tree-shakeable components with minimal bundle size

🎭

Customizable

Easy to customize with Tailwind CSS classes

📚

Documented

Comprehensive documentation with Storybook

Quick Installation

Get started with Reactables in minutes

Install the package

npm install reactables
# or
yarn add reactables
# or
pnpm add reactables

Quick Start

import { Button, Input, Card } from 'reactables';

function App() {
  return (
    <div className="p-6">
      <Card>
        <h2 className="text-xl font-semibold mb-4">Welcome to Reactables</h2>
        <Input 
          label="Email"
          placeholder="Enter your email"
          className="mb-4"
        />
        <Button variant="primary">
          Get Started
        </Button>
      </Card>
    </div>
  );
}

Components

Explore our collection of accessible UI components

Button

<Button variant="primary" size="md">
  Click me
</Button>

Input

<Input 
  label="Email"
  placeholder="Enter your email"
  error="Please enter a valid email"
/>

Card

Card Title

Card content goes here

<Card padding="md" shadow="md">
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</Card>

Badge

Success

<Badge variant="success" size="md">
  Success
</Badge>

Avatar

<Avatar 
  src="/path/to/image.jpg"
  alt="User avatar"
  size="md"
/>

Modal

<Modal 
  isOpen={isModalOpen}
  onClose={() => setIsModalOpen(false)}
  title="Modal Title"
>
  <p>Modal content goes here</p>
</Modal>