Lightswind UI Logo

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.

GitHub Stars NPM Version License


## 📦 Installation

Install Lightswind in your Project

```bash # 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

```bash # 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

```bash # 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 ```jsx 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 (
Sign in Enter your credentials to access your account
); } ``` ## ✨ 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: ```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%; } ``` ## 📖 Documentation For comprehensive documentation including all components, props, and examples: [**View Documentation**](https://pro.lightswind.com/components?component=Introduction) ## 🤝 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](https://github.com/codewithMUHILAN/Lightswind-UI-Library/blob/main/README.md). ---

Designed and built with ❤️ by the MuhilanOrg

Instagram Follow