🖤 Pure Black & White: No gray shades, only pure black and white
⚡ Lightning Fast: Optimized for performance with minimal CSS
📦 No Background Colors: Clean borders-only design
📐 No Border Radius: Sharp, geometric edges
🌙 Dark Mode: Built-in theme support with next-themes
♿ Accessible: Full keyboard navigation and screen reader support
🎯 TypeScript: Complete type safety
🎨 11 Components: Button, Input, IconButton, ButtonGroup, CopyButton, Breadcrumb, CodeBlock, Modal, Card, Badge, Tooltip

Installation

# pnpm (recommended)
pnpm add thereactui

# npm
npm install thereactui

# yarn
yarn add thereactui

Quick Start

Install the package with pnpm
Wrap your app with TheReactUIProvider
Import and use components

import { TheReactUIProvider, Button, Input } from 'thereactui';

export default function App() {
  return (
    <TheReactUIProvider>
      <div className="p-8 space-y-4">
        <Button variant="primary">Hello theReactUI!</Button>
        <Input placeholder="Pure black & white input" />
      </div>
    </TheReactUIProvider>
  );
}

CSS Setup

theReactUI requires Tailwind CSS. Add this to your CSS file:

@import "tailwindcss";

/* theReactUI Theme Variables */
:root {
  --background: #ffffff;
  --foreground: #000000;
  --border: #000000;
}

.dark {
  --background: #000000;
  --foreground: #ffffff;
  --border: #ffffff;
}

* {
  border-color: var(--border);
}

body {
  background: var(--background);
  color: var(--foreground);
  transition: none;
}

Components

Button

All variants and sizes with loading/disabled states.

import { Button } from 'thereactui';

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>

// Sizes  
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// States
<Button loading>Loading</Button>
<Button disabled>Disabled</Button>

Input

Form input with variants, sizes, and validation states.

import { Input } from 'thereactui';

// Basic input
<Input placeholder="Enter text" />

// With label and helper text
<Input 
  label="Email"
  placeholder="Enter email"
  helperText="We'll never share your email"
/>

// Variants
<Input variant="default" />
<Input variant="error" errorMessage="Invalid email" />
<Input variant="success" helperText="Email is valid" />

// Sizes
<Input size="sm" placeholder="Small input" />
<Input size="md" placeholder="Medium input" />  
<Input size="lg" placeholder="Large input" />

IconButton

Square buttons optimized for icons.

import { IconButton } from 'thereactui';
import { Heart, Star, Copy } from 'lucide-react';

<IconButton aria-label="Like">
  <Heart />
</IconButton>

<IconButton variant="primary" aria-label="Star">
  <Star />
</IconButton>

ButtonGroup

Group buttons with connected borders.

import { ButtonGroup, Button } from 'thereactui';

<ButtonGroup>
  <Button variant="secondary">First</Button>
  <Button variant="secondary">Second</Button>
  <Button variant="secondary">Third</Button>
</ButtonGroup>

CopyButton

Button with built-in clipboard functionality.

import { CopyButton } from 'thereactui';

<CopyButton text="Text to copy" />
<CopyButton text="Custom text" iconOnly />

Navigation breadcrumbs.

import { Breadcrumb } from 'thereactui';

const items = [
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Details' }
];

<Breadcrumb items={items} />

CodeBlock

Syntax highlighted code blocks with copy functionality.

import { CodeBlock } from 'thereactui';

const code = `function hello() {
  console.log('Hello theReactUI!');
}`;

<CodeBlock 
  code={code}
  language="javascript"
  filename="hello.js"
/>

Dialog modal with backdrop, keyboard navigation, and focus management.

import { Modal, Button } from 'thereactui';
import { useState } from 'react';

function MyComponent() {
  const [open, setOpen] = useState(false);
  
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <Modal 
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Example Modal"
        size="md"
      >
        <p>Modal content goes here</p>
        <Button onClick={() => setOpen(false)}>Close</Button>
      </Modal>
    </>
  );
}

Card

Flexible container component for grouping related content.

import { Card, CardHeader, CardContent, CardFooter, Button } from 'thereactui';

// Basic card
<Card>
  <CardContent>
    <h3>Card Title</h3>
    <p>Card content goes here</p>
  </CardContent>
</Card>

