# Zenora UI

> Animated React 19 + TypeScript components and AI-native tooling you copy directly into your project — not an npm dependency you install. 100% open-source under the MIT License with zero vendor lock-in and zero extra configuration.

## Overview
Zenora UI is a curated design engineering registry of 28 production-ready UI components. Each component is a single, self-contained file with direct source code ownership.

- Website: https://www.zenora-ui.in
- Component Directory: https://www.zenora-ui.in/components
- Documentation: https://www.zenora-ui.in/docs
- MCP Server Endpoint: https://www.zenora-ui.in/api/mcp
- GitHub Repository: https://github.com/kolikrish/Zenora-2.1

## Core Integration Methods

### 1. Zero-Config CLI
Install components and automatically resolve peer dependencies (`gsap`, `three`, `motion`, `lucide-react`) and static assets:
```bash
npx zenora-ui-registry@latest add <component-slug>
```
Flags:
- `-d, --dir <path>`: Target destination folder (default: `components/zenora-ui`)
- `-r, --registry <url>`: Custom registry URL (default: `https://www.zenora-ui.in`)
- `-y, --yes`: Overwrite existing files without prompt

### 2. Model Context Protocol (MCP) Server
Connect AI coding assistants (Cursor, Windsurf, Claude Desktop) directly to the Zenora UI registry:
- Server URL: `https://www.zenora-ui.in/api/mcp`
- Transport: `http` / SSE
- Config (`cursor.json` / `claude_desktop_config.json`):
```json
{
  "mcpServers": {
    "zenora-ui": {
      "type": "http",
      "url": "https://www.zenora-ui.in/api/mcp"
    }
  }
}
```
Available MCP Tools:
- `list_components(category?)`: Returns every component with slug, category, and metadata.
- `get_component(slug, props?)`: Injects complete source code, prop schema, dependencies, and asset URLs.

### 3. Public REST API
- `GET /api/components`: Returns full catalog schema with all component names, slugs, and prop definitions.
- `GET /api/components/<slug>`: Returns component code, npm dependencies, and assets JSON.
- `GET /api/components/<slug>?format=file`: Streams the raw `.tsx` source file.

## Tech Stack & Compatibility
- Framework: React 19 & Next.js 15+ (App Router with `'use client'` directives)
- Styling: Tailwind CSS v4
- Animation & Physics: Framer Motion, GSAP (ScrollTrigger), Three.js
- License: MIT License (Free for commercial and personal projects)

## Component Categories & Slugs

### Galleries & 3D WebGL
- [grid-infinite](https://www.zenora-ui.in/components/grid-infinite): Endless 2D drag plane with inertia, zigzag rows, and interactive drag-to-zoom.
- [spiral-gallery](https://www.zenora-ui.in/components/spiral-gallery): Cylindrical 3D WebGL helix gallery with speed-curl physics and golden-angle tap blur.
- [image-gallery](https://www.zenora-ui.in/components/image-gallery): 3D arcing image carousel with fluid lerped scrolling and center-focus tracking.
- [scroll-tunnel](https://www.zenora-ui.in/components/scroll-tunnel): Infinite 3D perspective tunnel with depth culling and smooth wheel descent.
- [savour-scroll](https://www.zenora-ui.in/components/savour-scroll): Cinematic sine-wave scrolling gallery with dynamic clip-path insets and Lenis momentum.
- [lumina-gallery](https://www.zenora-ui.in/components/lumina-gallery): Immersive 3D photo exhibition with depth layering.
- [prism-vision-gallery](https://www.zenora-ui.in/components/prism-vision-gallery): Refractive multi-angle prism perspective gallery.

### Interactive Physics & Cursors
- [falling-image-trail](https://www.zenora-ui.in/components/falling-image-trail): Interactive physics trail that flings, bounces, and drops floating transparent objects.
- [ink-reveal-cursor](https://www.zenora-ui.in/components/ink-reveal-cursor): Fluid dynamics GPU shader canvas trailing organic liquid ink.
- [aurora-cursor](https://www.zenora-ui.in/components/aurora-cursor): Lagging ambient cursor trail with rotating conic gradients.

### Transitions & Reveals
- [mask-page-transition](https://www.zenora-ui.in/components/mask-page-transition): Circular mask clip-path page transition.
- [blob-transition](https://www.zenora-ui.in/components/blob-transition): Organic SVG gooey blob morph transition.
- [dual-stairs-transition](https://www.zenora-ui.in/components/dual-stairs-transition): Split-column stepped shutter transition.
- [swap-transition](https://www.zenora-ui.in/components/swap-transition): Kinetic card slide and swap transition.
- [ascii-image-reveal](https://www.zenora-ui.in/components/ascii-image-reveal): Interactive ASCII typography canvas rasterizer.
- [image-reveal](https://www.zenora-ui.in/components/image-reveal): Curtain slice reveal on pointer interaction.

### Forms & Cards
- [luma-login-card](https://www.zenora-ui.in/components/luma-login-card): Frosted glass authentication window with spinning conic gradient button.
- [access-gateway](https://www.zenora-ui.in/components/access-gateway): Cyber-styled security access gateway form.
- [magnetic-cards](https://www.zenora-ui.in/components/magnetic-cards): 3D perspective tilt cards tracking cursor magnetic pull.
- [list-hover-cards](https://www.zenora-ui.in/components/list-hover-cards): Floating media preview following interactive item list hover.