Lightswind UI 3.0.6

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

• Get Started

  • Installation Guide
  • Quick Start
  • Folder Structure

• Background

  • Aurora Background
  • Animated Gradient
  • Parallax Scroll

• Text

  • Typewriter Effect
  • Glitch Text
  • 3D Text Flip

• Button

  • Hover Button
  • Magnetic Button
  • Slide Reveal Button

• 3D Elements

  • 3D Hover Card
  • Image Ring
  • Perspective Scroll

• Cursor

  • Blob Cursor
  • Interactive Cursor
  • Cursor Trail

• Components

  • Animated Card
  • Reveal Box
  • Hover Overlay

• Layout

  • Sticky Sections
  • Grid Layout
  • Flex Panels

• UI Elements

  • Accordion
  • Tabs
  • Modal

• Form Controls

  • Animated Input
  • Custom Checkbox
  • Form Wizard

• Navigation

  • Sticky Header
  • Sidebar Menu
  • Mobile Drawer

🌈 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

Version 3.0.3 (July 2025)

• 🎉 Added 10+ Animated Components
• Rectified the old components bugs

Version 3.0.6 (July 2025)

• 🎉 Added 5+ Animated Components
• Rectified the old components bugs

📄 License

Lightswind UI is licensed under the MIT License.