---
title: Onboarding
description: An intro carousel screen composed from touchcn components.
---
import Source from './_generated/onboarding.mdx';

A horizontally snapped intro carousel: three slides with an icon, headline and
body, page dots that track the active slide, and a skip / next flow where the
last slide's button becomes "Get started". It emits a single done event on
completion.

<DemoFrame component="blocks-onboarding" height={700} />

## Installation

```bash
npx touchcn add onboarding
```

This also adds the components the block composes:

`button` · `page`

## Usage

<CodeGroup>

```html Angular
<tcn-onboarding-block (done)="finishOnboarding()" />
```

```tsx React
import { TcnOnboardingBlock } from '@/components/blocks/onboarding';

<TcnOnboardingBlock onDone={finishOnboarding} />
```

```vue Vue
<script setup lang="ts">
import { TcnOnboardingBlock } from '@/components/blocks/onboarding';
</script>

<template>
  <TcnOnboardingBlock @done="finishOnboarding" />
</template>
```

</CodeGroup>

The active-slide tracking (a scroll listener over a snap container) is inlined in
the block because it is screen-specific. If several screens need snapped slides,
that is the seam to extract into a shared carousel primitive.

<Source />