Installation

Initialize Kinetic UI in your project using the official CLI or set up manually.

Recommended

1. Initialize Project via CLI

Run the init command to automatically configure components.json, Tailwind CSS color variables, lib/utils.ts, and design tokens.

bash

npx kinetic-ui-cli@latest init

2. Add Components

Use the add command to install specific creative or UI components along with their dependencies:

bash

npx kinetic-ui-cli@latest add hero-particles
npx kinetic-ui-cli@latest add floating-navbar
npx kinetic-ui-cli@latest add magnetic-button

Tip: Running npx kinetic-ui-cli@latest add without arguments opens an interactive category & component selector.

3. Update Components

To update an existing component to the latest registry version (auto-backing up your existing files):

bash

npx kinetic-ui-cli@latest update hero-particles

Manual Setup

If you prefer setting up components manually without the CLI:

Install Dependencies

Install the required motion primitives and helpers used under the hood by Kinetic UI components:

bash

npm install lucide-react clsx tailwind-merge @radix-ui/react-slot
npm install @radix-ui/react-accordion @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tabs

Add Utils Helper

Create lib/utils.ts and paste the cn class merging utility:

typescript

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

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

Copy Component Code

Select components from the sidebar, click the Usage tab, and paste them directly into your project.

PreviousIntroduction

NextTheme Studio