What is Lightswind UI?

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.

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.

npx lightswind@latest init

Why Lightswind UI?

Feature	Lightswind UI	shadcn/ui	Radix UI	Material UI
Copy-paste source ownership	✅	✅	❌	❌
Smart CLI delivery	✅	✅	❌	❌
MCP Server support	✅	✅	✅	✅
Pro CLI & authenticated delivery	✅	❌	❌	❌
3D & WebGL shader components	✅	❌	❌	❌
Integrated Framer Motion & GSAP animations	✅	❌	❌	❌
Zero runtime vendor lock-in	✅	✅	❌	❌

---

Quick Start

Requirements

• Node.js 18+
• React 18 or 19
• Tailwind CSS v3 or v4
• A Next.js, Vite, Remix, or CRA project

1 — Initialize

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.

npx lightswind@latest init

During setup, you'll be prompted to select a color theme:

Theme	Preview
default	Classic Blue — clean & minimal
deep-ocean	Midnight Blue — dark & immersive
crimson	Deep Red — bold & powerful
emerald	Forest Green — fresh & vibrant
amber	Warm Gold — elegant & energetic
amethyst	Soft Purple — modern & creative
mono	Pure Grayscale — ultra-clean

2 — Add a Component

npx lightswind add globe
npx lightswind add border-beam
npx lightswind add toast

The CLI resolves prerequisites automatically. If toast requires progress, both are installed. No manual dependency management.

3 — Import & Use

// Component code is installed in your local project directory
import { Globe } from "@/components/lightswind/globe";

export default function HeroSection() {
  return (
    <section>
      <Globe />
    </section>
  );
}

Note: Never import directly from "lightswind". All components live in your local components/lightswind/ directory — you own and control the c

... View full README on GitHub