appCN

CommunityIncomplete39/100Claim

npm @app-cn/mcpstdioMITupdated 3mo ago

Copy-paste mobile components for React Native + Expo.

Source Website3

What can you do with appCN?

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

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.

Install

Add appCN to your client. Pick the one you use.

claude mcp add mcp -- npx -y @app-cn/mcp

codex mcp add mcp -- npx -y @app-cn/mcp

amp mcp add mcp -- npx -y @app-cn/mcp

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

Add to `claude_desktop_config.json`, then restart Claude Desktop.

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

Add to `~/.cursor/mcp.json`, or `.cursor/mcp.json` for a single project.

code --add-mcp '{"name":"mcp","command":"npx","args":["-y","@app-cn/mcp"]}'

Or add the block manually to `.vscode/mcp.json` under `servers`.

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

Add to `~/.codeium/windsurf/mcp_config.json`.

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

Add to `cline_mcp_settings.json` via the MCP Servers panel.

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

Add to `~/.gemini/settings.json`.

{
  "mcpServers": {
    "mcp": {
      "type": "local",
      "command": "npx",
      "args": [
        "-y",
        "@app-cn/mcp"
      ],
      "tools": [
        "*"
      ]
    }
  }
}

Add to `~/.copilot/mcp-config.json`, or run `/mcp add` inside the CLI.

{
  "context_servers": {
    "mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@app-cn/mcp"
        ]
      }
    }
  }
}

Add to your Zed `settings.json`.

npx -y @app-cn/mcp

Run `goose configure`, choose **Add Extension → Command-line Extension**, and paste this command.

Versions	Published
0.1.2Latest	May 30, 2026
0.1.1	May 29, 2026

appCN

What can you do with appCN?

appCN

Quick start

What's in the box

Base

AI-native

Why appCN

Documentation

Contributing

Releases

Deploying

Acknowledgments

License

Install

Score

Version history