appCN

<div align="center">

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

</div>

---

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

<details> <summary>The site is two Vercel projects from one monorepo — click for setup.</summary>

| 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.

</details>

---

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.

<div align="center"> _{Made with care by <a href="https://github.com/Salah-XD">Salah-XD</a>.} <br /> _{Powered by <a href="https://www.shineup.digital"><b>Shineup</b></a> ↗} </div>