appCN
Install & correctly use appCN React Native / Expo components, streamed from the live registry.
appCN
Copy-paste mobile components for React Native + Expo.
A shadcn-philosophy library: you own the source, NativeWind styles the surface, Reanimated drives the motion — and the featured AI-native collection ships streaming bubbles, prompt composers, reasoning traces, and a reactive 3D voice orb.
Browse components · CLI docs · Mobile app · Live showcase · GitHub
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
appcnCLI, the shadcn registry,@app-cn/uifrom 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):
- Deploy the showcase first (
apps/showcase) so you have a URL. - Deploy the docs, setting
NEXT_PUBLIC_SHOWCASE_WEB_URLto that URL. - 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.
Installation
Source-derived launch command. Check the maintainer’s required arguments and credentials before running:
npx -y @app-cn/mcpSet up in your AI client
Merge this template into ~/Library/Application Support/Claude/claude_desktop_config.json. Keep existing servers. Add any arguments, credentials, and permissions required by the maintainer; this template has not been install-tested.
{
"mcpServers": {
"digital-shineup-appcn": {
"command": "npx",
"args": [
"-y",
"@app-cn/mcp"
]
}
}
}Restart Claude Desktop completely for changes to take effect. Confirm the server appears connected in the client’s tool list, then try a read-only example from its documentation.
Claude Desktop setup referencePackage
Compatible MCP Clients
appCN works with any MCP-compatible client. Copy the config snippet from the Configuration section above and add it to the file shown for your client, then restart the application.
- Claude Desktop
~/Library/Application Support/Claude/claude_desktop_config.jsonRestart Claude Desktop completely for changes to take effect. - Cursor
~/.cursor/mcp.jsonRestart Cursor for changes to take effect. - VS Code
.vscode/mcp.jsonReload VS Code window for changes to take effect. - Windsurf
~/.codeium/windsurf/mcp_config.jsonRestart Windsurf for changes to take effect. - Claude Code
.mcp.jsonSave at the project root, then start Claude Code in that project and review the MCP server approval prompt. Keep real credentials out of shared files.