// Card with sections
<Card variant="bordered">
  <CardHeader>
    <h3>Profile Card</h3>
  </CardHeader>
  <CardContent>
    <p>User information and details</p>
  </CardContent>
  <CardFooter>
    <Button variant="primary">Follow</Button>
    <Button variant="secondary">Message</Button>
  </CardFooter>
</Card>

// Interactive card
<Card 
  variant="elevated" 
  hoverable 
  onClick={() => console.log('Card clicked')}
>
  <CardContent>Clickable card content</CardContent>
</Card>

Badge

Small status indicators and labels for displaying concise information.

import { Badge } from 'thereactui';

// Basic badges
<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="error">Error</Badge>

// Outline badges
<Badge variant="primary" outline>Outline</Badge>

// With icons
<Badge variant="success" className="flex items-center gap-1">
  <CheckCircle size={12} />
  Verified
</Badge>

// Notification badges
<div className="relative">
  <Button>Notifications</Button>
  <Badge 
    variant="error" 
    size="sm" 
    className="absolute -top-2 -right-2"
  >
    3
  </Badge>
</div>

// Status indicators
<Badge variant="success" size="sm">Online</Badge>
<Badge variant="warning" size="sm">Away</Badge>
<Badge variant="error" size="sm">Offline</Badge>

Contextual information displayed on hover or focus with smart positioning.

import { Tooltip, Button, IconButton } from 'thereactui';
import { Help, Info, Copy } from 'lucide-react';

// Basic tooltip
<Tooltip content="This is a tooltip">
  <Button>Hover me</Button>
</Tooltip>

// Different placements
<Tooltip content="Tooltip on top" placement="top">
  <Button>Top</Button>
</Tooltip>

<Tooltip content="Tooltip on bottom" placement="bottom">
  <Button>Bottom</Button>
</Tooltip>

// With custom delay
<Tooltip content="Delayed tooltip" delay={500}>
  <Button>Slow tooltip</Button>
</Tooltip>

// Rich content
<Tooltip 
  content={
    <div>
      <div className="font-semibold">Rich Content</div>
      <div className="text-xs opacity-80">This tooltip has formatted content</div>
    </div>
  }
>
  <IconButton aria-label="Help">
    <Help size={16} />
  </IconButton>
</Tooltip>

// Help icons
<div className="flex items-center gap-2">
  <label>Email Address</label>
  <Tooltip content="We'll never share your email">
    <Info size={14} className="cursor-help opacity-70" />
  </Tooltip>
</div>

// Disabled tooltip
<Tooltip content="This won't show" disabled>
  <Button>Disabled tooltip</Button>
</Tooltip>

Documentation

Visit our documentation site for complete guides, examples, and API references for all components.

Upcoming Components

We're actively working on expanding theReactUI with more essential components:

Form Components: Checkbox, Radio, Select, Textarea, Switch/Toggle
Layout Components: Tabs, Accordion, Divider, Spacer
Feedback Components: Progress, Alert/Notification, Spinner/Loading
Data Display: Avatar, Table, List, Calendar
Navigation: Menu/Dropdown, Pagination, Stepper
Utility Components: Popover, Date Picker, Slider

All upcoming components will follow the same theReactUI principles: pure black & white design, no border-radius, minimal CSS, and maximum performance.

Requirements

React 18.0.0 or higher
Tailwind CSS 3.0.0 or higher
Node.js 18.0.0 or higher
Package manager: pnpm (recommended), npm, or yarn

Development

Using pnpm for optimal performance:

# Clone the repository
git clone https://github.com/themrsami/thereactui.git

# Install dependencies  
pnpm install

# Start development server
pnpm dev

# Build library
pnpm run build:lib

# Build documentation site
pnpm build

Design Principles

Minimalist: Strip away unnecessary visual elements
Fast: Optimize for performance and loading speed
Accessible: Ensure everyone can use your interface
Consistent: Maintain visual and behavioral consistency
Pure: Use only black and white colors
Sharp: No border-radius, geometric edges only
Borderless Backgrounds: Clean border-only styling

Contributing

We welcome contributions! Please read our contributing guidelines and submit pull requests to our GitHub repository.

Version

Current version: 1.2.0

License

Keywords

FAQs

What is thereactui?

Is thereactui well maintained?

Package last updated on 14 Aug 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install