Introduction

A shadcn-style mobile component library for Angular, React, and Vue — Material 3 on Android, liquid glass on iOS. Own your code.

touchcn is a component library for mobile web and cross-platform apps. Components adapt to the platform at runtime: Material Design 3 on Android, an iOS liquid-glass frosted look on iOS — one component set, no per-platform branching in your code.

Not a component package

touchcn follows the distribution model popularized by shadcn/ui — if you’re used to installing a component library from npm (Ionic, Angular Material, MUI), this works differently:

Components are source you own. npx touchcn add button copies the styled component source into your project. You import it from your own codebase and can edit every line — there is no opaque package to fight or fork.
Only the engine is an npm dependency. Platform detection, theming, and behavior primitives ship as small versioned packages; the components you copy are thin, styled compositions on top of them.
Updates still reach you. The CLI records what it installed: npx touchcn diff shows what changed upstream, and npx touchcn update applies it — three-way merging into files you’ve edited instead of overwriting them. See Updating components.

The easiest way to get started is an AI agent. touchcn ships agent skills for Claude Code, Cursor, and other compatible tools — install them once and your agent handles the setup, wiring, and conventions for you:

npx skills add capawesome-team/touchcn --skill touchcn
npx skills add capawesome-team/touchcn --skill touchcn-ionic-migration

Then just ask: “add touchcn to this project” or “migrate this Ionic app to touchcn”.

Why touchcn

Own your code

The CLI copies styled sources into your project. Edit them freely — nothing is imported from an opaque package.

Platform-adaptive

Material 3 on Android, iOS 26 liquid glass on iOS. The same components re-skin themselves at runtime.

Angular, React & Vue

Identical component set, one registry per framework. Same tcn-* classes and behavior across all three.

Updates without lock-in

The CLI pulls upstream fixes into your copied components — three-way merging files you’ve edited.

How it fits together

Four layers stack together — you depend on the first three and copy the fourth into your app:

Core (@touchcn/core) — framework-agnostic platform detection, AppearanceManager, cn().
Tailwind (@touchcn/tailwind) — a Tailwind v4 CSS-first token preset with .ios / .md namespaces.
Headless (@touchcn/angular / @touchcn/react / @touchcn/vue) — unstyled behavior and accessibility primitives.
Registry (touchcn add …) — styled components wiring layers 1–3 together, copied in via the CLI.

Where to next

Getting started

Install the engine, wire up Tailwind and the provider, and add your first component.

Theming

Token namespaces, color scheme, and Material You dynamic color.

Components

Browse the full component set with live, platform-switchable previews.

GitHub

Source, issues, and the registry that powers the CLI.