appCN

---

Quick start

The CLI handles NativeWind + Reanimated wiring and registers the @app-cn shadcn namespace for you. One command to set up, one to add a component.

# 1. (Recommended) One-shot project setup
npx @app-cn/cli@latest init

# 2. Add any component by slug
npx @app-cn/cli@latest add voice-sphere

Prefer your own pipeline? appcn add is a thin wrapper around shadcn — you can skip the CLI entirely:

# Copy a single component via shadcn (no setup, one-off)
npx shadcn@latest add https://appcn.vercel.app/r/voice-sphere.json

# Or pull the whole library as a managed dep
npm install @app-cn/ui

Building with an AI agent? Add the appCN MCP server so Claude Code, Cursor, or Windsurf can discover and install components for you — and write new code in appCN's motion/haptic style:

# Claude Code
claude mcp add appcn -- npx -y @app-cn/mcp

See MCP docs for Cursor / Windsurf / VS Code config.

Status: v0.1.0 live on npm. Five components shipped — the AI collection is the marketed wedge and is the first place to land new work.

---

What's in the box

New: appCN is live on real phones — scan a QR with Expo Go and the entire component gallery loads on Android or iPhone in seconds. No emulator, no developer account. Standalone Play Store APK is in review — shipping soon.

Base

Component	Delight
Button	Spring-y press scale to 0.96, settles in 140 ms — feels weighted, never twitchy

AI-native

Component	Delight
StreamBubble	Three-phase thinking → token stream → settle
PromptInput	Send morphs into a stop with a spinning ring
ReasoningTrace	Auto-collapses the instant the answer lands
VoiceSphere	Reactive 3D orb that breathes with voice level

Every component has an interactive web preview, a QR you can scan with Expo Go to run it live on your phone, and a video — same code path on every surface. → appcn.vercel.app/components

---

Why appCN

• Real-phone previews. Scan a QR with Expo Go and the component runs live on your device with native gestures. No emulator gymnastics.
• AI-native flagship. The AI collection is the wedge — components built for AI apps that nobody else ships well.
• Quadruple distribution. The appcn CLI, the shadcn registry, @app-cn/ui from npm — or the MCP server, so your AI coding agent installs components for you. Same primitives, your call.
• Motion-first defaults. Reanimated + gesture-handler, shared motion tokens (duration / easing / spring), one delight detail per component.
• Dark-mode first. Designed dark, then derived to light. Premium reads as depth, not rainbows.
• You own the source. Copy-paste philosophy means no lock-in — once a component lands in your repo, edit freely.

---

Documentation

Surface	What's there
appcn.vercel.app	Live docs site — landing, every component, live previews
CLI docs	init, add, env vars, the idempotency contract
Mobile app	Play Store + Expo Go install paths, deep-link contract
CLAUDE.md	Architecture, monorepo map, commands, Metro/Reanimated gotchas
DESIGN.md	Taste layer — motion rules, the "one delight detail" rule, the 8-step SOP
CONTRIBUTING.md	Dev setup, the Changesets release flow, PR conventions
AGENTS.md	Cross-tool guide for AI coding agents (Claude / Cursor / Windsurf / Codex / Aider)

---

Contributing

Every new component ships through the 8-step SOP in DESIGN.md → Component checklist. Don't skip steps — the PR template enforces them and a missing changeset blocks the release pipeline.

Working with an AI agent? Invoke the /new-component Claude skill — it walks the checklist, drops a typed <slug>.meta.ts template ready to fill, wires the registry + showcase entries, and verifies with typecheck + registry build.

Full guide: CONTRIBUTING.md.

---

Releases

Releases are driven by Changesets and published to npm via OIDC Trusted Publishing — zero long-lived secrets.

pnpm changeset           # describe what changed + pick a bump
git commit -am "..."     # commit the changeset alongside your code
# Open a PR. After merge to main, a "Version Packages" PR opens automatically.
# Merge that PR → CI publishes via OIDC.

Every published version gets a verified provenance badge on npm.

---

Deploying

The site is two Vercel projects from one monorepo — click for setup.

Project	Vercel root directory	What it serves
Docs	apps/web	Landing, /components/*, /docs/*, the shadcn registry at /r/*.json
Showcase	apps/showcase	Expo web export — the iframe target for interactive previews

Deploy order (matters):

1. Deploy the showcase first (apps/showcase) so you have a URL.
2. Deploy the docs, setting NEXT_PUBLIC_SHOWCASE_WEB_URL to that URL.
3. Optional: custom domains (appcn.vercel.app → docs, appcn-showcase.vercel.app → showcase).

Required env vars (docs project):

Variable	Value
NEXT_PUBLIC_SHOWCASE_WEB_URL	https://<showcase-project>.vercel.app
NEXT_PUBLIC_EXPO_URL	(empty for v1 — needs EAS Update for the QR tab)
NEXT_PUBLIC_REGISTRY_URL	https://<docs-domain>/r

The showcase project needs no env vars. Defaults live in apps/web/.env.example.

---

Acknowledgments

Inspired by shadcn/ui's copy-paste philosophy and react-native-reusables's docs-site polish. Built on top of NativeWind, Reanimated, and Expo.

---

License

MIT — you own the code.