📦 Installation

# Using npm
npm install lightswind@lastest

# Using yarn
yarn add lightswind

# Using pnpm
pnpm add lightswind

# 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

# Basic Plugin Setup

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

🔧 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="[email protected]" />
            </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

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