Skip to main content

Getting Started

Welcome to RizzUI - A modern, minimal React UI library built with Tailwind CSS v4 and React 19. Get production-ready components that are intuitive, accessible, and performant.

Features​

  • 50+ Components - Comprehensive set of UI components including buttons, forms, modals, and more
  • Tailwind CSS v4 - Modern CSS-first configuration without JavaScript config files
  • Dark Mode Ready - Built-in dark mode support using OKLCH color space
  • Fully Accessible - WCAG compliant components built on Headless UI primitives
  • Tree-shakeable - Optimized bundle size - only ship what you use
  • TypeScript Native - Complete type safety and IntelliSense support

Prerequisites​

Before you begin, make sure you have:

  • React 19.1.0 or higher
  • Node.js 18.0.0 or higher
  • Package Manager: pnpm 9.0+ (recommended), npm, yarn, or bun

Installation​

Step 1

Install RizzUI & Core Dependencies

Navigate to your React/Next.js project and run:

npm i rizzui @headlessui/react @floating-ui/react tailwind-variants tailwind-merge

Package Overview - rizzui - The core UI component library - @headlessui/react - Provides accessible, unstyled primitives for complex components (dropdowns, modals, tabs) - @floating-ui/react - Advanced positioning system for tooltips, popovers, and dropdowns - tailwind-variants - Type-safe variant management system for component styling - tailwind-merge - A utility for merging Tailwind CSS classes

Step 2

Install Tailwind CSS & Forms Plugin

Install these development dependencies for styling:

npm i -D tailwindcss @tailwindcss/forms @tailwindcss/postcss

Development Dependencies - tailwindcss - The core Tailwind CSS v4 framework - @tailwindcss/forms - Enhanced form styling with consistent, accessible input designs - @tailwindcss/postcss - Tailwind CSS v4 PostCSS processing engine

Configuration​

Step 3

Configure Your Styles

Tailwind CSS v4 uses a modern CSS-first configuration approach. No tailwind.config.js file is required.

Create or update your app/globals.css (or src/app/globals.css for Next.js):

/* Import Tailwind CSS v4 */
@import 'tailwindcss';

/* Configure content sources for RizzUI components */
@source '../node_modules/rizzui/dist';

/* Enable enhanced form styles */
@plugin '@tailwindcss/forms';

/* Define color palette using OKLCH color space */
:root {
  /* Base Colors - backgrounds, text, and borders */
  --background: oklch(100% 0 0); /* #ffffff */
  --foreground: oklch(40.17% 0 0); /* #484848 */
  --muted: oklch(91.58% 0 0); /* #e3e3e3 */
  --muted-foreground: oklch(66% 0 0); /* #929292 */

  /* Border Tokens */
  --border-radius: 0.5rem; /* 8px */
  --border-width: 0.0625rem; /* 1px */
  --border-color: oklch(90.37% 0 0); /* #dfdfdf */

  /* Text Tokens */
  --text-primary: oklch(0% 0 0); /* #000000 */
  --text-secondary: oklch(40.17% 0 0); /* #484848 */

  /* Primary Brand Colors - buttons, links, and focus states */
  --primary-lighter: oklch(91.58% 0 0); /* #e3e3e3 */
  --primary: oklch(17.76% 0 0); /* #111111 */
  --primary-dark: oklch(0% 0 0); /* #000000 */
  --primary-foreground: oklch(100% 0 0); /* #ffffff */

  /* Secondary Colors - accents and highlights */
  --secondary-lighter: oklch(91.99% 0.0386 276.02); /* #dde3ff */
  --secondary: oklch(50.51% 0.2633 276.95); /* #4e36f5 */
  --secondary-dark: oklch(45.41% 0.2431 277.06); /* #432ad8 */
  --secondary-foreground: oklch(100% 0 0); /* #ffffff */

  /* Danger/Error - error messages and destructive actions */
  --red-lighter: oklch(89.99% 0.0393 14); /* #f7d4d6 */
  --red: oklch(59.6% 0.2445 29.23); /* #ee0000 */
  --red-dark: oklch(51.71% 0.2121 29.2338); /* #c50000 */

  /* Warning - warning messages and caution states */
  --orange-lighter: oklch(95.67% 0.0452 84.5695); /* #ffefcf */
  --orange: oklch(78.37% 0.1587 72.99); /* #f5a623 */
  --orange-dark: oklch(54.83% 0.1339 53.95); /* #ab570a */

  /* Info - informational messages and highlights */
  --blue-lighter: oklch(91.66% 0.0404 257.5078); /* #d3e5ff */
  --blue: oklch(57.31% 0.2144 258.25); /* #0070f3 */
  --blue-dark: oklch(51.58% 0.1888 258.27); /* #0761d1 */

  /* Success - success messages and positive states */
  --green-lighter: oklch(92.79% 0.086 155.61); /* #b9f9cf */
  --green: oklch(64.01% 0.1776 148.74); /* #11a849 */
  --green-dark: oklch(53.79% 0.1441 149.52); /* #11843c */
}

