AppCN

Install & correctly use appCN React Native / Expo components, streamed from the live registry.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "appcn": {
      "command": "npx",
      "args": [
        "-y",
        "@app-cn/cli@latest"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

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.

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

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):

Deploy the showcase first (apps/showcase) so you have a URL.
Deploy the docs, setting NEXT_PUBLIC_SHOWCASE_WEB_URL to 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.

_{Made with care by Salah-XD.}
_{Powered by Shineup ↗}

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

Last commit

3mo ago

Most recent push to the default branch.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about AppCN

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "appcn": { "command": "npx", "args": ["-y","@app-cn/cli@latest"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/appcn?style=directory)](https://allmcps.com/mcp/appcn)

HTML Embed

<a href="https://allmcps.com/mcp/appcn"><img src="https://allmcps.com/api/badge/appcn?style=directory" alt="AppCN on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

8/13 checks healthy over the last 45d

37Quality signal: Fair · 37/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools16/30

Adoption & activity2/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 2d ago via OSV.dev · @app-cn/cli@latest (npm)

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to AppCN →Install in Claude Desktop Install in Cursor Install in VS Code Setup guides for all 13 MCP clients

AppCN

Install & correctly use appCN React Native / Expo components, streamed from the live registry.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "appcn": {
      "command": "npx",
      "args": [
        "-y",
        "@app-cn/cli@latest"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

appCN

Copy-paste mobile components for React Native + Expo.

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.

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

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.

Full guide: CONTRIBUTING.md.

Releases

Releases are driven by 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):

Deploy the showcase first (apps/showcase) so you have a URL.
Deploy the docs, setting NEXT_PUBLIC_SHOWCASE_WEB_URL to 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.

_{Made with care by Salah-XD.}
_{Powered by Shineup ↗}

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

Last commit

3mo ago

Most recent push to the default branch.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about AppCN

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "appcn": { "command": "npx", "args": ["-y","@app-cn/cli@latest"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/appcn?style=directory)](https://allmcps.com/mcp/appcn)

HTML Embed

<a href="https://allmcps.com/mcp/appcn"><img src="https://allmcps.com/api/badge/appcn?style=directory" alt="AppCN on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

8/13 checks healthy over the last 45d

37Quality signal: Fair · 37/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools16/30

Adoption & activity2/15

Community engagement0/10

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 2d ago via OSV.dev · @app-cn/cli@latest (npm)

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to AppCN →Install in Claude Desktop Install in Cursor Install in VS Code Setup guides for all 13 MCP clients