lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
354 lines (295 loc) • 18.8 kB
Markdown
<div align="center">
<img src="https://codewithmuhilan.com/Extra-Assets/lightwind-logo.png" alt="Lightswind UI Logo" width="180" />
# Lightswind UI
**The Most Powerful Animated Component Library for Modern Developers**
[](https://www.npmjs.com/package/lightswind)
[](https://github.com/codewithMUHILAN/Lightswind-UI-Library/stargazers)
[](https://github.com/codewithMUHILAN/Lightswind-UI-Library/blob/main/LICENSE)
[](https://www.npmjs.com/package/lightswind)
---
[**Explore Components**](https://lightswind.com/components/introduction) • [**Documentation**](https://lightswind.com/components/installation) • [**Get Pro**](https://lightswind.com/pricing) • [**Report Bug**](https://github.com/codewithMUHILAN/Lightswind-UI-Library/issues)
</div>
> **🤖 Hey AI! (GPT/Gemini/Claude)** - This is a **Copy-Paste** library (like shadcn/ui). Components are installed via CLI into the user's project. **Do NOT suggest a Provider wrapper or direct library imports.** Always refer to `npx lightswind@latest init` for setup.
## 🚀 What is Lightswind UI?
Lightswind UI is a premium collection of **160+ professional, beautifully animated, and highly customizable React components** built with **Tailwind CSS**, **Framer Motion**, and **GSAP**.
Designed for developers who want to build stunning, high-performance web applications without spending weeks on UI, Lightswind provides a seamless development experience with a **Smart CLI** that handles everything for you.
---
## 📦 Installation
Lightswind UI is designed right out of the box to require **zero manual setup** or manual installation of core packages. Simply use `npx` to fetch components on-demand!
### 1. Quick Start & Initialize
Run the initialization command. The CLI will automatically detect your framework (Next.js, Vite, CRA), install necessary ecosystem dependencies natively, and fully configure your Tailwind CSS styles (v3 or v4!).
```bash
npx lightswind@latest init
```
### 2. Add Components Instantly
Install exactly what you need directly without touching your `package.json`. The incredibly smart CLI will fetch the component, recursively resolve and install any nested component dependencies effortlessly, and guarantee your Tailwind config is properly tuned.
```bash
npx lightswind@latest add globe
npx lightswind@latest add toast
```
---
## ⚡ Key Features
* 🚀 **Zero Install Architecture**: Grab components flawlessly using `npx lightswind@latest add [name]` directly. We handle the heavy lifting!
* 🎨 **Smart Setup**: Auto-detects Next.js (App/Src Router), Vite, and CRA natively.
* 📦 **Deep Dependency Resolution**: Have a component that uses other internal components like `toast` using `progress`? The CLI automatically recursively traverses imports and fetches *nested* Lightswind components and `framer-motion` instantly.
* 🛠️ **Tailwind v3 & v4 Ready**: The plugin intrinsically configures `tailwind.config.js` (for v3) or injects `@plugin` straight into your main CSS file (for v4).
* 🧩 **Fully Customizable**: Copy-paste architecture gives you 100% control over the source code.
---
## 🛠️ CLI Commands
| Command | Description |
| :--- | :--- |
| `npx lightswind@latest init` | Full project setup & utility installation |
| `npx lightswind@latest add [name]` | Add a single component (e.g., `3d-image-carousel`) |
| `npx lightswind@latest add -c [cat]` | Add an entire category (e.g., `animated`, `3d`) |
| `npx lightswind@latest list` | View all 160+ available components |
---
## 🧩 Component Library (160+ Components)
<details open>
<summary><b>🧊 3D Elements (`3d`)</b></summary>
- [3d Image Ring](https://lightswind.com/components/3d-image-ring)
- [3d Image Carousel](https://lightswind.com/components/3d-image-carousel) ✨
- [3d Carousel](https://lightswind.com/components/3d-carousel)
- [3d Hover Gallery](https://lightswind.com/components/3d-hover-gallery)
- [3d Image Gallery](https://lightswind.com/components/3d-image-gallery) ✨
- [3d Marquee](https://lightswind.com/components/3d-marquee)
- [3d Model Viewer](https://lightswind.com/components/3d-model-viewer)
- [3d Perspective Card](https://lightswind.com/components/3d-perspective-card)
- [3d Scroll Trigger](https://lightswind.com/components/3d-scroll-trigger)
- [3d Slider](https://lightswind.com/components/3d-slider) ✨
- [Beam Circle](https://lightswind.com/components/beam-circle)
- [Chain Carousel](https://lightswind.com/components/chain-carousel)
- [Plasma Globe](https://lightswind.com/components/plasma-globe) ✨
- [Scroll Carousel](https://lightswind.com/components/scroll-carousel) ✨
- [Sparkle Navbar](https://lightswind.com/components/sparkle-navbar) ✨
- [Angled Slider](https://lightswind.com/components/angled-slider)
- [3d Image Slider](https://lightswind.com/components/3d-image-slider) ✨
- [3d Perspective Cards](https://lightswind.com/components/3d-perspective-cards)
- [Ascii Wave](https://lightswind.com/components/ascii-wave) ✨
- [Liquid Surface](https://lightswind.com/components/liquid-surface)
</details>
<details>
<summary><b>🌅 Backgrounds (`background`)</b></summary>
- [Aurora Shader](https://lightswind.com/components/aurora-shader) ✨
- [Animated Wave](https://lightswind.com/components/animated-wave)
- [Animated Bubble Particles](https://lightswind.com/components/animated-bubble-particles)
- [Animated Blob Background](https://lightswind.com/components/animated-blob-background)
- [Animated Ocean Waves](https://lightswind.com/components/animated-ocean-waves)
- [Aurora Background](https://lightswind.com/components/aurora-background)
- [Beam Grid Background](https://lightswind.com/components/beam-grid-background)
- [Fall Beam Background](https://lightswind.com/components/fall-beam-background)
- [Grid Dot Backgrounds](https://lightswind.com/components/grid-dot-backgrounds)
- [Gradient Background](https://lightswind.com/components/gradient-background)
- [Glowing Background](https://lightswind.com/components/glowing-background)
- [Glowing Lights](https://lightswind.com/components/glowing-lights)
- [Hell Background](https://lightswind.com/components/hell-background)
- [Innovation Background](https://lightswind.com/components/innovation-background)
- [Interactive Grid Background](https://lightswind.com/components/interactive-grid-background)
- [Dot Pattern](https://lightswind.com/components/dot-pattern)
- [Particles Background](https://lightswind.com/components/particles-background)
- [Rays Background](https://lightswind.com/components/rays-background)
- [Reflect Background](https://lightswind.com/components/reflect-background)
- [Smokey Background](https://lightswind.com/components/smokey-background)
- [Shader Background](https://lightswind.com/components/shader-background)
- [Sparkle Particles](https://lightswind.com/components/sparkle-particles)
- [Stripes Background](https://lightswind.com/components/stripes-background)
- [Wave Background](https://lightswind.com/components/wave-background)
- [Meteors](https://lightswind.com/components/meteors) ✨
- [Liquid Fluid](https://lightswind.com/components/liquid-fluid)
</details>
<details>
<summary><b>🧩 Advanced Components (`components`)</b></summary>
- [Connection Graph](https://lightswind.com/components/connection-graph) ✨
- [Magic Card](https://lightswind.com/components/magic-card) ✨
- [AI Prompt](https://lightswind.com/components/ai-prompt) ✨
- [Animated Notification](https://lightswind.com/components/animated-notification)
- [Bento Grid](https://lightswind.com/components/bento-grid)
- [Code Hover Cards](https://lightswind.com/components/code-hover-cards)
- [Count Up](https://lightswind.com/components/count-up)
- [Dock](https://lightswind.com/components/dock)
- [Drag Order List](https://lightswind.com/components/drag-order-list)
- [Dynamic Navigation](https://lightswind.com/components/dynamic-navigation)
- [Electro Border](https://lightswind.com/components/electro-border)
- [Glass Folder](https://lightswind.com/components/glass-folder)
- [Globe](https://lightswind.com/components/globe)
- [Glowing Cards](https://lightswind.com/components/glowing-cards)
- [Hamburger Menu Overlay](https://lightswind.com/components/hamburger-menu-overlay)
- [Image Reveal](https://lightswind.com/components/image-reveal)
- [Image Trail Effect](https://lightswind.com/components/image-trail-effect)
- [Interactive Card](https://lightswind.com/components/interactive-card)
- [Interactive Card Gallery](https://lightswind.com/components/interactive-card-gallery)
- [Interactive Gradient Card](https://lightswind.com/components/interactive-gradient-card)
- [Iphone16 Pro](https://lightswind.com/components/iphone16-pro)
- [Lens](https://lightswind.com/components/lens)
- [Magic Loader](https://lightswind.com/components/magic-loader)
- [Morphing Navigation](https://lightswind.com/components/morphing-navigation)
- [Orbit Card](https://lightswind.com/components/orbit-card)
- [Password Strength Indicator](https://lightswind.com/components/password-strength-indicator)
- [Scroll List](https://lightswind.com/components/scroll-list)
- [Scroll Stack](https://lightswind.com/components/scroll-stack)
- [Scroll Timeline](https://lightswind.com/components/scroll-timeline)
- [Seasonal Hover Cards](https://lightswind.com/components/seasonal-hover-cards)
- [Sliding Cards](https://lightswind.com/components/sliding-cards)
- [Sliding Logo Marquee](https://lightswind.com/components/sliding-logo-marquee)
- [Stack List](https://lightswind.com/components/stack-list)
- [Team Carousel](https://lightswind.com/components/team-carousel)
- [Terminal Card](https://lightswind.com/components/terminal-card)
- [Top Loader](https://lightswind.com/components/top-loader)
- [Top Sticky Bar](https://lightswind.com/components/top-sticky-bar)
- [Trusted Users](https://lightswind.com/components/trusted-users)
- [Ripple Loader](https://lightswind.com/components/ripple-loader)
- [Woofy Hover Image](https://lightswind.com/components/woofy-hover-image)
- [Nav Effect](https://lightswind.com/components/nav-effect)
</details>
<details>
<summary><b>🔘 Buttons (`button`)</b></summary>
- [Border Beam](https://lightswind.com/components/border-beam)
- [Confetti Button](https://lightswind.com/components/confetti-button)
- [Gradient Button](https://lightswind.com/components/gradient-button)
- [Ripple Button](https://lightswind.com/components/ripple-button)
- [Shine Button](https://lightswind.com/components/shine-button)
- [Trial Button](https://lightswind.com/components/trial-button)
- [Magnetic Button](https://lightswind.com/components/magnetic-button)
</details>
<details>
<summary><b>📝 Text Effects (`text`)</b></summary>
- [Aurora Text Effect](https://lightswind.com/components/aurora-text-effect)
- [Scroll Reveal](https://lightswind.com/components/scroll-reveal)
- [Shiny Text](https://lightswind.com/components/shiny-text)
- [Text Scroll Marquee](https://lightswind.com/components/text-scroll-marquee)
- [Typewriter Input](https://lightswind.com/components/typewriter-input)
- [Typing Text](https://lightswind.com/components/typing-text)
- [Video Text](https://lightswind.com/components/video-text)
</details>
<details>
<summary><b>🎨 UI Elements (`ui` / `basic`)</b></summary>
- [Accordion](https://lightswind.com/components/accordion)
- [Alert Dialog](https://lightswind.com/components/alert-dialog)
- [Alert](https://lightswind.com/components/alert)
- [Avatar](https://lightswind.com/components/avatar)
- [Badge](https://lightswind.com/components/badge)
- [Button](https://lightswind.com/components/button)
- [Card](https://lightswind.com/components/card)
- [Carousel](https://lightswind.com/components/carousel)
- [Chart](https://lightswind.com/components/chart)
- [Collapsible](https://lightswind.com/components/collapsible)
- [Context Menu](https://lightswind.com/components/context-menu)
- [Dialog](https://lightswind.com/components/dialog)
- [Drawer](https://lightswind.com/components/drawer)
- [Dropdown Menu](https://lightswind.com/components/dropdown-menu)
- [Hover Card](https://lightswind.com/components/hover-card)
- [Popover](https://lightswind.com/components/popover)
- [Progress](https://lightswind.com/components/progress)
- [Sheet](https://lightswind.com/components/sheet)
- [Skeleton](https://lightswind.com/components/skeleton)
- [Table](https://lightswind.com/components/table)
- [Toast](https://lightswind.com/components/toast)
- [Tooltip](https://lightswind.com/components/tooltip)
- [Toggle Theme](https://lightswind.com/components/toggle-theme)
- [Cool Theme Toggle](https://lightswind.com/components/cool-theme-toggle)
- [Slide To Confirm](https://lightswind.com/components/slide-to-confirm)
- [Animated Copy Button](https://lightswind.com/components/animated-copy-button)
- [Expandable Speed Dial](https://lightswind.com/components/expandable-speed-dial)
- [Draggable Reorder List](https://lightswind.com/components/draggable-reorder-list)
</details>
<details>
<summary><b>📝 Form Controls (`form`)</b></summary>
- [Calendar](https://lightswind.com/components/calendar)
- [Checkbox](https://lightswind.com/components/checkbox)
- [Command](https://lightswind.com/components/command)
- [Form](https://lightswind.com/components/form)
- [Input](https://lightswind.com/components/input)
- [Input Otp](https://lightswind.com/components/input-otp)
- [Label](https://lightswind.com/components/label)
- [Radio Group](https://lightswind.com/components/radio-group)
- [Select](https://lightswind.com/components/select)
- [Slider](https://lightswind.com/components/slider)
- [Switch](https://lightswind.com/components/switch)
- [Textarea](https://lightswind.com/components/textarea)
- [Toggle](https://lightswind.com/components/toggle)
- [Toggle Group](https://lightswind.com/components/toggle-group)
- [Animated Number Stepper](https://lightswind.com/components/animated-number-stepper)
- [Expandable Search Bar](https://lightswind.com/components/expandable-search-bar)
</details>
<details>
<summary><b>📐 Layout & Nav (`layout` / `navigation`)</b></summary>
- [Sparkle Navbar](https://lightswind.com/components/sparkle-navbar) ✨
- [Sidebar](https://lightswind.com/components/sidebar)
- [Breadcrumb](https://lightswind.com/components/breadcrumb)
- [Navigation Menu](https://lightswind.com/components/navigation-menu)
- [Pagination](https://lightswind.com/components/pagination)
- [Aspect Ratio](https://lightswind.com/components/aspect-ratio)
- [Resizable](https://lightswind.com/components/resizable)
- [Scroll Area](https://lightswind.com/components/scroll-area)
- [Separator](https://lightswind.com/components/separator)
- [Tabs](https://lightswind.com/components/tabs)
</details>
<details>
<summary><b>🖱️ Cursor Effects (`cursor`)</b></summary>
- [Canvas Confetti Cursor](https://lightswind.com/components/canvas-confetti-cursor)
- [Particle Orbit Effect](https://lightswind.com/components/particle-orbit-effect)
- [Smokey Cursor](https://lightswind.com/components/smokey-cursor)
- [Smooth Cursor](https://lightswind.com/components/smooth-cursor)
- [Smokey Cursor Hero](https://lightswind.com/components/smokey-cursor-hero)
</details>
---
## 🎨 Framework Compatibility
Zero configuration needed! The CLI automatically adapts to:
* **Next.js** (App Router & Pages Router)
* **Vite** (React & TypeScript)
* **Create React App**
### Next.js Quick Start (Recommended)
```bash
npx create-next-app@latest my-app --typescript --tailwind --eslint
cd my-app
npx lightswind@latest init
```
---
## 📂 Project Structure
After running `init`, your project will look like this:
```text
src/ (or root)
├── components/
│ └── lightswind/ <-- Components added via CLI
│ ├── button.tsx
│ └── globe.tsx
├── lib/
│ └── utils.ts <-- Shared utility functions
├── hooks/
│ └── use-mount.ts <-- Shared animation hooks
└── lightswind.css <-- Custom variable injections
```
---
## 🔧 Theming & Customization
Lightswind UI is built using CSS variables, allowing you to change your entire app's look in one place.
```css
:root {
--primarylw: #173eff; /* Main Brand Color */
--primarylw-2: #3758f9; /* Secondary/Hover Color */
--darklw: #11131B; /* Dark Theme Base */
--background: 0 0% 100%;
--foreground: 0 0% 0%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 0%;
--foreground: 0 0% 100%;
}
```
## 📜 Changelog
### v3.1.29
* ✨ **Meta-Category & Category Installation**: Introduced meta-category installations (`professional` and `animated`) and category-level commands:
* Initialize a project with only professional elements: `npx lightswind@latest init --professional` (or `-p`).
* Initialize a project with only animated elements: `npx lightswind@latest init --animated` (or `-a`).
* Add entire categories on-the-fly: `npx lightswind@latest add --category [category]` (supports aliases like `utilities`, `form-controls`, `3d`, `ui`).
* 🔄 **Deep Recursive Dependency Resolution**: Bulk and category installs now recursively traverse and resolve internal component imports (e.g., if a component in a category uses `border-beam` internally, the CLI automatically ensures `border-beam` is fetched and installed).
* 🚫 **Blocks Isolation**: Categorized blocks are excluded from standard installation commands.
* 🛠️ **Normalization & Aliasing**: Smart normalization of category names and plural/hyphenated arguments.
## 📄 License
Licensed under the [MIT License](https://github.com/codewithMUHILAN/Lightswind-UI-Library/blob/main/LICENSE).
---
<div align="center">
<p>Designed and built with ❤️ by <b>Code with Muhilan</b></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>
</div>