---
title: Overview
description: Pre-composed, copy-in screens built from touchcn components.
---

Blocks are complete, page-level screens composed entirely from touchcn
components — a starting point you copy into your project and edit heavily, not a
package you import. Where a component is a single control, a block is a whole
screen: a sign-in form, a settings page, an onboarding carousel, a paywall.

## How blocks work

A block is a registry item of type `registry:block`. Adding one copies the
block's source **and** resolves its component dependencies through the same
recursive resolution the CLI uses for components:

```bash
npx touchcn add login
```

This copies the block into `src/components/blocks/login/` (React and Vue) or
`src/app/components/blocks/login/` (Angular) and pulls in every component it
composes (button, input, checkbox, …) into your components directory.

## Importing components from a block

A block references the components it composes through the `@/components/ui/<name>`
alias — the same convention used throughout these docs:

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

This keeps the block's location decoupled from where its components live. Make
sure your project resolves the `@` alias to your source root:

- **React and Vue** — the standard Vite/shadcn setup already aliases `@` to `src`, so
  `@/components/ui/button` resolves to `src/components/ui/button`.
- **Angular** — add a `paths` entry to your `tsconfig.json` pointing at your
  components directory:

  ```jsonc tsconfig.json
  {
    "compilerOptions": {
      "paths": {
        "@/components/ui/*": ["src/app/components/ui/*"]
      }
    }
  }
  ```

If you set a custom `paths.components` in `touchcn.json`, point the alias at
that directory instead — the CLI does not rewrite block imports.

## Blocks are yours to edit

Blocks are exemplary compositions, not black boxes. They add no new behavior on
top of the components — they are markup, class strings and light local state.
Copy one in and change everything: swap the copy, rewire the events to your auth
or billing layer, add or remove sections.

## Available blocks

- [Filters](/docs/blocks/filters) — a filter bottom sheet.
- [Login](/docs/blocks/login) — a sign-in screen.
- [Onboarding](/docs/blocks/onboarding) — an intro carousel.
- [OTP](/docs/blocks/otp) — a code verification screen.
- [Paywall](/docs/blocks/paywall) — a subscription offer.
- [Profile](/docs/blocks/profile) — an account profile screen.
- [Search](/docs/blocks/search) — a searchable list screen.
- [Settings](/docs/blocks/settings) — a grouped settings page.
- [Sign Up](/docs/blocks/signup) — a registration screen.