Lightswind-UI-Library
starsforks
How to install Lightswind-UI-Library?
codewithmuhilan/lightswind-ui-library
$git clone https://github.com/codewithMUHILAN/Lightswind-UI-Library<br/>
README.md
| 1 | <div align="center"> |
| 2 | |
| 3 | <br/> |
| 4 | |
| 5 | <img src="https://firebasestorage.googleapis.com/v0/b/codewithmuhilandb.appspot.com/o/uploads%2Flightwind-logo.png?alt=media&token=6ba956f1-994c-46ca-9eda-6e46b5662eb9" alt="Lightswind UI" width="100" /> |
| 6 | |
| 7 | <br/> |
| 8 | <br/> |
| 9 | |
| 10 | # Lightswind UI |
| 11 | |
| 12 | **The world's first AI-native, CLI-first component library for React.** |
| 13 | 160+ animated, accessible, production-ready components — delivered as raw source code, owned by you forever. |
| 14 | |
| 15 | <br/> |
| 16 | |
| 17 | [](https://www.npmjs.com/package/lightswind) |
| 18 | [](https://www.npmjs.com/package/lightswind) |
| 19 | [](https://github.com/codewithMUHILAN/Lightswind-UI-Library) |
| 20 | [](./LICENSE) |
| 21 | |
| 22 | <br/> |
| 23 | |
| 24 | [Documentation](https://lightswind.com/components/introduction) · [Component Library](https://lightswind.com/components) · [Pro License](https://lightswind.com/pricing) · [MCP Server](https://lightswind.com/components/mcp-server) · [Changelog](https://lightswind.com/changelog) |
| 25 | |
| 26 | <br/> |
| 27 | |
| 28 | --- |
| 29 | |
| 30 | </div> |
| 31 | |
| 32 | ## What is Lightswind UI? |
| 33 | |
| 34 | Lightswind UI is a **source-code component library** built on the same philosophy pioneered by shadcn/ui — components live inside *your* project, not a runtime dependency. You install them with a single CLI command, own them completely, and customize them freely. |
| 35 | |
| 36 | What sets Lightswind UI apart is its **AI-native delivery layer** — the industry's first MCP (Model Context Protocol) server for a component library, letting AI coding agents like Cursor, Claude, and GitHub Copilot browse, fetch, and install components autonomously inside your codebase. |
| 37 | |
| 38 | ```bash |
| 39 | npx lightswind@latest init |
| 40 | ``` |
| 41 | |
| 42 | <br/> |
| 43 | |
| 44 | ## Why Lightswind UI? |
| 45 | |
| 46 | | Feature | Lightswind UI | shadcn/ui | Radix UI | Material UI | |
| 47 | |---|:---:|:---:|:---:|:---:| |
| 48 | | Copy-paste source ownership | ✅ | ✅ | ❌ | ❌ | |
| 49 | | Smart CLI delivery | ✅ | ✅ | ❌ | ❌ | |
| 50 | | MCP Server support | ✅ | ✅ | ✅ | ✅ | |
| 51 | | Pro CLI & authenticated delivery | ✅ | ❌ | ❌ | ❌ | |
| 52 | | 3D & WebGL shader components | ✅ | ❌ | ❌ | ❌ | |
| 53 | | Integrated Framer Motion & GSAP animations | ✅ | ❌ | ❌ | ❌ | |
| 54 | | Zero runtime vendor lock-in | ✅ | ✅ | ❌ | ❌ | |
| 55 | |
| 56 | <br/> |
| 57 | |
| 58 | --- |
| 59 | |
| 60 | ## Quick Start |
| 61 | |
| 62 | ### Requirements |
| 63 | |
| 64 | - **Node.js** 18+ |
| 65 | - **React** 18 or 19 |
| 66 | - **Tailwind CSS** v3 or v4 |
| 67 | - A **Next.js**, **Vite**, **Remix**, or **CRA** project |
| 68 | |
| 69 | <br/> |
| 70 | |
| 71 | ### 1 — Initialize |
| 72 | |
| 73 | Run this from the root of your project. The CLI detects your framework (Next.js, Vite, CRA), locates your `components` folder, installs shared utilities, and registers the Tailwind plugin automatically. |
| 74 | |
| 75 | ```bash |
| 76 | npx lightswind@latest init |
| 77 | ``` |
| 78 | |
| 79 | During setup, you'll be prompted to select a **color theme**: |
| 80 | |
| 81 | | Theme | Preview | |
| 82 | |---|---| |
| 83 | | `default` | Classic Blue — clean & minimal | |
| 84 | | `deep-ocean` | Midnight Blue — dark & immersive | |
| 85 | | `crimson` | Deep Red — bold & powerful | |
| 86 | | `emerald` | Forest Green — fresh & vibrant | |
| 87 | | `amber` | Warm Gold — elegant & energetic | |
| 88 | | `amethyst` | Soft Purple — modern & creative | |
| 89 | | `mono` | Pure Grayscale — ultra-clean | |
| 90 | |
| 91 | <br/> |
| 92 | |
| 93 | ### 2 — Add a Component |
| 94 | |
| 95 | ```bash |
| 96 | npx lightswind add globe |
| 97 | npx lightswind add border-beam |
| 98 | npx lightswind add toast |
| 99 | ``` |
| 100 | |
| 101 | The CLI resolves prerequisites automatically. If `toast` requires `progress`, both are installed. No manual dependency management. |
| 102 | |
| 103 | <br/> |
| 104 | |
| 105 | ### 3 — Import & Use |
| 106 | |
| 107 | ```tsx |
| 108 | // Component code is installed in your local project directory |
| 109 | import { Globe } from "@/components/lightswind/globe"; |
| 110 | |
| 111 | export default function HeroSection() { |
| 112 | return ( |
| 113 | <section> |
| 114 | <Globe /> |
| 115 | </section> |
| 116 | ); |
| 117 | } |
| 118 | ``` |
| 119 | |
| 120 | > **Note:** Never import directly from `"lightswind"`. All components live in your local `components/lightswind/` directory — you own and control the c |
People who liked this also viewed
6 picksType
- Figma-Context-MCPMCP server to provide Figma layout information to AI coding agents like CursorMCP ServersJul 2026
- sunnysideFigma-Context-MCPA comprehensive Model Context Protocol (MCP) server that bridges Figma designs with AI development workflows. It provides 30 specialized tools for extracting pixel-perfect code, assets, and component structures directly from Figma designs.MCP ServersApr 2026
- figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.MCP ServersJul 2026
- dcc-mcp-coreCore runtime and shared tooling for DCC-MCP: safe, skill-first MCP integration across Maya, Blender, Houdini, Photoshop, and custom DCC hosts.MCP ServersJul 2026
- godot-aiProduction-grade MCP server and AI tools for the Godot engine. A Snap to install. Totally free and fun.MCP ServersJul 2026
- freecad-mcpFreeCAD MCP(Model Context Protocol) serverMCP ServersJul 2026
