Mobile UI components
that own their platform.
touchcn is a shadcn-style set of mobile UI components for Angular, React, and Vue — authentic Material 3 on Android, iOS liquid glass on iOS. Tailwind-styled, copied into your repo, yours to edit.
One component set. Two design languages.
The exact same demo app, live — iOS liquid glass on the left, Material 3 on the right. No forked code, no screenshots.
iOS · Liquid Glass
Android · Material 3
Why touchcn
The ownership model of shadcn, aimed at platform-authentic mobile UI.
Own the code
The CLI copies styled component source into your repo. Edit every line — nothing is hidden behind an opaque package.
Authentic MD3 + liquid glass
Material Design 3 (Material You) on Android, iOS 26 liquid glass on iOS. Not an approximation of either — the real look on both.
One set, per-platform rendering
A single component set re-skins itself at runtime. No platform conditionals in your application code.
Tailwind v4 tokens
A CSS-first token layer with `.ios` / `.md` namespaces holds all platform styling, so your utility classes always win.
Angular, React & Vue
A matching component set on Angular, React, and Vue, all emitting identical classes from one styling source.
CLI distribution
Add components with a single command. Registry dependencies resolve recursively and required packages are printed for you.
How it works
Three steps from empty project to source you own.
Initialize
Scaffold touchcn.json and pick your framework.
Add a component
Fetch styled sources and resolve their dependencies.
Own the code
The files land in your repo — edit markup, classes and variants freely.
Add a component, own the source
touchcn add copies styled component sources into your project and resolves their registry dependencies. From there the files are yours — edit the markup, tweak the classes, extend the variants. The engine packages keep the behavior patchable over npm.
# Initialize components.json, then add a component
npx @touchcn/cli init
npx touchcn add buttonimport { TcnButton } from '@/components/ui/button';
// Renders as Material 3 on Android and liquid glass on iOS —
// same component, no platform branching in your code.
export function SaveBar() {
return <TcnButton variant="primary">Save changes</TcnButton>;
}A growing component set
41 components — from buttons, inputs and lists to the gesture-driven ones nobody enjoys building. Every one ships with a live, platform-switchable preview in the docs.
Segmented
An inset iOS pill with a sliding thumb, or an MD3 connected button group. Same markup.
Picker
The classic spinning drum. Flick it and it decelerates, snaps and rubber-bands at the ends.
Select
One form control that opens an anchored Material dropdown, or an iOS bottom-sheet picker.
Reorder
Drag rows by a grip handle with edge auto-scroll — plus a full keyboard path.
Datepicker
A Material 3 modal calendar or an iOS inline calendar sheet. Date, time and range modes.
Input OTP
Segmented code entry with paste, numeric keyboard and iOS SMS autofill for free.
Bottom Sheet
Free-form panel that slides up from the bottom, with focus trap and scroll lock.
Modal
Full-screen task surface — an iOS page sheet, an MD3 full-screen dialog.
Action Sheet
Bottom-anchored list of contextual actions, with destructive and cancel roles.
Tab Bar
Bottom navigation with a sliding thumb that follows the active tab.
Infinite Scroll
Sentinel-driven paging with a pending guard, short-list refill and an exhausted state.
Toast
Transient snackbar with an optional action — queued, one at a time, survives navigation.
Whole screens, not just controls
Blocks are complete, page-level screens composed from touchcn components. One command copies the screen and every component it uses into your project — then you rewrite the copy and wire it to your own auth or billing layer.
Login
Sign-in form with validation states and a provider row.
Sign Up
Registration form with terms consent and a submitting state.
OTP
Code verification screen with a resend countdown and SMS autofill.
Onboarding
Snapped intro carousel with page dots and a skip path.
Paywall
Subscription screen with a plan switcher and a feature list.
Settings
Grouped rows with switches and a sign-out confirm dialog.
Profile
Avatar header, stats, and a delete-account confirm dialog.
Search
Searchable list with recent queries and an empty state.
Filters
Filter bottom sheet with chips, sliders and a reset action.
Theming that stays out of your way
All platform styling lives in a CSS-first token layer. Semantic tokens resolve per platform through .ios and .md namespaces, each with light and dark values, so switching theme or color scheme is a single class on the root.
- Token namespaces keep iOS and Material styling isolated but interchangeable.
- Material You generates a full tonal palette from a single seed color.
- Color scheme switching is cascade-correct — light and dark are defined together.
import { generateMaterialTheme, applyMaterialTheme } from '@touchcn/core';
// Derive a full Material You tonal palette from a single seed color
// and apply it — light and dark are generated together.
applyMaterialTheme(generateMaterialTheme('#6750A4'));Works with the stack you already have
touchcn is plain Tailwind CSS v4 plus framework components — no runtime shell, no router of its own, no native dependency. If it runs on the web, it runs touchcn.
- Angular
- React
- Vue
- Tailwind CSS v4
- Vite
- Capacitor
- Cordova
- PWA
- TypeScript
Capacitor guide
Safe areas, status-bar overlay, platform detection and keyboard behavior in a native shell.
Ionic guide
Run touchcn beside Ionic in one app — CSS boundaries, structure conflicts and a migration path.
Cordova guide
Use touchcn in an existing Cordova app, including the older WebView baselines.
Your coding agent already knows touchcn
touchcn ships agent skills — instruction files that teach Claude Code, Cursor and other compatible agents how the library actually works. Install one, then ask your agent to "add touchcn to this project" or "build a settings screen with touchcn" and it follows the documented conventions instead of guessing.
- Project setup — touchcn init, engine packages, Tailwind wiring and theme providers for all three frameworks.
- The editing rules — theme-dumb components, semantic classes, overlay containing-block constraints.
- Theming and dynamic color from a seed, with the token conventions that keep color schemes correct.
- A dedicated Ionic-migration skill: component mapping, chrome swaps and a leaf-first migration order.
# Install every touchcn skill into your agent
npx skills add capawesome-team/touchcntouchcn
CLI setup, engine wiring, theming, and the rules that matter when editing copied components.
touchcn-ionic-migration
Component mapping, chrome and overlay swaps, and a leaf-first migration order off Ionic.
How touchcn compares
Honest, side-by-side comparisons with the mobile UI libraries people weigh touchcn against.
touchcn vs Ionic Framework
A Tailwind, source-owned alternative to the mobile-web incumbent.
touchcn vs Framework7
Just the component layer for your Angular, React, or Vue app — bring your own router.
touchcn vs Konsta UI
Own the source, plus Angular and iOS 26 liquid glass.
touchcn vs React Native Reusables
The same shadcn idea for the web — not React Native.
Who builds touchcn
touchcn comes out of years of shipping cross-platform mobile apps and the open-source tooling underneath them — not a weekend side project.
Built by Capawesome
Maintained by Genz IT Solutions GmbH, the team behind Capawesome — open-source Capacitor plugins installed hundreds of thousands of times a month.
MIT licensed
Free for commercial use, no paid tier and no license key. Copied component source is yours without conditions.
Developed in the open
Every component, token and CLI change lands as a public commit, with CI enforcing registry integrity on each one.
Three frameworks in lockstep
Angular, React and Vue are versioned and released together, so no framework is left behind on an older component set.
Frequently asked questions
Honest answers about what touchcn is and isn’t.
How is touchcn different from traditional mobile UI libraries?
Most mobile UI libraries ship a runtime framework and packaged components you consume as a dependency and customize through theming APIs. touchcn copies styled component source into your repository, so you own and edit every line. It renders authentic Material 3 and iOS liquid glass from Tailwind CSS tokens rather than a fixed component theme.
How is it different from shadcn/ui?
It shares shadcn’s ownership model — a CLI copies source into your project instead of installing a package — but it targets platform-authentic mobile UI. One component set renders Material 3 on Android and iOS liquid glass on iOS, driven by .ios and .md token namespaces.
Does it work with Capacitor and PWAs?
Yes. touchcn is plain Tailwind CSS v4 plus framework components, so it runs anywhere the web runs — including Capacitor apps and installable PWAs. There is no native dependency.
Which frameworks are supported?
Angular, React, and Vue, with identical component sets that emit the same classes from a single styling source.
Can I customize the components?
Fully. The CLI copies the source into your project, so you can edit markup, classes and variants. Behavior lives in versioned engine packages, so the plumbing stays patchable over npm while the styling is yours.
Are there pre-built screens, or only individual components?
Both. Alongside 41 components, touchcn ships blocks — complete page-level screens such as login, sign-up, OTP verification, onboarding, paywall, settings, profile, search and filters. Adding a block copies the screen and every component it composes into your project in one command.
Does touchcn work with AI coding agents?
Yes. touchcn ships agent skills — instruction files installable with "npx skills add capawesome-team/touchcn" that teach Claude Code, Cursor and other compatible agents the CLI setup, theming conventions and component editing rules. A second skill covers migrating an existing Ionic app to touchcn.
Is it free and open-source?
Yes. touchcn is MIT licensed and developed in the open on GitHub by Genz IT Solutions GmbH, the team behind Capawesome. There is no paid tier and no license key.
If touchcn helps you, star it on GitHub
touchcn is free, MIT-licensed and built entirely in the open — no paid tier, no strings. A star costs you nothing, helps other developers find the project, and tells us to keep shipping components.
Free · MIT licensed · Built in the open