Getting started

Install the touchcn engine, wire up Tailwind v4 and the provider, and add your first component with the CLI.

touchcn works with Angular, React, and Vue. Pick your framework in the tabs below — the engine packages, Tailwind wiring, and provider setup differ, but the CLI and copied components are the same.

You need an existing Angular, React, or Vue project with Tailwind CSS v4 installed.

Using an AI coding agent? Skip the manual steps: install the touchcn skill and ask your agent to “add touchcn to this project” — it performs everything below for you, correctly.

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

1. Install the engine packages

npm install @touchcn/core @touchcn/angular @touchcn/tailwind

npm install @touchcn/core @touchcn/react @touchcn/tailwind

npm install @touchcn/core @touchcn/vue @touchcn/tailwind

2. Wire up Tailwind v4

touchcn ships a Tailwind v4 CSS-first token preset. Import Tailwind and the touchcn token layer at the top of your global stylesheet, then point Tailwind’s @source scan at the copied component sources so their utility classes are generated.

@import "tailwindcss";
@import "@touchcn/tailwind";

/* Scan the copied component sources for utilities. */
@source "./src/app/components/ui";

@import "tailwindcss";
@import "@touchcn/tailwind";

/* Scan the copied component sources for utilities. */
@source "./src/components/ui";

@import "tailwindcss";
@import "@touchcn/tailwind";

/* Scan the copied component sources for utilities. */
@source "./src/components/ui";

3. Provide the theme

Register the touchcn provider once, near the app root. It wires the core AppearanceManager (platform detection, .ios/.md and dark class toggling) into your framework.

import { ApplicationConfig } from '@angular/core';
import { provideTouchcn } from '@touchcn/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTouchcn(),
    // Optional — needs @angular/router:
    // provideTouchcnScrollRestoration(),
  ],
};

import { TouchcnProvider } from '@touchcn/react';

export function Root() {
  return (
    <TouchcnProvider>
      <App />
    </TouchcnProvider>
  );
}

<!-- App.vue — call provideTouchcn() once in the root component's setup. -->
<script setup lang="ts">
import { provideTouchcn } from '@touchcn/vue';

provideTouchcn();
</script>

<template>
  <RouterView />
</template>

Descendants read the reactive appearance with useTouchcnAppearance() from @touchcn/vue.

4. Add components with the CLI

init writes a touchcn.json — the small config that records your framework, the registry URL, and where copied components land. add then copies styled sources into your project — you own them from there.

npx @touchcn/cli init
npx touchcn add button

npx @touchcn/cli init --framework react
npx touchcn add button

npx @touchcn/cli init --framework vue
npx touchcn add button

add resolves registryDependencies recursively and installs the npm dependencies each component needs (@radix-ui/* on React, reka-ui on Vue). Use touchcn add --all to pull the whole set.

5. Use the component

The button now lives in your project — src/app/components/ui/button/ (Angular) or src/components/ui/button/ (React and Vue). Import it from there like any of your own code:

import { Component } from '@angular/core';
import { TcnButton } from './components/ui/button';

@Component({
  selector: 'app-home',
  imports: [TcnButton],
  template: `<button tcnButton variant="primary">Save</button>`,
})
export class HomeComponent {}

import { TcnButton } from '@/components/ui/button';

export function Home() {
  return <TcnButton variant="primary">Save</TcnButton>;
}

<script setup lang="ts">
import { TcnButton } from '@/components/ui/button';
</script>

<template>
  <TcnButton variant="primary">Save</TcnButton>
</template>

That’s the whole model: the component is source in your repo, free to edit. When the registry ships a newer version, npx touchcn update merges it in — see Updating components.

Next steps

Theming

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

Navigation

Native page transitions and iOS edge-swipe-back over your router.

Browse components

Live previews, install commands, and usage for every component.