# touchcn

> Mobile UI components for Angular, React & Vue — Material 3 on Android, liquid glass on iOS. Own your code.

## Blog

- [Blog](https://touchcn.dev/blog): Notes on building touchcn — a platform-adaptive mobile UI component library for Angular, React, and Vue.
- [Framework7 alternative for Angular, React, and Vue](https://touchcn.dev/blog/touchcn-vs-framework7): Framework7 is a full mobile app framework. touchcn is just the component layer — Material 3 and iOS 26 liquid glass for Angular, React, and Vue, with source you own.
- [Introducing touchcn](https://touchcn.dev/blog/introducing-touchcn): A shadcn-style mobile UI component library that renders Material 3 on Android and iOS liquid glass on iOS — one component set, and you own the code. Here is the motivation, the architecture, and where it is headed.
- [Ionic Framework alternative: Tailwind components you own](https://touchcn.dev/blog/touchcn-vs-ionic): An Ionic alternative for Angular, React, and Vue: touchcn copies Material 3 and iOS 26 liquid-glass components into your repo — Tailwind-native, MIT-licensed.
- [Is there a shadcn for mobile without React Native?](https://touchcn.dev/blog/touchcn-vs-react-native-reusables): React Native Reusables and touchcn both bring shadcn's copy-paste model to mobile — for different runtimes: native views vs web (PWA, Capacitor). Which fits?
- [Konsta UI alternative with Angular support](https://touchcn.dev/blog/touchcn-vs-konsta-ui): touchcn vs Konsta UI: both bring iOS 26 and Material Design to the web with Tailwind. touchcn adds Angular, seed-based Material You color, and source you own.

## Docs

- [Introduction](https://touchcn.dev/docs): A shadcn-style mobile component library for Angular, React, and Vue — Material 3 on Android, liquid glass on iOS. Own your code.
- [Getting started](https://touchcn.dev/docs/getting-started): Install the touchcn engine, wire up Tailwind v4 and the provider, and add your first component with the CLI.
- [Theming](https://touchcn.dev/docs/theming): Token namespaces, the theme-dumb principle, color scheme, and Material You dynamic color.
- [Navigation](https://touchcn.dev/docs/navigation): Native-feeling page transitions and iOS edge-swipe-back, layered over Angular Router / React Router / Vue Router — opt-in and gracefully degrading.
- [CLI](https://touchcn.dev/docs/cli): The touchcn CLI — command reference, the touchcn.json config, how updates work, using it with the shadcn CLI, and hosting your own registry.
- [Skills](https://touchcn.dev/docs/skills): Install the touchcn agent skills so AI coding agents set up, use, and migrate to touchcn correctly.

### Guides

- [Capacitor](https://touchcn.dev/docs/guides/capacitor): Use touchcn in a Capacitor Angular, React, or Vue app — safe areas, status bar overlay, platform detection, and keyboard behavior.
- [Cordova](https://touchcn.dev/docs/guides/cordova): Use touchcn in an Apache Cordova app — status bar setup and the WebView feature-support matrix that sets the minimum supported OS versions.
- [Ionic](https://touchcn.dev/docs/guides/ionic): Use touchcn components inside an existing Ionic Angular, React, or Vue app — coexistence, CSS boundaries, structure conflicts, and a migration path.

### Components

- [Overview](https://touchcn.dev/docs/components): Platform-adaptive mobile components you copy into your project.
- [Action Sheet](https://touchcn.dev/docs/components/action-sheet): A set of choices presented from the bottom of the screen.
- [Avatar](https://touchcn.dev/docs/components/avatar): A circular user image with an initials or icon fallback.
- [Badge](https://touchcn.dev/docs/components/badge): A small status descriptor for labeling and counts.
- [Banner](https://touchcn.dev/docs/components/banner): An inline, persistent status message with variants and actions.
- [Bottom Sheet](https://touchcn.dev/docs/components/bottom-sheet): A bottom sheet overlay with a drag handle.
- [Button](https://touchcn.dev/docs/components/button): A platform-adaptive button with Material and iOS styling.
- [Card](https://touchcn.dev/docs/components/card): A container that groups related content and actions.
- [Checkbox](https://touchcn.dev/docs/components/checkbox): A selection control for multiple independent options.
- [Chip](https://touchcn.dev/docs/components/chip): A compact element for input, selection or filtering.
- [Colorpicker](https://touchcn.dev/docs/components/colorpicker): An inline color swatch picker with an optional hex input.
- [Datepicker](https://touchcn.dev/docs/components/datepicker): A single-date picker with an MD3 modal calendar or an iOS inline calendar sheet.
- [Dialog](https://touchcn.dev/docs/components/dialog): A modal overlay for focused tasks or confirmations.
- [Divider](https://touchcn.dev/docs/components/divider): A thin line that separates content into groups.
- [Drawer](https://touchcn.dev/docs/components/drawer): A side navigation drawer that slides in from an edge.
- [FAB](https://touchcn.dev/docs/components/fab): A floating action button for the screen's primary action.
- [Infinite Scroll](https://touchcn.dev/docs/components/infinite-scroll): Load more content as the user scrolls to the end of a list.
- [Input](https://touchcn.dev/docs/components/input): A text input field with platform-adaptive styling.
- [Input OTP](https://touchcn.dev/docs/components/input-otp): A segmented one-time-code entry field.
- [List](https://touchcn.dev/docs/components/list): A grouped list with rows, routing and custom templates.
- [Modal](https://touchcn.dev/docs/components/modal): A full-screen surface that slides up over the page.
- [Navbar](https://touchcn.dev/docs/components/navbar): A top navigation bar with a title and actions.
- [Page](https://touchcn.dev/docs/components/page): A page scaffold with scroll restoration.
- [Picker](https://touchcn.dev/docs/components/picker): A momentum wheel picker with one or more columns.
- [Popover](https://touchcn.dev/docs/components/popover): A floating panel anchored to a trigger, flipping when short on room.
- [Progress](https://touchcn.dev/docs/components/progress): A determinate or indeterminate progress bar.
- [Pull to Refresh](https://touchcn.dev/docs/components/pull-to-refresh): Pull down from the top of a page to refresh its content.
- [Radio](https://touchcn.dev/docs/components/radio): A selection control for choosing one option from a set.
- [Reorder](https://touchcn.dev/docs/components/reorder): Drag list rows by a handle to reorder them.
- [Searchbar](https://touchcn.dev/docs/components/searchbar): A search field with a leading magnifier and clear control.
- [Segmented](https://touchcn.dev/docs/components/segmented): A single-choice control with a sliding selection indicator.
- [Select](https://touchcn.dev/docs/components/select): A single-select field opening a dropdown (MD) or picker sheet (iOS).
- [Skeleton](https://touchcn.dev/docs/components/skeleton): A placeholder shown while content is loading.
- [Slider](https://touchcn.dev/docs/components/slider): A range input for selecting a value from a continuum.
- [Spinner](https://touchcn.dev/docs/components/spinner): An indeterminate loading indicator.
- [Stepper](https://touchcn.dev/docs/components/stepper): A numeric value with decrement and increment controls.
- [Swipeout](https://touchcn.dev/docs/components/swipeout): Swipe a list row to reveal leading and trailing actions.
- [Switch](https://touchcn.dev/docs/components/switch): A toggle switch for boolean settings.
- [Tab Bar](https://touchcn.dev/docs/components/tabbar): A bottom tab bar for primary navigation.
- [Tabs](https://touchcn.dev/docs/components/tabs): Content tabs with a sliding indicator and panel switching.
- [Textarea](https://touchcn.dev/docs/components/textarea): A multi-line text field with autogrow and platform-adaptive styling.
- [Toast](https://touchcn.dev/docs/components/toast): A transient message with an optional action, shown one at a time.

### Blocks

- [Overview](https://touchcn.dev/docs/blocks): Pre-composed, copy-in screens built from touchcn components.
- [Filters](https://touchcn.dev/docs/blocks/filters): A filter bottom sheet composed from touchcn components.
- [Login](https://touchcn.dev/docs/blocks/login): A sign-in screen composed from touchcn components.
- [Onboarding](https://touchcn.dev/docs/blocks/onboarding): An intro carousel screen composed from touchcn components.
- [OTP](https://touchcn.dev/docs/blocks/otp): A one-time-code verification screen composed from touchcn components.
- [Paywall](https://touchcn.dev/docs/blocks/paywall): A subscription paywall screen composed from touchcn components.
- [Profile](https://touchcn.dev/docs/blocks/profile): An account profile screen composed from touchcn components.
- [Search](https://touchcn.dev/docs/blocks/search): A searchable list screen composed from touchcn components.
- [Settings](https://touchcn.dev/docs/blocks/settings): A grouped settings screen composed from touchcn components.
- [Sign Up](https://touchcn.dev/docs/blocks/signup): A registration screen composed from touchcn components.

## RSS Feeds

- [touchcn — Blog](https://touchcn.dev/blog/rss.xml)