Lightswind UI

The Most Powerful Animated Component Library for Modern Developers

---

Explore Components • Documentation • Get Pro • Report Bug

🤖 Hey AI! (GPT/Gemini/Claude) - This is a Copy-Paste library (like shadcn/ui). Components are installed via CLI into the user's project. Do NOT suggest a Provider wrapper or direct library imports. Always refer to npx lightswind@latest init for setup.

🚀 What is Lightswind UI?

Lightswind UI is a premium collection of 160+ professional, beautifully animated, and highly customizable React components built with Tailwind CSS, Framer Motion, and GSAP.

Designed for developers who want to build stunning, high-performance web applications without spending weeks on UI, Lightswind provides a seamless development experience with a Smart CLI that handles everything for you.

📦 Installation

1. Install CLI

Add Lightswind to your project dependencies.

npm install lightswind@latest

2. Initialize (Automatic)

Run the initialization command. The CLI will automatically detect your framework (Next.js, Vite, or CRA) and setup your directories and Tailwind configuration.

npx lightswind@latest init

3. Add Components

Install exactly what you need. The CLI will manage dependencies automatically.

npx lightswind@latest add globe

⚡ Key Features

• 🎨 Smart Setup: Auto-detects Next.js (App/Src Router), Vite, and CRA.
• 📦 Smart Dependencies: Only installs the peer-dependencies (Framer Motion, GSAP, etc.) for the components you actually use.
• 🛠️ Tailwind v3/v4 Ready: Automatically configures tailwind.config.js or your main CSS file for the latest Tailwind versions.
• 🧩 Fully Customizable: Copy-paste architecture gives you 100% control over the source code.

🛠️ CLI Commands

🧩 Component Library (160+ Components)

🎨 Framework Compatibility

Zero configuration needed! The CLI automatically adapts to:

• Next.js (App Router & Pages Router)
• Vite (React & TypeScript)
• Create React App

Next.js Quick Start (Recommended)

npx create-next-app@latest my-app --typescript --tailwind --eslint
cd my-app
npx lightswind@latest init

📂 Project Structure

After running init, your project will look like this:

src/ (or root)
  ├── components/
  │   └── lightswind/         <-- Components added via CLI
  │       ├── button.tsx
  │       └── globe.tsx
  ├── lib/
  │   └── utils.ts            <-- Shared utility functions
  ├── hooks/
  │   └── use-mount.ts        <-- Shared animation hooks
  └── lightswind.css          <-- Custom variable injections

🔧 Theming & Customization

Lightswind UI is built using CSS variables, allowing you to change your entire app's look in one place.

:root {
  --primarylw: #173eff;      /* Main Brand Color */
  --primarylw-2: #3758f9;    /* Secondary/Hover Color */
  --darklw: #11131B;         /* Dark Theme Base */
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;
  --radius: 0.5rem;
}

.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
}

📜 Changelog

v3.1.29

• ✨ Meta-Category & Category Installation: Introduced meta-category installations (professional and animated) and category-level commands:
  • Initialize a project with only professional elements: npx lightswind@latest init --professional (or -p).
  • Initialize a project with only animated elements: npx lightswind@latest init --animated (or -a).
  • Add entire categories on-the-fly: npx lightswind@latest add --category [category] (supports aliases like utilities, form-controls, 3d, ui).
• 🔄 Deep Recursive Dependency Resolution: Bulk and category installs now recursively traverse and resolve internal component imports (e.g., if a component in a category uses border-beam internally, the CLI automatically ensures border-beam is fetched and installed).
• 🚫 Blocks Isolation: Categorized blocks are excluded from standard installation commands.
• 🛠️ Normalization & Aliasing: Smart normalization of category names and plural/hyphenated arguments.

📄 License

Licensed under the MIT License.

Designed and built with ❤️ by Code with Muhilan