Lightswind UI 3.0.0 Animated React Components

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

🔗 View Full Installation Guide

For a complete setup walkthrough with examples and configuration tips, visit: https://lightswind.com/components/installation

```

Start building your interface with Lightswind UI components

🔧 Requirements

• React 18+
• Tailwind CSS 4+
• 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

Version 3.0.9 (July 2025)

• 🎉 Added 3+ Animated background
• Rectified the old components bugs Update the installation setup and inplemented cli.

📄 License

Lightswind UI is licensed under the MIT License.

---

<sub>Designed and built with ❤️ by the MuhilanOrg</sub>