📦 Installation

# Using npm
npm install lightswind@lastest

# Using yarn
yarn add lightswind

# Using pnpm
pnpm add lightswind

npx lightswind@latest init

✓ Installs ALL components to src/components/lightswind All 100+ UI components are organized in this directory.

✓ Sets up src/lib folder Contains utilities and helpers for component functionality.

✓ Installs hooks to src/components/hooks Custom React hooks used by components.

✓ Copies CSS styles Places the lightswind.css file in src/components/lightswind.css.

✓ Lists all required dependencies Shows you all packages needed across all components and prompts for installation.

# Install a basic component (no extra dependencies)
npx lightswind@latest add button

# Install a specialized component (CLI auto-detects dependencies)
npx lightswind@latest add globe

Example output:

📦 globe requires: cobe
Install dependencies? (Y/n): Y
⏳ Installing cobe...
✅ Dependencies installed
✅ Installed globe component

✓ Checks component dependencies Reads which npm packages this component needs.

✓ Detects missing packages Compares with your package.json to find what's missing.

✓ Prompts for installation Asks before installing - you stay in control!

✓ Copies the component file Places it in src/components/lightswind/[component].tsx

✓ Copies shared utilities Includes lib, hooks, and styles automatically.

No bloat! Installing button won't add cobe, recharts, or @react-three/fiber. You only get what you need.

This powerful feature allows you to install entire groups of related components in one command, perfect for when you know you'll need multiple components of the same type.

Command Syntax:

npx lightswind@latest add --category <category-name>

# Short form
npx lightswind@latest add -c <category-name>

❌ Use individual installation when:

• You only need 1-2 specific components
• Keeping bundle size minimal is critical
• Testing a specific component

npx lightswind@latest add --category animated

Output:

🎨 Installing Animated Components...
📦 Detected: Vite
📁 Installing to: /your-project/src/components/lightswind
📊 Total components: 30

📦 The following dependencies are required:
  • framer-motion

Total: 1 packages

Install dependencies? (Y/n): Y
⏳ Installing framer-motion...
✅ Dependencies installed successfully

✅ Installed 30 components from Animated Components

🎉 Success! Animated Components ready to use.

Components installed:
  • 3d-hover-gallery
  • 3d-marquee
  • aurora-background
  • count-up
  • dock
  ... and 25 more

npx lightswind@latest add -c 3d

Output:

🌐 Installing 3D Components...
📦 Detected: Next.js
📁 Installing to: /your-project/components/lightswind
📊 Total components: 7

📦 The following dependencies are required:
  • @react-three/fiber
  • @react-three/drei

Total: 2 packages

Install dependencies? (Y/n): Y
⏳ Installing @react-three/fiber @react-three/drei...
✅ Dependencies installed successfully

✅ Installed 7 components from 3D Components

Components installed:
  • 3d-image-gallery
  • 3d-image-ring
  • 3d-model-viewer
  ... and 4 more

npx lightswind@latest add --category basic

Output:

✨ Installing Basic UI...
📦 Detected: Create React App
📁 Installing to: /your-project/src/components/lightswind
📊 Total components: 50

✅ Installed 50 components from Basic UI

🎉 Success! Basic UI ready to use.

Components installed:
  • badge
  • button
  • card
  • input
  • label
  ... and 45 more

| Benefit | Description | |---------|-------------| | Time Saving | Install 30+ components in one command vs individually | | Smart Dependencies | Automatically collects unique dependencies from all components | | No Duplicates | Intelligent deduplication of dependencies across components | | Organized Workflow | Group components by purpose (animated, 3D, charts, etc.) | | Easy Testing | Quickly try out all components in a category |

Basic UI Components (No Dependencies)

npx lightswind@latest add -c basic

Perfect for foundational UI elements without external package requirements. Includes: badge, button, card, input, label, progress, separator, skeleton, table, textarea, and ~40 more

UI Components (Lucide React)

npx lightswind@latest add -c ui

Standard UI elements that use icons from lucide-react. Includes: accordion, alert, breadcrumb, checkbox, dialog, dropdown-menu, select, tabs, toast, and ~20 more

Animated Components (Framer Motion)

npx lightswind@latest add -c animated

Beautiful animated components powered by framer-motion. Includes: aurora-background, count-up, dock, interactive-card, lens, scroll-reveal, shiny-text, and ~23 more

3D Components (Three.js)

npx lightswind@latest add -c 3d

Immersive 3D components using React Three Fiber. Includes: 3d-image-gallery, 3d-image-ring, 3d-model-viewer, and more

Chart Components (Recharts)

npx lightswind@latest add -c charts

