CLI

Install OonkooUI components with zero configuration. The CLI handles setup, dependencies, and authentication automatically.

OonkooUI uses shadcn/ui as the foundation for base UI primitives (Button, Card, Dialog, etc.). The OonkooUI components are higher-level blocks built on top of these primitives, giving you production-ready sections like Hero, Pricing, Features, and more.

Installation Methods

Choose the method that works best for your workflow. Both methods install the same components.

Recommended

OonkooUI CLI

Complete standalone solution with zero configuration required.

✓ Auto-creates lib/utils.ts
✓ Auto-installs dependencies
✓ Interactive component picker
✓ Component updates & sync
✓ Pro component access
✓ Download tracking
✓ npm, yarn, pnpm, bun support

shadcn CLI

Use shadcn CLI if you already have components.json configured.

✓ Works with existing shadcn setup
✓ Download tracking
✓ Free components only
✗ Requires components.json
✗ No Pro access
✗ No auto-setup

Using shadcn CLI

1. Add OonkooUI Registry

First, add the OonkooUI registry to your existing components.json file:

components.json

{
  "registries": {
    "@oonkoo": "https://ui.oonkoo.com/r/{name}.json"
  }
}

Note: This method only works if you have components.json configured. If you get a registry error, use the OonkooUI CLI instead.

2. Install Components (Method A: Registry)

Then, install OonkooUI components using the registry prefix:

Install a component

npx shadcn@latest add @oonkoo/pulse-button

Install multiple components

npx shadcn@latest add @oonkoo/pulse-button @oonkoo/spark-cursor

2. Install Components (Method B: Direct URL)

Alternatively, install components using the direct URL (no registry config needed):

Install via URL

npx shadcn@latest add "https://ui.oonkoo.com/r/pulse-button"

Tip: Use this method if you don't want to configure the registry. Works without components.json changes!

Using OonkooUI CLI

init

Initialize OonkooUI in your project with zero configuration. Automatically creates config, directories, and required utilities.

Terminal

npx oonkoo init

What init does:

✓ Creates oonkoo.config.json
✓ Sets up component directories
✓ Auto-creates lib/utils.ts with cn() helper
✓ Installs clsx & tailwind-merge dependencies
✓ Detects your package manager (npm/yarn/pnpm/bun)

Options: -y, --yes - Skip prompts and use defaults

add

Add components to your project. Automatically fetches code, installs dependencies, and tracks downloads.

Add a component

npx oonkoo add pulse-button

Add multiple components

npx oonkoo add pulse-button spark-cursor

Interactive component picker

npx oonkoo add

Available components: pulse-button, spark-cursor — Browse all

Options: -a, --all Add all components | -o, --overwrite Overwrite existing | -y, --yes Skip confirmations

Works with: npm, yarn, pnpm, bun (auto-detected)

list

List all available components from the registry with filtering options.

List all components

npx oonkoo list

Filter by category

npx oonkoo list --category buttons

Filter by tier

npx oonkoo list --tier free

Example output:

buttons
  pulse-button              free [element]
  An animated button with pulsating effect

other
  spark-cursor              free [element]
  Spark cursor effect on click

auth

Authenticate with OonkooUI to access Pro components. Supports browser-based login (recommended) or API key authentication.

npx oonkoo auth

npx oonkoo auth --api-key

Logout

npx oonkoo auth --logout

You can also use npx oonkoo login as an alias for auth.

update

Check for and apply updates to installed components.

Interactive update

npx oonkoo update

Update all

npx oonkoo update --all

OonkooUI CLI Configuration

The oonkoo.config.json file in your project root (created by npx oonkoo init):

oonkoo.config.json

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "hooks": "@/hooks"
  },
  "registryUrl": "https://ui.oonkoo.com/api/registry"
}

Requirements

System Requirements

✓ Node.js 18+ (LTS recommended)
✓ npm, yarn, pnpm, or bun

Project Requirements

✓ React 18+ (React 19 supported)
✓ Tailwind CSS 3+ (v4 supported)
✓ TypeScript (recommended)

Supported Frameworks

Next.js 14+Vite + ReactRemixCreate React AppAstro

Works with any React framework that supports Tailwind CSS.

Start Building

Browse the component library and start adding to your project.

Browse Components Installation Guide