ToroUI

Quick Start

Get up and running with Toro UI in minutes.

Requirements

  • React 19+
  • Tailwind CSS v4
  • Next.js 15+ (recommended)

Installation

Install Toro UI's core dependencies:

npm install @base-ui/react class-variance-authority clsx tailwind-merge lucide-react

CSS Setup

Add the following imports to your globals.css:

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

Then define your theme using CSS custom properties. Toro UI uses the OKLCH color space for perceptually uniform colors:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.58 0.22 27);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
}

Add the cn Utility

Create a utility function for composing class names in lib/utils.ts:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Adding Components

Use the shadcn CLI to add components to your project:

npx shadcn@latest add button

This copies the component source into your project at components/ui/button.tsx, giving you full ownership of the code.

Usage

Import and use components directly:

import { Button } from "@/components/ui/button"

export function MyPage() {
  return (
    <Button variant="outline" size="lg">
      Get Started
    </Button>
  )
}

Project Structure

Toro UI components live in your project — you own the code:

src/
├── components/
│   └── ui/          # Toro UI components
│       ├── button.tsx
│       ├── dialog.tsx
│       └── ...
├── lib/
│   └── utils.ts     # cn() utility
└── app/
    └── globals.css   # Theme variables

Next Steps

IntroductionPrinciples