Data visualization components. Includes: chart (with multiple chart types)

Specialized Components

npx lightswind@latest add -c specialized

Components with unique or multiple dependencies. Includes: calendar, carousel, form, globe, particles-background, and more

npx lightswind@latest list

Example Output:

$ npx lightswind@latest init

🚀 Installing all Lightswind components...
📦 Detected: Next.js
📁 Installing to: /your-project/components/lightswind

✅ Installed all components

The CLI intelligently detects and uses the appropriate directory structure for your project:

Vite / Create React App:

your-project/
├── src/
│   ├── components/
│   │   ├── lightswind/     ← Components installed here
│   │   ├── lib/            ← Utilities
│   │   ├── hooks/          ← Custom hooks
│   │   └── lightswind.css  ← Styles
│   └── App.tsx
└── package.json

Next.js (with src/ directory):

your-next-app/
├── src/
│   ├── app/
│   └── components/
│       ├── lightswind/     ← Components installed here
│       ├── lib/            ← Utilities
│       ├── hooks/          ← Custom hooks
│       └── lightswind.css  ← Styles
└── package.json

Next.js (without src/ directory):

your-next-app/
├── app/
├── components/
│   ├── lightswind/         ← Components installed here
│   ├── lib/                ← Utilities
│   ├── hooks/              ← Custom hooks
│   └── lightswind.css      ← Styles
└── package.json

1. Checks existing directories - If you already have a components/ folder, uses that
2. Detects framework - Reads package.json to identify Vite, Next.js, or CRA
3. Chooses path - Selects the appropriate path based on framework and structure
4. Creates directories - Automatically creates folders if they don't exist

You don't need to configure anything - it just works! ✨

When you install components using any of these commands:

• npx lightswind@latest init
• npx lightswind@latest add <component>
• npx lightswind@latest add --category <name>

The CLI will:

1. Detect your Tailwind CSS version from package.json
2. Auto-configure the plugin based on your version
3. Show you confirmation when done

For Tailwind CSS v3.x:

The CLI automatically adds the plugin to your tailwind.config.js:

$ npx lightswind@latest init

✅ Installed all components
✅ Installed shared utilities

🔧 Configuring Lightswind for Tailwind CSS v3...
✅ Added Lightswind plugin to tailwind.config

🎉 Success! Ready to use.

Your tailwind.config.js will be updated:

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('lightswind/plugin'),  // ← Automatically added!
  ],
}

For Tailwind CSS v4.x (Alpha):

The CLI automatically adds the plugin to your main CSS file:

$ npx lightswind@latest init

✅ Installed all components
✅ Installed shared utilities

🔧 Configuring Lightswind for Tailwind CSS v4...
✅ Added Lightswind plugin to globals.css

🎉 Success! Ready to use.

Your CSS file (e.g., globals.css) will be updated:

@import 'tailwindcss';
@plugin 'lightswind/plugin';  /* ← Automatically added! */

/* Your custom styles below */

The CLI automatically detects and modifies these files:

For Tailwind v3:

• tailwind.config.js
• tailwind.config.ts
• tailwind.config.mjs
• tailwind.config.cjs

For Tailwind v4:

• src/app/globals.css
• src/globals.css
• app/globals.css
• src/styles/globals.css
• src/index.css
• src/App.css
• styles/globals.css

If Tailwind is not installed:

⚠️  Tailwind CSS not found in package.json
💡 Install Tailwind CSS first:
   npm install -D tailwindcss

Action: Install Tailwind, then run the CLI again.

If config file is not found (v3):

⚠️  Tailwind config not found
💡 Add Lightswind plugin manually to tailwind.config.js:
   plugins: [require('lightswind/plugin')]

Action: Create tailwind.config.js or add the plugin manually.

If CSS file is not found (v4):

⚠️  Main CSS file not found
💡 Add Lightswind plugin manually to your CSS file:
   @import 'tailwindcss';
   @plugin 'lightswind/plugin';

Action: Add the plugin line to your main CSS file.

If automatic configuration doesn't work, you can configure manually:

For Tailwind CSS v3.x:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('lightswind/plugin'),
  ],
}

For Tailwind CSS v4.x:

/* In your main CSS file (e.g., globals.css) */
@import 'tailwindcss';
@plugin 'lightswind/plugin';

/* Your custom styles */

After installation, check that the plugin is added:

For v3:

# Check your tailwind.config.js
cat tailwind.config.js | grep lightswind

For v4:

# Check your CSS file
cat src/app/globals.css | grep lightswind

You should see the Lightswind plugin referenced!

src/
├── components/
│   ├── lightswind/
│   │   ├── button.tsx
│   │   ├── card.tsx
- TypeScript 4.9+ (for TypeScript users)

