https://github.com/codewithmuhilan/lightswind-ui
Create stunning web applications effortlessly with Lightwind UI. Access 100+ customizable CLI components, blocks, and templates—from dashboards to resource pages. Available in React, these animated elements are fully customizable, helping you craft user-friendly, visually appealing apps quickly
https://github.com/codewithmuhilan/lightswind-ui
animated-components frontend html lightswind-ui react tailwindcss ui-kit ui-library
Last synced: 11 months ago
JSON representation
Create stunning web applications effortlessly with Lightwind UI. Access 100+ customizable CLI components, blocks, and templates—from dashboards to resource pages. Available in React, these animated elements are fully customizable, helping you craft user-friendly, visually appealing apps quickly
- Host: GitHub
- URL: https://github.com/codewithmuhilan/lightswind-ui
- Owner: codewithMUHILAN
- License: other
- Created: 2023-07-11T13:17:53.000Z (almost 3 years ago)
- Default Branch: Master
- Last Pushed: 2025-07-18T05:09:29.000Z (11 months ago)
- Last Synced: 2025-07-18T08:09:20.596Z (11 months ago)
- Topics: animated-components, frontend, html, lightswind-ui, react, tailwindcss, ui-kit, ui-library
- Language: JavaScript
- Homepage: https://lightswind.com/
- Size: 193 MB
- Stars: 186
- Watchers: 5
- Forks: 38
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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.
## 📦 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
Email
Password
Sign in
);
}
```
## ✨ 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
- Introduction
- Installation
-
Background
- Animated Wave
- Animated Bubble Particles
- Animated Ocean Waves
- Grid & Dot Backgrounds
-
Text
- Aurora Text
- Scroll Reveal
- Shiny Text
- Typewriter Input
-
Button
- Border Beam
- Confetti Button
- Gradient Button
-
3D Elements
- 3d Image Ring
- 3D Carousel
- 3D Marquee
- 3D Hover Gallery
-
Cursor
- Canvas Confetti Cursor
- Magic Cursor
- Particle Orbit Effect
- Smokey Cursor
- Smooth Cursor
-
Components
- Animated Notification
- Code Hover Cards
- Count Up
- Dynamic Navigation
- Glowing Cards
- Hamburger Menu Overlay
- Interactive Gradient Card
- Lens
- Magic Loader
- Morphing Navigation
- Password Strength Indicator
- Scroll Stack
- Scroll Timeline
- Seasonal Hover Cards
- Sliding Logo Marquee
- Team Carousel
- Woofy Hover Image
-
Layout
- Accordion
- Aspect Ratio
- Resizable
- Scroll Area
- Separator
- Tabs
-
UI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Button
- Card
- Carousel
- Chart
- Collapsible
- 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
-
Navigation
- Breadcrumb
- Command
- Dock
- Menubar
- Navigation Menu
- Pagination
- Sidebar
## 🌈 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
