lightswind

v3.1.28

Published

13 days ago

A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ 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 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

Lightswind UI is designed right out of the box to require zero manual setup or manual installation of core packages. Simply use npx to fetch components on-demand!

1. Quick Start & Initialize

Run the initialization command. The CLI will automatically detect your framework (Next.js, Vite, CRA), install necessary ecosystem dependencies natively, and fully configure your Tailwind CSS styles (v3 or v4!).

npx lightswind@latest init

2. Add Components Instantly

Install exactly what you need directly without touching your package.json. The incredibly smart CLI will fetch the component, recursively resolve and install any nested component dependencies effortlessly, and guarantee your Tailwind config is properly tuned.

npx lightswind@latest add globe
npx lightswind@latest add toast

⚡ Key Features

🚀 Zero Install Architecture: Grab components flawlessly using npx lightswind@latest add [name] directly. We handle the heavy lifting!
🎨 Smart Setup: Auto-detects Next.js (App/Src Router), Vite, and CRA natively.
📦 Deep Dependency Resolution: Have a component that uses other internal components like toast using progress? The CLI automatically recursively traverses imports and fetches nested Lightswind components and framer-motion instantly.
🛠️ Tailwind v3 & v4 Ready: The plugin intrinsically configures tailwind.config.js (for v3) or injects @plugin straight into your main CSS file (for v4).
🧩 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%;
}

📄 License

Licensed under the MIT License.