/* Map CSS variables to Tailwind's color system */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

  --border-radius: var(--border-radius);
  --color-border: var(--border-color);

  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);

  --color-primary-lighter: var(--primary-lighter);
  --color-primary: var(--primary);
  --color-primary-dark: var(--primary-dark);
  --color-primary-foreground: var(--primary-foreground);

  --color-secondary-lighter: var(--secondary-lighter);
  --color-secondary: var(--secondary);
  --color-secondary-dark: var(--secondary-dark);
  --color-secondary-foreground: var(--secondary-foreground);

  --color-red-lighter: var(--red-lighter);
  --color-red: var(--red);
  --color-red-dark: var(--red-dark);

  --color-orange-lighter: var(--orange-lighter);
  --color-orange: var(--orange);
  --color-orange-dark: var(--orange-dark);

  --color-blue-lighter: var(--blue-lighter);
  --color-blue: var(--blue);
  --color-blue-dark: var(--blue-dark);

  --color-green-lighter: var(--green-lighter);
  --color-green: var(--green);
  --color-green-dark: var(--green-dark);
}

/* ----------------------------------- */
/* Autofill Styles */
/* ----------------------------------- */
/* Override browser autofill background for all input components */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: inherit;
}

/* Firefox autofill */
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus,
input:-moz-autofill:active,
textarea:-moz-autofill,
textarea:-moz-autofill:hover,
textarea:-moz-autofill:focus,
textarea:-moz-autofill:active {
  background-color: transparent !important;
  color: inherit !important;
  transition: background-color 5000s ease-in-out 0s;
}

About OKLCH Color Space OKLCH is a modern color space that provides perceptually uniform colors. Unlike RGB/HEX, colors with the same lightness value in OKLCH appear equally bright to human eyes, making it ideal for creating accessible and visually consistent color palettes.

Step 4

Configure PostCSS

Create or update your postcss.config.mjs:

const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};
export default config;

Usage​

Now you're ready to start using RizzUI components in your application. For dark mode support, refer to our dark mode guide.

Basic Example​

Here's a simple example to get you started:

import { Button } from 'rizzui/button';

export default function App() {
  return (
    <>
      <Button>Get Started</Button>
    </>
  );
}

Class Name Utility (cn)​

The cn utility helps you merge Tailwind CSS classes intelligently. It automatically resolves conflicting classes and combines multiple class sources into a single string.

Key Features:

  • Resolves Tailwind class conflicts (e.g., px-2 vs px-4 → px-4 wins)
  • Supports strings, arrays, objects, and conditional expressions
  • Type-safe with full TypeScript support

Example:

The cn utility function is used to conditionally combine class names based on component props, enabling dynamic styling of the component.

import { cn } from 'rizzui/cn';
import { Button } from 'rizzui/button';

type CustomButtonProps = {
  className?: string;
  isVisible?: boolean;
  isDisabled?: boolean;
};

const CustomButton = (props: CustomButtonProps) => {
  const { className, isVisible = true, isDisabled = false, ...rest } = props;

  return (
    <Button
      {...rest}
      className={cn(
        'transition-all',
        !isVisible ? 'opacity-0 pointer-events-none' : 'opacity-100',
        isDisabled && 'cursor-not-allowed',
        className
      )}
    >
      Click me
    </Button>
  );
};

Next Steps​

Now that you have RizzUI set up, explore these resources to enhance your application:

Support​

If you encounter any issues or have questions:

  • Open an issue on GitHub
  • Check our documentation for detailed guides
  • Join our community for support and discussions