Installation

Prerequisites

Before you begin, make sure you have:

• Node.js 18+
• A React project (Next.js, Vite, Remix, etc.)
• Tailwind CSS configured

Initialize

Run the init command to set up your project:

npx radk init

This will:

1. Create a components.json configuration file
2. Install base dependencies (clsx, tailwind-merge, class-variance-authority)
3. Set up your component aliases

Add Components

Use the add command to install components:

npx radk add button

You can add multiple components at once:

npx radk add button card input dialog

Each component is copied as source code into your src/components/ui/ directory.

Import and Use

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

export default function Page() {
  return <Button variant="outline">Click me</Button>
}

components.json

The init command creates a components.json file in your project root. This controls where components are installed and how imports resolve:

{
  "$schema": "https://radk.dev/schema.json",
  "style": "radk",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "app/globals.css",
    "baseColor": "slate-blue",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

Manual Installation

If you prefer not to use the CLI, you can copy component source files directly from the registry into your project.

Make sure you have the cn utility:

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

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