{
"markdown": "\n\n# appCN\n\n**Copy-paste mobile components for React Native + Expo.**\n\nA shadcn-philosophy library: you own the source, NativeWind styles the surface,\nReanimated drives the motion — and the featured AI-native collection ships\nstreaming bubbles, prompt composers, reasoning traces, and a reactive 3D voice\norb.\n\n[](https://www.npmjs.com/package/@app-cn/ui)\n[](https://www.npmjs.com/package/@app-cn/cli)\n[](./LICENSE)\n[](https://github.com/Salah-XD/appCN/actions/workflows/ci.yml)\n[](https://github.com/Salah-XD/appCN/stargazers)\n\n[](https://reactnative.dev)\n[](https://expo.dev)\n[](https://www.nativewind.dev)\n[](https://docs.swmansion.com/react-native-reanimated/)\n[](https://pnpm.io)\n\n[](https://appcn.vercel.app/docs/mobile-app)\n[](https://appcn.vercel.app/docs/mobile-app)\n\n**[Browse components](https://appcn.vercel.app/components)** ·\n**[CLI docs](https://appcn.vercel.app/docs/cli)** ·\n**[Mobile app](https://appcn.vercel.app/docs/mobile-app)** ·\n**[Live showcase](https://appcn-showcase.vercel.app)** ·\n**[GitHub](https://github.com/Salah-XD/appCN)**\n\n
\n\n---\n\n## Quick start\n\nThe CLI handles NativeWind + Reanimated wiring and registers the `@app-cn`\nshadcn namespace for you. One command to set up, one to add a component.\n\n```bash\n# 1. (Recommended) One-shot project setup\nnpx @app-cn/cli@latest init\n\n# 2. Add any component by slug\nnpx @app-cn/cli@latest add voice-sphere\n```\n\nPrefer your own pipeline? `appcn add` is a thin wrapper around shadcn — you can\nskip the CLI entirely:\n\n```bash\n# Copy a single component via shadcn (no setup, one-off)\nnpx shadcn@latest add https://appcn.vercel.app/r/voice-sphere.json\n\n# Or pull the whole library as a managed dep\nnpm install @app-cn/ui\n```\n\nBuilding with an AI agent? Add the appCN **MCP server** so Claude Code, Cursor,\nor Windsurf can discover and install components for you — and write new code in\nappCN's motion/haptic style:\n\n```bash\n# Claude Code\nclaude mcp add appcn -- npx -y @app-cn/mcp\n```\n\nSee **[MCP docs](https://appcn.vercel.app/docs/mcp)** for Cursor / Windsurf / VS Code config.\n\n> Status: **v0.1.0 live on npm.** Five components shipped — the AI collection\n> is the marketed wedge and is the first place to land new work.\n\n---\n\n## What's in the box\n\n> **New:** appCN is live on real phones — scan a QR with **[Expo Go](https://appcn.vercel.app/docs/mobile-app)**\n> and the entire component gallery loads on Android or iPhone in seconds.\n> No emulator, no developer account. Standalone Play Store APK is in review —\n> shipping soon.\n\n### Base\n\n| Component | Delight |\n| :-- | :-- |\n| `Button` | Spring-y press scale to 0.96, settles in 140 ms — feels weighted, never twitchy |\n\n### AI-native\n\n| Component | Delight |\n| :-- | :-- |\n| `StreamBubble` | Three-phase thinking → token stream → settle |\n| `PromptInput` | Send morphs into a stop with a spinning ring |\n| `ReasoningTrace` | Auto-collapses the instant the answer lands |\n| `VoiceSphere` | Reactive 3D orb that breathes with voice level |\n\nEvery component has an **interactive web preview**, a **QR you can scan with\nExpo Go** to run it live on your phone, and a **video** — same code path\non every surface. → **[appcn.vercel.app/components](https://appcn.vercel.app/components)**\n\n---\n\n## Why appCN\n\n- **Real-phone previews.** Scan a QR with Expo Go and the component runs live\n on your device with native gestures. No emulator gymnastics.\n- **AI-native flagship.** The AI collection is the wedge — components built\n for AI apps that nobody else ships well.\n- **Quadruple distribution.** The `appcn` CLI, the shadcn registry, `@app-cn/ui`\n from npm — or the **MCP server**, so your AI coding agent installs components\n for you. Same primitives, your call.\n- **Motion-first defaults.** Reanimated + gesture-handler, shared motion\n tokens (`duration` / `easing` / `spring`), one delight detail per component.\n- **Dark-mode first.** Designed dark, then derived to light. Premium reads as\n depth, not rainbows.\n- **You own the source.** Copy-paste philosophy means no lock-in — once a\n component lands in your repo, edit freely.\n\n---\n\n## Documentation\n\n| Surface | What's there |\n| :-- | :-- |\n| **[appcn.vercel.app](https://appcn.vercel.app)** | Live docs site — landing, every component, live previews |\n| **[CLI docs](https://appcn.vercel.app/docs/cli)** | `init`, `add`, env vars, the idempotency contract |\n| **[Mobile app](https://appcn.vercel.app/docs/mobile-app)** | Play Store + Expo Go install paths, deep-link contract |\n| **[`CLAUDE.md`](./CLAUDE.md)** | Architecture, monorepo map, commands, Metro/Reanimated gotchas |\n| **[`DESIGN.md`](./DESIGN.md)** | Taste layer — motion rules, the \"one delight detail\" rule, the 8-step SOP |\n| **[`CONTRIBUTING.md`](./CONTRIBUTING.md)** | Dev setup, the Changesets release flow, PR conventions |\n| **[`AGENTS.md`](./AGENTS.md)** | Cross-tool guide for AI coding agents (Claude / Cursor / Windsurf / Codex / Aider) |\n\n---\n\n## Contributing\n\nEvery new component ships through the **8-step SOP** in\n[DESIGN.md → Component checklist](./DESIGN.md#component-checklist-sop). Don't\nskip steps — the PR template enforces them and a missing changeset blocks the\nrelease pipeline.\n\nWorking with an AI agent? Invoke the **`/new-component`** Claude skill — it\nwalks the checklist, drops a typed `.meta.ts` template ready to fill,\nwires the registry + showcase entries, and verifies with typecheck + registry\nbuild.\n\nFull guide: [`CONTRIBUTING.md`](./CONTRIBUTING.md).\n\n---\n\n## Releases\n\nReleases are driven by [Changesets](https://github.com/changesets/changesets)\nand published to npm via **OIDC Trusted Publishing** — zero long-lived secrets.\n\n```bash\npnpm changeset # describe what changed + pick a bump\ngit commit -am \"...\" # commit the changeset alongside your code\n# Open a PR. After merge to main, a \"Version Packages\" PR opens automatically.\n# Merge that PR → CI publishes via OIDC.\n```\n\nEvery published version gets a verified provenance badge on npm.\n\n---\n\n## Deploying\n\n\nThe site is two Vercel projects from one monorepo — click for setup.
\n\n| Project | Vercel root directory | What it serves |\n| :-- | :-- | :-- |\n| Docs | `apps/web` | Landing, `/components/*`, `/docs/*`, the shadcn registry at `/r/*.json` |\n| Showcase | `apps/showcase` | Expo web export — the iframe target for interactive previews |\n\n**Deploy order (matters):**\n\n1. **Deploy the showcase first** (`apps/showcase`) so you have a URL.\n2. **Deploy the docs**, setting `NEXT_PUBLIC_SHOWCASE_WEB_URL` to that URL.\n3. Optional: custom domains (`appcn.vercel.app` → docs, `appcn-showcase.vercel.app` → showcase).\n\n**Required env vars (docs project):**\n\n| Variable | Value |\n| :-- | :-- |\n| `NEXT_PUBLIC_SHOWCASE_WEB_URL` | `https://.vercel.app` |\n| `NEXT_PUBLIC_EXPO_URL` | *(empty for v1 — needs EAS Update for the QR tab)* |\n| `NEXT_PUBLIC_REGISTRY_URL` | `https:///r` |\n\nThe showcase project needs no env vars. Defaults live in\n[`apps/web/.env.example`](./apps/web/.env.example).\n\n \n\n---\n\n## Acknowledgments\n\nInspired by [shadcn/ui](https://ui.shadcn.com)'s copy-paste philosophy and\n[react-native-reusables](https://www.reactnativereusables.com)'s\ndocs-site polish. Built on top of [NativeWind](https://www.nativewind.dev),\n[Reanimated](https://docs.swmansion.com/react-native-reanimated/), and\n[Expo](https://expo.dev).\n\n---\n\n## License\n\n[MIT](./LICENSE) — you own the code.\n\n\n",
"bytes": 9028,
"sha": "2ce4ad86fc6c285ab140f1a748e993615bd6a52426cd9e7351eca6a343e30ac0",
"repo_slug": "salah-xd/appcn",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/mcp_digital_shineup_appcn_f6440c20/readme"
}