Lightswind UI

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

📦 Installation

# Using npm
npm install lightswind

# Using yarn
yarn add lightswind

# Using pnpm
pnpm add lightswind

# Create lightswind folder in your project
npx create-lightswind

🔧 Requirements

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

🚀 Quick Start

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:

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:

<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:

: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

🛣️ 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

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