---
title: Getting started
description: Install the touchcn engine, wire up Tailwind v4 and the provider, and add your first component with the CLI.
sidebar:
  label: Getting started
  icon: download
---

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.

:::tip
**Using an AI coding agent?** Skip the manual steps: install the [touchcn skill](/docs/skills) and
ask your agent to *"add touchcn to this project"* — it performs everything below for you, correctly.

```bash
npx skills add capawesome-team/touchcn --skill touchcn
```
:::

## 1. Install the engine packages

<CodeGroup>

```bash Angular
npm install @touchcn/core @touchcn/angular @touchcn/tailwind
```

```bash React
npm install @touchcn/core @touchcn/react @touchcn/tailwind
```

```bash Vue
npm install @touchcn/core @touchcn/vue @touchcn/tailwind
```

</CodeGroup>

:::note
Each component brings only the dependencies it actually needs (on React, its specific `@radix-ui/*`
packages; on Vue, `reka-ui`) — `add` installs them automatically with your project's package manager.
Pass `--no-install` to handle installation yourself.
:::

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

<CodeGroup>

```css Angular
@import "tailwindcss";
@import "@touchcn/tailwind";

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

```css React
@import "tailwindcss";
@import "@touchcn/tailwind";

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

```css Vue
@import "tailwindcss";
@import "@touchcn/tailwind";

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

</CodeGroup>

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

<CodeGroup>

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

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

```tsx React
import { TouchcnProvider } from '@touchcn/react';

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

```vue Vue
<!-- 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>
```

</CodeGroup>

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.

<CodeGroup>

```bash Angular
npx @touchcn/cli init
npx touchcn add button
```

```bash React
npx @touchcn/cli init --framework react
npx touchcn add button
```

```bash Vue
npx @touchcn/cli init --framework vue
npx touchcn add button
```

</CodeGroup>

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

<CodeGroup>

```ts Angular
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 {}
```

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

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

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

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

</CodeGroup>

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](/docs/components#updating-components).

## Next steps

<CardGroup cols={2}>
  <Card title="Theming" icon="palette" href="/docs/theming">
    Token namespaces, color scheme, and Material You dynamic color.
  </Card>
  <Card title="Navigation" icon="arrow-left-right" href="/docs/navigation">
    Native page transitions and iOS edge-swipe-back over your router.
  </Card>
  <Card title="Browse components" icon="layout-grid" href="/docs/components/button">
    Live previews, install commands, and usage for every component.
  </Card>
</CardGroup>