lightswind

v3.1.21

Published

21 days ago

A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 151+ professional and animated react components.

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 150+ 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 (150+ 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%;
}

📄 License

Licensed under the MIT License.