lightswind/README.md

A professionally designed animate react component library & templates market that brings together functionality, accessibility, and beautiful aesthetics for modern applications.

<div align="center">
  <img src="https://codewithmuhilan.com/Extra-Assets/lightwind-logo.png" alt="Lightswind UI Logo" width="180" />
  
  <h1 align="center">Lightswind UI</h1>
  
  <p align="center">
    <b>A professionally designed component library & templates market that brings together functionality, accessibility, and beautiful aesthetics for modern applications</b>
  </p>
  
  <p align="center">
    <a href="https://github.com/codewithMUHILAN/Lightswind-UI-Library/stargazers">
      <img src="https://img.shields.io/github/stars/lightswind/lightswind?style=flat-square&labelColor=000000&color=4d4d4d" alt="GitHub Stars" />
    </a>
    <a href="https://www.npmjs.com/package/lightswind">
      <img src="https://img.shields.io/npm/v/lightswind?style=flat-square&labelColor=000000&color=4d4d4d" alt="NPM Version" />
    </a>
    <a href="https://github.com/codewithMUHILAN/Lightswind-UI-Library/blob/main/README.md">
      <img src="https://img.shields.io/github/license/lightswind/lightswind?style=flat-square&labelColor=000000&color=4d4d4d" alt="License" />
    </a>
    <!-- <a href="https://lightswind.com/discord">
      <img src="https://img.shields.io/discord/1234567890?style=flat-square&labelColor=000000&color=4d4d4d&label=discord" alt="Discord" />
    </a> -->
  </p>
  
  <br />
  <!-- <p align="center">
    <img src="https://i.ibb.co/CtFSK18/lightswind-components-display.png" alt="Lightswind UI Components" width="90%" />
  </p> -->
</div>

<hr />

## 📦 Installation

```bash
# Using npm
npm install lightswind

# Using yarn
yarn add lightswind

# Using pnpm
pnpm add lightswind
```

```bash
# Create lightswind folder in your project
npx create-lightswind
```

## 🔧 Requirements

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

## 🚀 Quick Start

```jsx
import React from 'react';
import { Button, Card } from 'lightswind';

export default function App() {
  return (
    <Card className="p-6 shadow-lg">
      <h2 className="text-2xl font-bold mb-4">Welcome to Lightswind UI</h2>
      <p className="text-muted-foreground mb-4">
        Start building beautiful interfaces with our professional components.
      </p>
      <Button>Get Started</Button>
    </Card>
  );
}
```

## ✨ 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
 **Accordion** 
**Seasonal Hover Cards**
**Interactive Card Gallery**
**Aurora Text**
**Confetti Button**
**Smokey Cursor**
**Scroll Timeline**
**Interactive Gradient Card**
**Dynamic Navigation**
**Gradient Button**
**Count Up**
**Password Strength Indicator**
**Border Beam**
**Animated Background**
**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**
**Accordion**
**Aspect Ratio**
**Resizable**
**Resizable**
**Scroll Area**
**Separator**
**Tabs**
**Breadcrumb**
**Command**
**Dock**
**Menubar**
**Navigation Menu**
**Pagination**
**Sidebar**

## 🎭 Advanced Animations

Lightswind UI incorporates sophisticated animation systems:

```jsx
import { InteractiveGradient } from 'lightswind';

function GradientDemo() {
  return (
    <InteractiveGradient 
      className="min-h-[400px] rounded-lg flex items-center justify-center"
      colors={["#ff0080", "#7928ca", "#0070f3"]}
    >
      <div className="text-center text-white p-8">
        <h2 className="text-3xl font-bold mb-4">Interactive Experience</h2>
        <p>Move your cursor to interact with this gradient background</p>
      </div>
    </InteractiveGradient>
  );
}
```

## 🔍 Customization

Lightswind UI components can be customized using Tailwind CSS classes:

```jsx
<Card 
  className="bg-gradient-to-tr from-zinc-900 to-zinc-800 text-white border-none"
  hoverable 
  bordered={false}
>
  <CardHeader>
    <CardTitle size="lg">Custom Card</CardTitle>
    <CardDescription>With gradient background</CardDescription>
  </CardHeader>
  <CardContent>
    This card uses a custom gradient background.
  </CardContent>
  <CardFooter align="end">
    <Button variant="secondary">Cancel</Button>
    <Button>Submit</Button>
  </CardFooter>
</Card>
```

## 🌈 Theming System

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

```css
: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%;
}
```

<!-- ## 📊 Component Showcase -->

<!-- <p align="center">
  <img src="https://i.ibb.co/QnNX6j7/lightswind-component-showcase.png" alt="Component Showcase" width="100%" />
</p> -->

## 📖 Documentation

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

[**View Documentation**](https://pro.lightswind.com/components?component=Introduction)

## 🛣️ Roadmap

- **Q3 2025** — Template marketplace launch
- **Q4 2025** — Advanced data visualization components
- **Q1 2026** — Headless component options for ultimate flexibility
- **Q2 2026** — Enterprise-focused features and plugins

## 🤝 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

<!-- Please read our [Contributing Guidelines](https://lightswind.com/contributing) for more details. -->

## 📋 Changelog

### Version 3.0.0 (June 2025)
- 🎉 Initial stable release with 40+ production-ready components
- 🌙 Dark mode support finalized
- ♿ WCAG 2.1 AA compliance across all components
- 📱 Responsive design for all screen sizes
- 🔧 Theme customization system
- ⚡ Performance optimizations

## 📄 License

Lightswind UI is licensed under the [MIT License](https://github.com/codewithMUHILAN/Lightswind-UI-Library/blob/main/README.md).

---

<div align="center">
  <p>
    <sub>Designed and built with ❤️ by the MuhilanOrg</sub>
  </p>
  <p>
<a href="https://instagram.com/codewith_muhilan/" target="_blank">
  <img src="https://img.shields.io/badge/Follow-@codewith_muhilan-blue?style=social&logo=instagram" alt="Instagram Follow" />
</a>
  </p>
</div>