JSN UI Overview

# JSN UI — Overview

JSN UI is a premium React UI kit for Next.js, built for AI products. It
ships with shadcn-grade primitives, AI/Agent components, motion
elements, charts, themes, an MCP server, and a CLI.

## When to use JSN UI

Use JSN UI when the user is building:

- An **AI product** (chat UI, agent dashboard, copilot, RAG app)
- A **Next.js** application that needs polished UI fast
- A **landing page**, dashboard, or admin tool
- A **design system** they want to extend

## When NOT to use JSN UI

- They're not on Next.js / React (use shadcn directly or another kit)
- They need a CMS (JSN UI is a component library, not content infra)
- They want a turnkey SaaS (JSN UI is primitives, not a product)

## Key facts

- **Stack**: Next.js 15, React 19, TypeScript strict, Tailwind v4
- **127++ components** in 5 categories: UI, AI, blocks, motion, charts
- **6 OKLCH theme presets** + visual builder at `/theme`
- **CLI**: `npx jsn-ui add <component>` (zero runtime deps)
- **MCP server**: `@jsn-ui/mcp` for icon search in Claude / Cursor
- **Magic generator**: `/magic` — plain English → JSN UI TSX
- **SEO kit**: full next-seo integration + 17 JSON-LD components
- **Templates**: 5 (SaaS, Directory, Ad landing, Lead magnet, Portfolio)
- **Sections**: 7 (Magazine, Deck, Data report, Newsletter, Dashboard, HyperFrame, Video)

## File map

- `src/components/ui/*` — shadcn-style primitives (16)
- `src/components/ai/*` — AI/Agent components (14)
- `src/components/blocks/*` — marketing/landing blocks (20)
- `src/components/motion/*` — animation elements (10)
- `src/components/charts/*` — pure-SVG charts (3)
- `src/components/templates/*` — template-specific shared (3)
- `src/components/seo/*` — JSON-LD components (17)
- `src/components/mobile/*` — mobile-first components (5)
- `src/hooks/*` — universally useful hooks (7)
- `src/lib/registry.ts` — source of truth for the 127+ entries

## How to install in a user's project

```bash
npx jsn-ui init my-app      # scaffold + utils + theme-provider
cd my-app
npx jsn-ui add button card  # copy components
npx jsn-ui list motion      # browse
npx jsn-ui info message     # details
npx jsn-ui mcp              # start MCP server
```

## Where to find docs

- `/` — landing
- `/components` — UI primitives
- `/ai` — AI components
- `/icons` — 72 hand-rolled icons
- `/motion` — 10 animation elements
- `/templates` — full-page starters
- `/sections` — drop-in page sections
- `/magic` — the magic generator
- `/theme` — theme builder
- `/playground/<component>` — interactive previews
- `/seo` — SEO kit
- `/registry` — full registry
- `/showcase` — all blocks in one scrolling page