ReacUI
Docs/Introduction

Introduction

A modern React UI library built with Tailwind CSS

Get StartedGitHub

Build beautiful React applications with ease

ReacUI provides production-ready components that follow your design system. Build consistent, accessible interfaces without reinventing the wheel.

Try in PlaygroundBrowse Components

Key Features

Tailwind CSS Powered

Built on top of Tailwind CSS, allowing complete customization and seamless integration with your existing Tailwind projects.

Dark Mode Support

Full dark mode support out of the box, with seamless transitions and proper color contrasts for accessibility.

Accessible Components

Designed with accessibility in mind. All components follow WAI-ARIA standards and are keyboard navigable.

Modern & Lightweight

Built with modern JavaScript and React best practices. Optimized bundle size with tree-shaking for smaller applications.

Why ReacUI?

In a world full of component libraries, what makes ReacUI different? We focus on three key principles:

1

Developer Experience

We prioritize APIs that are intuitive and easy to use. Our components are extensively documented and provide helpful error messages.

2

Customization

ReacUI is designed to adapt to your design system. You can easily customize every aspect of the components to match your brand.

3

Performance

We build with performance in mind from the start. Our components are optimized for rendering and minimize unnecessary re-renders.

Quick Example

Here's a simple example of how to use ReacUI components to build a sign-in form:

import { Button, Card, Input, Checkbox } from 'reacui';

function SignInForm() {
  return (
    <Card className="p-6 max-w-md mx-auto">
      <h2 className="text-xl font-bold mb-4">Sign In</h2>
      
      <div className="mb-4">
        <Input 
          label="Email" 
          type="email" 
          placeholder="your@email.com" 
          className="w-full" 
        />
      </div>
      
      <div className="mb-6">
        <Input 
          label="Password" 
          type="password"
          placeholder="********"
          className="w-full" 
        />
      </div>
      
      <div className="flex items-center justify-between mb-6">
        <Checkbox label="Remember me" id="remember" />
        <a className="text-sm text-primary-600 hover:underline" href="#">
          Forgot password?
        </a>
      </div>
      
      <Button variant="primary" className="w-full">
        Sign In
      </Button>
    </Card>
  );
}

Sign In

Forgot password?

Design Principles

Consistency

Components follow consistent patterns and behaviors to create a cohesive user experience.

Accessibility

Designed with accessibility as a priority, not an afterthought.

Flexibility

Components can be composed and customized to fit various use cases.

Getting Started

Ready to get started with ReacUI? Follow these steps to set up your project:

1

Installation

Install ReacUI and its peer dependencies:

npm install reacui
2

Set up ThemeProvider

Wrap your application with the ThemeProvider:

import { ThemeProvider } from 'reacui';

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}
3

Start using components

Import and use any of the ReacUI components in your application:

import { Button } from 'reacui';

function MyComponent() {
  return (
    <Button variant="primary">Click me</Button>
  );
}
Continue to Installation