Getting Started

Installation

This guide will help you get started with ReUI's copy-and-paste components in just a few minutes.

Prerequisites

Before you can install and use ReUI, make sure your project meets the following requirements:

React: Version 19 or higher.
TypeScript: Version 5.7 or higher.
Tailwind CSS: Version 4 or higher.
Radix UI: Version 1 or higher.
Motion: Version 12.19 or higher.

Install Components

Initialize a React Project

ReUI is fully compatible with Shadcn and extends it with advanced component options. To get started, set up your React project following the Shadcn Installation Guide.

If you already have a project compatible with Shadcn, you can skip this guide.

Install Radix UI

Follow Radix UI Installation Guide to install Radix UI package.

npm i radix-ui

Install Motion

To use animated effects, follow Motion Installation Guide to install Motion.

npm i motion

Add tw-animate-css

This plugin is required for smooth animation effects used by Accordion, Dialog, Popover and other elements.

npm i tw-animate-css

Integrate ReUI Styles

Add below code into your entry css file globals.css:

@import 'tailwindcss';
 
@import 'tw-animate-css';
 
/** Dark Mode Variant **/
@custom-variant dark (&:is(.dark *));
 
/** Colors **/
:root {
  /** Base Colors **/
  --background: oklch(1 0 0); /* --color-white */
  --foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --card: oklch(1 0 0); /* --color-white */
  --card-foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --popover: oklch(1 0 0); /* --color-white */
  --popover-foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --primary: oklch(62.3% 0.214 259.815); /* --color-blue-500 */
  --primary-foreground: oklch(1 0 0); /* --color-white */
  --secondary: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
  --secondary-foreground: oklch(21% 0.006 285.885); /* --color-zinc-900 */
  --muted: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
  --muted-foreground: oklch(55.2% 0.016 285.938); /* --color-zinc-500 */
  --accent: oklch(96.7% 0.003 264.542); /* --color-zinc-100 */
  --accent-foreground: oklch(21% 0.006 285.885); /* --color-zinc-900 */
  --destructive: oklch(57.7% 0.245 27.325); /* --color-red-600 */
  --destructive-foreground: oklch(1 0 0); /* --color-white */
 
  /** Base Styles **/
  --border: oklch(94% 0.004 286.32); /* between --color-zinc-100 and --color-zinc-200 */
  --input: oklch(92% 0.004 286.32); /* --color-zinc-200 */
  --ring: oklch(87.1% 0.006 286.286); /* --color-zinc-400 */
  --radius: 0.5rem;
}
 
.dark {
  /** Base Colors **/
  --background: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
  --card: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --card-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
  --popover: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --popover-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
  --primary: oklch(54.6% 0.245 262.881); /* --color-blue-600 */
  --primary-foreground: oklch(1 0 0); /* --color-white */
  --secondary: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
  --secondary-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
  --muted: oklch(21% 0.006 285.885); /* --color-zinc-900 */
  --muted-foreground: oklch(55.2% 0.016 285.938); /* --color-zinc-500 */
  --accent: oklch(21% 0.006 285.885); /* --color-zinc-900 */
  --accent-foreground: oklch(98.5% 0 0); /* --color-zinc-50 */
  --destructive: oklch(57.7% 0.245 27.325); /* --color-red-600 */
  --destructive-foreground: oklch(1 0 0); /* --color-white */
 
  /** Base Styles **/
  --border: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
  --input: oklch(27.4% 0.006 286.033); /* --color-zinc-800 */
  --ring: oklch(27.4% 0.006 286.033); /* --color-zinc-600 */
}
 
/** Theme Setup **/
@theme inline {
  /** Base Colors **/
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
 
  /** Base Styles **/
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
 
  /** Animations **/
  --animate-marquee: marquee var(--duration) infinite linear;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
 
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }
}
 
/** Global Styles **/
@layer base {
  * {
    @apply border-border;
  }
 
  *:focus-visible {
    @apply outline-ring rounded-xs shadow-none outline-2 outline-offset-3 transition-none!;
  }
}
 
/** Custom Scrollbar **/
@layer base {
  ::-webkit-scrollbar {
    width: 5px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--input);
    border-radius: 5px;
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--input) transparent;
  }
}
 
/** Custom Container **/
@utility container {
  margin-inline: auto;
  padding-inline: 1.5rem;
  @media (width >= --theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 1440px) {
    padding-inline: 2rem;
    max-width: 1440px;
  }
}
 
/** Smooth scroll **/
html {
  scroll-behavior: smooth;
}

Setup Inter Font(Next.js)

Add the following code to your root layout file (app/layout.tsx or src/app/layout.tsx):

import { Inter } from 'next/font/google';
import { cn } from '@/utils/cn';
 
const inter = Inter({ subsets: ['latin'] });
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body className={cn('text-base antialiased', inter.className)}>{children}</body>
    </html>
  );
}

For a modern and visually appealing design, we recommend using Inter as the default font in your ReUI project.

Add Lucide Icon Library

npm i lucide

Add Remix Icon Library(optional)

npm i @remixicon/react

Add Tailwind Merge and clsx Library

Tailwind Merge and clsx are used to merge and create class names for the components.

npm i tailwind-merge

npm i clsx

Add utils

Copy the code below and paste it into a utils.ts file within your project's lib directory.

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
 
/**
 * Merges Tailwind class names, resolving any conflicts.
 *
 * @param inputs - An array of class names to merge.
 * @returns A string of merged and optimized class names.
 */
export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs));
}

Add Components

Explore the ReUI Components and add the ones you need into your project.

PreviouseIntroduction NextTheming

On This Page

Prerequisites
Install Components