Overview

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:

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:

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:

{
  "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 — a filter bottom sheet.
Login — a sign-in screen.
Onboarding — an intro carousel.
OTP — a code verification screen.
Paywall — a subscription offer.
Profile — an account profile screen.
Search — a searchable list screen.
Settings — a grouped settings page.
Sign Up — a registration screen.