ReacUI
Docs/Installation

Installation

Get started with ReacUI in your React project within minutes

Requirements

Peer Dependencies

  • React 18 or higher
  • React DOM 18 or higher
  • Tailwind CSS 3.0 or higher

Browser Support

  • Chrome 90+
  • Firefox 90+
  • Safari 15+
  • Edge 90+

Installation

Choose your preferred package manager to install ReacUI:

npm install reacui

Version Compatibility

Make sure you're using React 18 or higher. Support for React 17 was dropped in ReacUI v2.0.

Framework Setup

ReacUI works with all popular React frameworks. Select your framework for specific setup instructions:

Next.js (App Router)
For Next.js 13+ projects using the app directory
// app/providers.js
'use client'

import { ThemeProvider } from 'reacui'

export function Providers({ children }) {
  return <ThemeProvider>{children}</ThemeProvider>
}

// app/layout.js
import { Providers } from './providers'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}
Create React App
For projects created with Create React App
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'reacui';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);
Vite
For projects created with Vite
// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { ThemeProvider } from 'reacui'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(
  document.getElementById('root')
).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
)

Tailwind Setup

ReacUI is built with Tailwind CSS. Follow these steps to properly configure your project:

1Install Tailwind CSS

If you haven't already installed Tailwind CSS in your project, you can do so with:

npm install -D tailwindcss postcss autoprefixer

2Initialize Tailwind CSS

Generate the configuration files:

npx tailwindcss init -p

3Configure Tailwind

Update your tailwind.config.js file to include ReacUI components:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./app/**/*.{js,jsx,ts,tsx}",
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
    "./node_modules/reacui/**/*.{js,jsx}"
  ],
  darkMode: 'class', // or 'media' for OS preference
  theme: {
    extend: {
      // You can extend the theme here if needed
    },
  },
  plugins: [],
}

4Add Tailwind Directives

Add the Tailwind directives to your CSS:

/* styles/globals.css or src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Theming

ReacUI comes with a built-in theme provider that supports dark mode and custom color themes.

Basic Theme Setup

The ThemeProvider component handles dark/light mode switching and enables custom theme configuration:

import { ThemeProvider } from 'reacui';

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <YourApp />
    </ThemeProvider>
  );
}

Custom Color Theme

You can customize the color scheme by extending your Tailwind config:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ... other config
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
        // Add other color customizations as needed
      },
    },
  },
}

Basic Usage

After setting up ReacUI, you can start using the components in your project:

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

function MyComponent() {
  return (
    <Card className="p-6">
      <h2 className="text-xl font-bold mb-4">Sign In</h2>
      <div className="mb-4">
        <Input 
          placeholder="Email" 
          type="email" 
          className="w-full" 
        />
      </div>
      <div className="mb-6">
        <Input 
          placeholder="Password" 
          type="password"
          className="w-full" 
        />
      </div>
      <Button variant="primary">Sign In</Button>
    </Card>
  );
}

Next Steps

Now that you've set up ReacUI, explore our component library to see all available components and their usage examples.

Browse ComponentsTry in Playground

Troubleshooting

Components are missing styles

This usually happens when Tailwind isn't configured correctly to scan ReacUI components.

Make sure your tailwind.config.js includes the ReacUI package in its content configuration:

content: ["./node_modules/reacui/**/*.{js,jsx}"]

Dark mode isn't working

Ensure you've set darkMode to 'class' in your Tailwind config and that you're using the ThemeProvider component correctly.

darkMode: 'class'

TypeScript errors

If you're using TypeScript and seeing type errors, make sure you have the types installed:

npm install --save-dev @types/reacui

Need more help?

If you're still having issues, check out our GitHub Discussions or open an issue.