Lightswind UI 3.0.0

Create stunning web applications effortlessly with Lightwind UI. Access 100+ customizable cli components, blocks, and templates for various applications—from dashboards to resource pages and catalog displays. Available in React, these pre-built animated elements are fully customizable, helping you craft user-friendly, visually appealing apps without starting from scratch.

📦 Installation

Install Lightswind in your Project

# Using npm
npm install lightswind@lastest

# Using yarn
yarn add lightswind

# Using pnpm
pnpm add lightswind

Run the create command to add Lightswind components to your local project

# Create lightswind folder in your project
npx create-lightswind

# Note**
What this command does:
Creates src/components/lightswind folder
All UI components are organized in this directory

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

Configures theme settings
Sets up custom theme variables and Tailwind configuration

Adds TypeScript types
Includes comprehensive type definitions for all components

Setup Black-UI Plugin

# Basic Plugin Setup

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

Start building your interface with Lightswind UI components

🔧 Requirements

• React 18+
• Tailwind CSS 3.3+
• TypeScript 4.9+ (for TypeScript users)

🚀 Quick Start

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>
  );
}

✨ Features

• 🎨 Beautiful Design System — Sleek, professional aesthetics with carefully crafted components
• ♿ Accessible Components — WCAG 2.1 compliant with full keyboard navigation and screen reader support
• 🌙 Dark Mode Built-in — Seamless light and dark mode transitions with consistent theming
• 📱 Fully Responsive — Components designed to work flawlessly across all device sizes
• ⚡ Performance Optimized — Efficient rendering with minimal bundle size impact
• 🧩 Highly Customizable — Flexible theming system that adapts to your brand
• 🔄 Interactive Effects — Smooth animations and transitions enhance user experience
• 📊 Advanced UI Patterns — Sophisticated components for complex data visualization and user interactions

🧩 Component Library

Lightswind UI includes a comprehensive set of components:

Our Components List

Animated Component

• 3D Hover Gallery
• 3D Image Gallery
• 3d Image Ring
• 3D Marquee
• 3D Carousel
• Animated Bubble Particles
• Animated Ocean Waves
• Aurora Text
• Border Beam
• Canvas Confetti Cursor
• Code Hover Cards
• Confetti Button
• Count Up
• Dynamic Navigation
• Glowing Cards
• Gradient Button
• Grid & Dot Backgrounds
• Hamburger Menu Overlay
• Interactive Gradient Card
• Lens
• Magic Cursor
• Magic Loader
• Morphing Navigation
• Particle Orbit Effect
• Password Strength Indicator
• Scrolling Cube Carousel
• Scroll Timeline
• Scroll Reveal
• Seasonal Hover Cards
• Shiny Text
• Sliding Logo Marquee
• Smokey Cursor
• Smooth Cursor
• Team Carousel
• Typewriter Input
• Woofy Hover Image

UI Elements

• Alert
• Alert Dialog
• Avatar
• Badge
• Button
• Card
• Carousel
• Chart
• Collapsible
• Confetti Button
• Context Menu
• Dialog
• Drawer
• Dropdown Menu
• Hover Card
• Popover
• Progress
• Sheet
• Skeleton
• Table
• Toast
• Tooltip
• Top Loader

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
• Dock
• Menubar
• Navigation Menu
• Pagination
• Sidebar

🌈 Theming System

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

:root {
  --primary: 240 5% 10%;
  --primary-foreground: 0 0% 98%;
  
  /* Add your custom theme colors */
  --brand-purple: 267 100% 58%;
  --brand-blue: 214 100% 60%;
}

.dark {
  --primary: 0 0% 98%;
  --primary-foreground: 240 5% 10%;
}

📖 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. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📋 Changelog

Version 3.0.0 (July 2025)

• 🎉 Initial stable release with 40+ production-ready components
• Basic to Advanced props for each components.
• Dark mode support finalized
• WCAG 2.1 AA compliance across all components
• Responsive design for all screen sizes
• Theme customization system
• Performance optimizations
• Well-documented for each component

📄 License

Lightswind UI is licensed under the MIT License.