Lightswind UI 3.1.20

A collection of beautifully crafted React Components, Blocks & Templates built with Tailwind CSS. Create stunning web applications effortlessly by using our 100+ professional and animated react components.

📦 Installation

Step 1: Install Tailwind CSS

Lightswind UI components are built on Tailwind CSS. Make sure to install Tailwind in your project by following the instructions at Tailwind CSS Installation Guide.

Step 2: Install Lightswind UI Package

Add the Lightswind UI package to your project dependencies.

# Using npm
npm install lightswind@lastest

# Using yarn
yarn add lightswind

# Using pnpm
pnpm add lightswind

Step 3: Initialize Components

Set up Lightswind UI components in your project structure using our smart CLI tool.

🎯 Smart Dependency Management

Lightswind CLI automatically detects which dependencies your chosen components need and prompts you to install only those packages. This keeps your project lean!

Full Setup - Install All Components

Our CLI tool will install all components, utilities, and styles to your project.

npx lightswind@latest init

What this command does:

✓ 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.

Individual Component - Install What You Need

Install only the components you need with smart dependency detection. Replace `[component-name]` with the desired component (e.g., `button`, `globe`, `chart`).

# 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

What this command does:

✓ 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.

Category-Based Installation - NEW! 🆕

Install all components from a specific category at once with intelligent dependency management.

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>

📦 Available Categories

Category	Description	Dependencies	Command
`basic`	Basic UI components	None	`add -c basic`
`ui`	Standard UI elements	lucide-react	`add -c ui`
`layout`	Layout components	lucide-react	`add -c layout`
`form`	Form controls	lucide-react	`add -c form`
`navigation`	Navigation components	lucide-react	`add -c navigation`
`utility`	Utility components	None	`add -c utility`
`background`	Background effects	framer-motion	`add -c background`
`button`	Animated buttons	framer-motion	`add -c button`
`text`	Text effects	framer-motion	`add -c text`
`cursor`	Cursor effects	framer-motion	`add -c cursor`
`components`	Complex animated components	framer-motion	`add -c components`
`3d`	3D elements	three, @react-three/fiber	`add -c 3d`
`charts`	Chart components	recharts	`add -c charts`

**✅ Use category installation when:** - Building a dashboard → `npx lightswind@latest add -c charts` - Creating animated landing pages → `npx lightswind@latest add -c animated` - Building 3D experiences → `npx lightswind@latest add -c 3d` - Need multiple UI components → `npx lightswind@latest add -c ui` - Want all basic components → `npx lightswind@latest add -c basic`

❌ Use individual installation when:

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

📚 Example 1: Install All Animated Components

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

📚 Example 2: Install All 3D Components

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

📚 Example 3: Install Basic UI (No Dependencies)

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

🎯 Category Benefits

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

📋 Complete Category List

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

List Available Components

See all available components grouped by their dependencies.

npx lightswind@latest list

📱 Framework Compatibility

Lightswind UI works seamlessly with all major React frameworks!

✅ Supported Frameworks

Framework	Auto-Detected	Directory Structure	Status
Vite + React	✅ Yes	`src/components/`	✅ Fully Supported
Next.js (with src/)	✅ Yes	`src/components/`	✅ Fully Supported
Next.js (without src/)	✅ Yes	`components/`	✅ Fully Supported
Create React App	✅ Yes	`src/components/`	✅ Fully Supported
Generic React	✅ Yes	`src/components/`	✅ Fully Supported

🤖 Automatic Framework Detection

The Lightswind CLI automatically detects your framework from package.json and adapts the installation path accordingly. Zero configuration needed!

Example Output:

$ npx lightswind@latest init

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

✅ Installed all components

📁 Supported Directory Structures

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

🎯 How Detection Works

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

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

Step 4: Configure Tailwind Plugin - Automated! ✨

Good news! The Lightswind CLI automatically configures the Tailwind plugin for you.

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:

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

🤖 Automatic Configuration

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 */

📋 Supported Config Files

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

⚠️ Fallback Scenarios

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.

🔧 Manual Configuration (If Needed)

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 */

✅ Verify Configuration

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!

Final Step: Using Components

Start building your interface with Lightswind UI components.

Component Structure

After running the initialization command (e.g., `npx create-lightswind`), your project structure will be updated to include Lightswind UI components and utilities.

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="your@email.com" />
            </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

Get Started
- Introduction
- Installation
3D Elements
Background
Button
Components
Cursor
Text
UI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Button
- Card
- Carousel
- Chart
- Collapsible
- Context Menu
- Dialog
- Drawer
- Dropdown Menu
- Hover Card
- Popover
- Progress
- Sheet
- Skeleton
- Table
- Toast
- Tooltip
Form Controls
- Calendar
- Checkbox
- Command
- Form
- Input
- Input Otp
- Label
- Radio Group
- Select
- Slider
- Switch
- Textarea
- Toggle
- Toggle Group
Layout
- Accordion
- Aspect Ratio
- Resizable
- Scroll Area
- Separator
- Tabs
Navigation
- Breadcrumb
- Command
- Menubar
- Navigation Menu
- Pagination
- Sidebar

🌈 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:

📄 License

Lightswind UI is licensed under the [MIT License].

_{Designed and built with ❤️ by the Code with Muhilan}

Name		Name	Last commit message	Last commit date
Latest commit History 89 Commits
.history		.history
Components		Components
Styles		Styles
Templates		Templates
hooks		hooks
lib		lib
.gitignore		.gitignore
.npmignore		.npmignore
LICENSE		LICENSE
README.md		README.md
cli.js		cli.js
lightswindv1.0.css		lightswindv1.0.css
lightswindv1.0.min.js		lightswindv1.0.min.js
package.json		package.json
plugin.js		plugin.js

License

codewithMUHILAN/Lightswind-UI-Library

Folders and files

Latest commit

History

Repository files navigation

Lightswind UI 3.1.20

📦 Installation

Step 1: Install Tailwind CSS

Step 2: Install Lightswind UI Package

Step 3: Initialize Components

🎯 Smart Dependency Management

Full Setup - Install All Components

Individual Component - Install What You Need

Category-Based Installation - NEW! 🆕

📦 Available Categories

📚 Example 1: Install All Animated Components

📚 Example 2: Install All 3D Components

📚 Example 3: Install Basic UI (No Dependencies)

🎯 Category Benefits

📋 Complete Category List

List Available Components

📱 Framework Compatibility

✅ Supported Frameworks

🤖 Automatic Framework Detection

📁 Supported Directory Structures

🎯 How Detection Works

Step 4: Configure Tailwind Plugin - Automated! ✨

🤖 Automatic Configuration

📋 Supported Config Files

⚠️ Fallback Scenarios

🔧 Manual Configuration (If Needed)

✅ Verify Configuration

Final Step: Using Components

Component Structure

✨ Core Features

🧩 Component Library

Our Components List

Get Started

3D Elements

Background

Button

Components

Cursor

Text

UI Elements

Form Controls

Layout

Navigation

🌈 Theming System

📖 Documentation

🤝 Contributing

📄 License

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 2

Packages 0

Languages

Packages