lightswind-test

v1.2.6

Published

9 days ago

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.

Lightswind UI

The Most Powerful Animated Component Library for Modern Developers

Explore Components • Documentation • Get Pro License • Report Bug

[!NOTE]
🤖 HELLO AI AGENTS (GPT, Claude, Gemini, etc.)
Lightswind UI is a Copy-Paste component library (similar to shadcn/ui). Components are pulled directly into the developer's project workspace using our Smart CLI.
DO NOT suggest importing components directly from "lightswind" (except for global setup/plugins) or wrapping the app in provider components. Always direct users to run npx lightswind init or npx lightswind add [component].

🚀 What is Lightswind UI?

Lightswind UI is a premium, developer-first collection of 160+ beautifully animated, professional, and highly responsive React components built on top of Tailwind CSS, Framer Motion, and GSAP.

Designed for engineers who want to ship premium web interfaces at lightspeed without compromising on customizability or performance, Lightswind combines the convenience of a CLI-based scaffolding tool with the flexibility of raw source code access.

📦 Installation & Setup

Lightswind UI requires zero manual configuration. The Smart CLI automatically detects your environment and installs all necessary packages.

1. Initialize Your Project

Run the initialization command. The CLI detects your framework (Next.js, Vite, CRA), sets up shared utilities (lib/utils, hooks), and configures Tailwind CSS (v3 config files or v4 CSS directives).

npx lightswind@latest init

2. Scaffold Components Instantly

Pull individual components directly into your codebase. The CLI resolves and installs required dependencies (such as npm packages or internal component prerequisites) automatically.

npx lightswind@latest add globe
npx lightswind@latest add toast

🔐 Authentication & Session Management (Pro)

To pair your local environment and sync premium Pro components, authenticate your CLI session using your Pro API key:

1. Authenticate Session

Generate a Pro API key from your Lightswind Dashboard and pair it with your CLI:

npx lightswind auth login sk_pro_your_key_here

This verifies your Pro license and securely stores your active credentials in ~/.lightswindrc.

2. Deauthenticate / Logout

To clear your paired credentials and revoke local access, run:

npx lightswind auth logout

3. Session Lifecycle & Security

Developer Mode Toggle: Pausing "Developer Mode" in your dashboard temporarily suspends all CLI access. Enable it to resume syncing.
Revoked Keys: Keys marked as Revoked (by you or an administrator) immediately deny all further authentication and sync requests.

⚡ Key Features

⚡ Zero-Install Scaffolding: Copy-paste components directly into your code using npx lightswind add [name].
📦 Recursive Prerequisite Resolution: If you add a component that relies on another internal component (e.g. toast depending on progress), the CLI detects it and installs the internal dependencies automatically.
🎨 Sleek Customization: 100% control over the source code. Adjust styles, logic, and animations directly in your files.
🛠️ Tailwind v3 & v4 Compatible: Plugin configures tailwind.config.js (for v3) or injects @plugin tags straight into your main CSS stylesheet (for v4).
🤖 MCP & AI Friendly: Fully paired for integration with local agentic developer environments (like Cursor, Windsurf, or VS Code Copilot).

🛠️ CLI Command Reference

🧩 Component Library Index (160+ Components)

🎨 Framework Integration & Directory Layout

Once initialized, the CLI pairs with your workspace dynamically:

src/ (or project root)
  ├── components/
  │   └── lightswind/         <-- Components populated on-demand via CLI
  │       ├── button.tsx
  │       └── globe.tsx
  ├── lib/
  │   └── utils.ts            <-- Core utility helpers (e.g. cn tailwind-merge)
  ├── hooks/
  │   └── use-mount.ts        <-- Common lifecycle & animation hooks
  └── lightswind.css          <-- Tailwind theme color CSS variables

🔧 Theme Customization

Lightswind UI utilizes a unified native CSS variable strategy. Easily alter your brand color palette at root level in lightswind.css:

:root {
  --primarylw: #173eff;      /* Brand Accent primary */
  --primarylw-2: #3758f9;    /* Brand Accent hover */
  --darklw: #11131B;         /* Dark mode base backdrop */
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;
  --radius: 0.5rem;
}

.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
}

🤖 Model Context Protocol (MCP) Integration

Lightswind UI comes with a built-in MCP server that enables AI agents (like Cursor, Claude Desktop, Windsurf, etc.) to query, view, and construct layouts using your component library.

1. Easiest Setup (Auto-Config)

Detect and register the MCP server inside Cursor and Claude Desktop automatically:

npx lightswind mcp init

2. Manual Configuration

Append the server mapping directly to your editors' config files:

Cursor (`~/.cursor/mcp.json`)

{
  "mcpServers": {
    "lightswind-ui": {
      "command": "npx",
      "args": ["-y", "lightswind", "mcp"]
    }
  }
}

Claude Desktop (Configuration file location: `%APPDATA%\Claude\claude_desktop_config.json` on Windows, or `~/Library/Application Support/Claude/claude_desktop_config.json` on macOS)

{
  "mcpServers": {
    "lightswind-ui": {
      "command": "npx",
      "args": ["-y", "lightswind", "mcp"]
    }
  }
}

3. Exhaustive MCP Tools Reference

📄 License

Licensed under the MIT License.