---
title: Paywall
description: A subscription paywall screen composed from touchcn components.
---
import Source from './_generated/paywall.mdx';

A subscription offer screen: a hero headline, a checkmarked feature list, a
monthly/yearly billing toggle with a savings badge, two selectable plan cards, a
purchase CTA, fine print and a restore-purchases action. Selection is local
state; the CTA emits the chosen plan and billing period.

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

## Installation

```bash
npx touchcn add paywall
```

This also adds the components the block composes:

`badge` · `button` · `card` · `list` · `navbar` · `page` · `segmented`

## Usage

<CodeGroup>

```html Angular
<tcn-paywall-block (purchase)="subscribe($event)" (close)="dismiss()" />
```

```tsx React
import { TcnPaywallBlock } from '@/components/blocks/paywall';

<TcnPaywallBlock onPurchase={(selection) => subscribe(selection)} onClose={dismiss} />
```

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

<template>
  <TcnPaywallBlock @purchase="(selection) => subscribe(selection)" @close="dismiss" />
</template>
```

</CodeGroup>

The purchase callback receives `{ planId, billing }`. Everything here is
presentational — wire the CTA and restore action to your billing SDK.

<Source />