# appCN
**Category:** ๐ป Developer Tools
**Repository:** https://github.com/Salah-XD/appCN
**Views:** 0
**Installs:** 0
**Upvotes:** 0
**Directory Page:** https://allmcps.com/mcp/appcn
## Description
Install & correctly use appCN React Native / Expo components, streamed from the live registry.
## Claude Desktop Quick Installation
Heuristic fallback โ verify the package name and runner against the repository README before running it. Uses `npx` (confidence: low):
```json
"mcpServers": {
"appcn": {
"command": "npx",
"args": ["-y","appcn"]
}
}
```
## Documentation & README
# 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.
[](https://www.npmjs.com/package/@app-cn/ui)
[](https://www.npmjs.com/package/@app-cn/cli)
[](./LICENSE)
[](https://github.com/Salah-XD/appCN/actions/workflows/ci.yml)
[](https://github.com/Salah-XD/appCN/stargazers)
[](https://reactnative.dev)
[](https://expo.dev)
[](https://www.nativewind.dev)
[](https://docs.swmansion.com/react-native-reanimated/)
[](https://pnpm.io)
[](https://appcn.vercel.app/docs/mobile-app)
[](https://appcn.vercel.app/docs/mobile-app)
**[Browse components](https://appcn.vercel.app/components)** ยท
**[CLI docs](https://appcn.vercel.app/docs/cli)** ยท
**[Mobile app](https://appcn.vercel.app/docs/mobile-app)** ยท
**[Live showcase](https://appcn-showcase.vercel.app)** ยท
**[GitHub](https://github.com/Salah-XD/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.
```bash
# 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:
```bash
# 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:
```bash
# Claude Code
claude mcp add appcn -- npx -y @app-cn/mcp
```
See **[MCP docs](https://appcn.vercel.app/docs/mcp)** 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](https://appcn.vercel.app/docs/mobile-app)**
> 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](https://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](https://appcn.vercel.app)** | Live docs site โ landing, every component, live previews |
| **[CLI docs](https://appcn.vercel.app/docs/cli)** | `init`, `add`, env vars, the idempotency contract |
| **[Mobile app](https://appcn.vercel.app/docs/mobile-app)** | Play Store + Expo Go install paths, deep-link contract |
| **[`CLAUDE.md`](./CLAUDE.md)** | Architecture, monorepo map, commands, Metro/Reanimated gotchas |
| **[`DESIGN.md`](./DESIGN.md)** | Taste layer โ motion rules, the "one delight detail" rule, the 8-step SOP |
| **[`CONTRIBUTING.md`](./CONTRIBUTING.md)** | Dev setup, the Changesets release flow, PR conventions |
| **[`AGENTS.md`](./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](./DESIGN.md#component-checklist-sop). 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 `.meta.ts` template ready to fill,
wires the registry + showcase entries, and verifies with typecheck + registry
build.
Full guide: [`CONTRIBUTING.md`](./CONTRIBUTING.md).
---
## Releases
Releases are driven by [Changesets](https://github.com/changesets/changesets)
and published to npm via **OIDC Trusted Publishing** โ zero long-lived secrets.
```bash
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://.vercel.app` |
| `NEXT_PUBLIC_EXPO_URL` | *(empty for v1 โ needs EAS Update for the QR tab)* |
| `NEXT_PUBLIC_REGISTRY_URL` | `https:///r` |
The showcase project needs no env vars. Defaults live in
[`apps/web/.env.example`](./apps/web/.env.example).
---
## Acknowledgments
Inspired by [shadcn/ui](https://ui.shadcn.com)'s copy-paste philosophy and
[react-native-reusables](https://www.reactnativereusables.com)'s
docs-site polish. Built on top of [NativeWind](https://www.nativewind.dev),
[Reanimated](https://docs.swmansion.com/react-native-reanimated/), and
[Expo](https://expo.dev).
---
## License
[MIT](./LICENSE) โ you own the code.