Getting Started

Get up and running with ReactUI Library in under five minutes. This guide walks you through every step from installation to building your first polished interface.

1

Install the Package

Use your preferred package manager to add ReactUI and its peer dependencies to your project. The core package includes every component, hook, and utility you need.

# npm
npm install @reactui/core

# yarn
yarn add @reactui/core

# pnpm
pnpm add @reactui/core
2

Configure the Provider

Wrap your application with the ReactUIProvider. This component manages theme context, color mode, and global configuration for every child component.

// app/layout.tsx  (Next.js App Router)
import { ReactUIProvider } from '@reactui/core';
import '@reactui/core/styles.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ReactUIProvider theme="light">
          {children}
        </ReactUIProvider>
      </body>
    </html>
  );
}

Important: Make sure you import the stylesheet (@reactui/core/styles.css) at the root of your app. Without it, components will render without styles.

3

Use Your First Component

Import any component from @reactui/core and drop it into your page. Every component is tree-shakeable, so only what you import ends up in your bundle.

import { Button, Card, Input, Stack } from '@reactui/core';

export default function ContactForm() {
  return (
    <Card padding="lg" variant="elevated">
      <Stack spacing="md">
        <Input
          label="Full Name"
          placeholder="Jane Doe"
          required
        />
        <Input
          label="Email Address"
          placeholder="jane@example.com"
          type="email"
          required
        />
        <Input
          label="Message"
          placeholder="How can we help?"
          multiline
          rows={4}
        />
        <Button variant="primary" size="lg" fullWidth>
          Send Message
        </Button>
      </Stack>
    </Card>
  );
}
4

Customize the Theme

Override the default design tokens to match your brand. You can pass a custom theme object directly to the provider or use CSS variables in your global stylesheet.

import { ReactUIProvider, createTheme } from '@reactui/core';

const myTheme = createTheme({
  colors: {
    primary: '#e11d48',       // Rose-600
    primaryDark: '#be123c',   // Rose-700
    secondary: '#f1f5f9',
    accent: '#f59e0b',
  },
  radius: {
    sm: '4px',
    md: '8px',
    lg: '16px',
    full: '9999px',
  },
  fonts: {
    body: '"Inter", system-ui, sans-serif',
    heading: '"Cal Sans", "Inter", sans-serif',
    mono: '"JetBrains Mono", monospace',
  },
});

export default function RootLayout({ children }) {
  return (
    <ReactUIProvider theme={myTheme}>
      {children}
    </ReactUIProvider>
  );
}
5

Build and Deploy

ReactUI is optimized for production. Components are tree-shaken automatically, CSS is extracted and minified, and server components render with zero client-side JavaScript overhead. Run your standard build command and deploy anywhere.

# Development
npm run dev

# Production build
npm run build

# Preview production build locally
npm run start

# Run linting and type checks before deploying
npm run lint && npx tsc --noEmit

ReactUI supports all major hosting platforms including Vercel, Netlify, AWS Amplify, and traditional Node.js servers.

What's Included

The ReactUI Pro plan gives you access to the complete component library, premium showcases, and priority support.

50+
Production Components

Buttons, forms, modals, tables, navigation, data display, feedback, and more.

12
Showcase Templates

Complete page templates for dashboards, landing pages, e-commerce, and SaaS apps.

100%
TypeScript Coverage

Every component, hook, and utility is fully typed with exported type definitions.

WCAG 2.1
Accessibility

All components meet WCAG 2.1 AA standards with keyboard and screen reader support.

RTL
Right-to-Left Support

Built-in RTL layout support for Arabic, Hebrew, and other right-to-left languages.

24/7
Priority Support

Direct access to the engineering team via Discord and email with guaranteed response times.

Next Steps

Now that you have ReactUI set up, explore the rest of the documentation to make the most of the library.

Browse Components

Explore all 50+ components with live previews and copy-paste code snippets.

Theming Guide

Customize colors, typography, spacing, and dark mode to match your brand.

Examples

See complete real-world examples including dashboards, forms, and e-commerce pages.

API Reference

Full props tables, type definitions, and code examples for every component.