## 🚀 Quick Start

```jsx
import React from "react";
import { Button } from "@/components/lightswind/button";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/lightswind/card";
import { Input } from "@/components/lightswind/input";

export default function LoginPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900 p-4">
      <Card className="w-full max-w-md shadow-lg">
        <CardHeader className="space-y-1">
          <CardTitle className="text-2xl font-bold">Sign in</CardTitle>
          <CardDescription>
            Enter your credentials to access your account
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="email" className="text-sm font-medium">
                Email
              </label>
              <Input id="email" type="email" placeholder="[email protected]" />
            </div>
            <div className="space-y-2">
              <label htmlFor="password" className="text-sm font-medium">
                Password
              </label>
              <Input id="password" type="password" placeholder="••••••••" />
            </div>
          </div>
        </CardContent>
        <CardFooter>
          <Button className="w-full">Sign in</Button>
        </CardFooter>
      </Card>
    </div>
  );
}

✨ Core Features

• ⚡ Responsive by Default — All components are designed to work across devices of all sizes

• ⚡ Themeable — Customize the look and feel to match your brand identity

• ⚡ Accessible — Follows WAI-ARIA guidelines for inclusive user interfaces

• ⚡ Modern Animations — Subtle animations and transitions enhance user experience

• ⚡ CLI Installation — Quickly set up projects with our simple and powerful CLI tool

• ⚡ AI Assistance — Get smart recommendations and code suggestions powered by AI for faster development

🧩 Component Library

Create stunning web applications effortlessly by using our 100+ professional and animated react components.:

Our Components List

🌈 Theming System

Lightswind UI uses CSS variables for theming, making it easy to customize:

      ":root": {
        "--primarylw": "#173eff",
        "--primarylw-2": "#3758f9",
        "--darklw": "#11131B",
        "--darklw-2": "#1a1d25",
        "--greedy": "#07eae6",

        "--background": "0 0% 100%",
        "--foreground": "0 0% 0%",

        "--card": "0 0% 100%",
        "--card-foreground": "0 0% 0%",

        "--popover": "0 0% 100%",
        "--popover-foreground": "0 0% 0%",

        "--primary": "0 0% 0%",
        "--primary-foreground": "0 0% 100%",

        "--secondary": "0 0% 96%",
        "--secondary-foreground": "0 0% 0%",

        "--muted": "0 0% 96%",
        "--muted-foreground": "0 0% 45%",

        "--accent": "0 0% 96%",
        "--accent-foreground": "0 0% 0%",

        "--destructive": "0 84% 60%",
        "--destructive-foreground": "0 0% 100%",

        "--border": "0 0% 90%",
        "--input": "0 0% 90%",
        "--ring": "0 0% 0%",

        "--radius": "0.5rem",

        "--scrollbar-thumb": "0 0% 75%",
        "--scrollbar-track": "0 0% 95%",
        "--scrollbar-hover": "0 0% 65%",
      },

      // Dark theme
      ".dark": {
        "--primarylw": "#173eff",
        "--primarylw-2": "#3758f9",
        "--darklw": "#11131B",
        "--darklw-2": "#1a1d25",
        "--greedy": "#07eae6",

        "--background": "0 0% 0%",
        "--foreground": "0 0% 100%",

        "--card": "0 0% 5%",
        "--card-foreground": "0 0% 100%",

        "--popover": "0 0% 5%",
        "--popover-foreground": "0 0% 100%",

        "--primary": "0 0% 100%",
        "--primary-foreground": "0 0% 0%",

        "--secondary": "0 0% 15%",
        "--secondary-foreground": "0 0% 100%",

        "--muted": "0 0% 15%",
        "--muted-foreground": "0 0% 65%",

        "--accent": "0 0% 15%",
        "--accent-foreground": "0 0% 100%",

        "--destructive": "0 62% 30%",
        "--destructive-foreground": "0 0% 100%",

        "--border": "#000",
        "--input": "0 0% 20%",
        "--ring": "0 0% 20%",

        "--scrollbar-thumb": "0 0% 25%",
        "--scrollbar-track": "0 0% 10%",
        "--scrollbar-hover": "0 0% 35%",
      },

📖 Documentation

For comprehensive documentation including all components, props, and examples:

View Documentation

🤝 Contributing

We welcome contributions to Lightswind UI! Here's how you can help:

1. Request a feature
2. Report an issue
3. Buy me a Coffee (Support Us❤️)
4. Buy Our Premium Plan (Support Us❤️)
5. Star out Repository (Star Us❤️)

📄 License

Lightswind UI is licensed under the [MIT License].