Get Started

Install Olyx and add your first component in minutes.

This guide walks you through adding Olyx components to your React application.

Prerequisites

  • Node.js 18+ or Bun 1.3+
  • React 19+
  • A project with CSS support (no Tailwind required — Olyx uses pure CSS custom properties)

Adding Components

You can add components automatically with the CLI or manually by copying the files.

With the CLI

Each component page provides a CLI command. The CLI creates the necessary files and installs dependencies for you.

Install All UI Components

Add every Olyx primitive at once:

This installs all 50+ components in one go — button, dialog, tabs, select, and everything else.

Install a Single Component

Manually

  1. Find a component on the Components or Particles pages.
  2. Copy the code from the component page.
  3. Create a new file in your project (e.g., components/ui/button.tsx) and paste the code.
  4. Install dependencies listed on the component page.
  5. Import and use the component in your app.

Add Your First Component

Then use it:

import { Button } from "@/components/ui/button"
 
export default function Page() {
  return <Button variant="primary" mode="filled">Click me</Button>
}