---
title: Installation Guide
description: Learn how to set up Lightswind UI in your Next.js, Vite, Remix, or other React projects.
---

# Installation Guide

Set up Lightswind UI in your project. Choose a framework guide below or use the quick start instructions.

## Choose Your Framework

### Next.js
1. Initialize the project:
   ```bash
   npx lightswind@latest init
   ```
2. The CLI will inspect your directory structure, auto-detect Next.js (App or Pages Router), configure HSL color tokens inside your global CSS file, and create a `lightswind.json` settings file.
3. Add a component:
   ```bash
   npx lightswind add border-beam
   ```

### Vite / React
1. Initialize:
   ```bash
   npx lightswind@latest init
   ```
2. Configure your styles path (e.g. `src/index.css`) and project alias directory.
3. Import components into your Vite SPA seamlessly.

### Create React App
1. Initialize:
   ```bash
   npx lightswind@latest init
   ```
2. Verify that Tailwind CSS v3 or v4 is installed and configured in your styles root.

### Manual Setup
If you prefer not to use the CLI, configure the setup manually:
1. Ensure the following peer dependencies are installed:
   ```bash
   npm install framer-motion lucide-react clsx tailwind-merge
   ```
2. Add the `cn` class merger utility to your project:
   ```typescript
   import { ClassValue, clsx } from "clsx";
   import { bgToClass } from "tailwind-merge";
   
   export function cn(...inputs: ClassValue[]) {
     return clsx(inputs);
   }
   ```
3. Manually copy the component source code from the sandbox and paste it directly into your source folder.

---

## Quick Start
If you already have Tailwind CSS configured:

1. Install the core NPM package:
   ```bash
   npm install lightswind@latest
   ```
2. Initialize components config:
   ```bash
   npx lightswind@latest init
   ```
3. Follow the CLI configuration prompts to build your components structure.

---

## Pro Setup
To unlock premium Lightswind Pro layouts and 3D components, authenticate the CLI using your license key:

- **CLI Authentication:**
  ```bash
  npx lightswind@latest init --license-key=YOUR_PRO_LICENSE_KEY
  ```
- **Environment Variable:** Or define the key inside your `.env` configuration:
  ```env
  LIGHTSWIND_LICENSE_KEY=YOUR_PRO_LICENSE_KEY
  ```

---

## CLI Reference Guide

- **Initialize Config:** `npx lightswind@latest init` - Configures directory settings and styles.
- **Add Component:** `npx lightswind add [component-name]` - Downloads component code and dependencies.
- **Verify License:** `npx lightswind license status` - Checks status of your Pro licence validation.
- **Upgrade/Update:** `npx lightswind update [component-name]` - Pulls the latest version of a component source file.