---
title: Page
description: A page scaffold with scroll restoration.
---
import Source from './_generated/page.mdx';

A page scaffold — the outer container for a screen, with scroll restoration handled by the engine.

<DemoFrame component="page" />

## Installation

```bash
npx touchcn add page
```

## Usage

<CodeGroup>

```html Angular
<tcn-page>
  <tcn-navbar title="Home" />
  <!-- page content -->
</tcn-page>
```

```tsx React
import { TcnPage } from '@/components/ui/page';
import { TcnNavbar } from '@/components/ui/navbar';

<TcnPage>
  <TcnNavbar title="Home" />
  {/* page content */}
</TcnPage>
```

```vue Vue
<script setup lang="ts">
import { TcnPage } from '@/components/ui/page';
import { TcnNavbar } from '@/components/ui/navbar';
</script>

<template>
  <TcnPage>
    <TcnNavbar title="Home" />
    <!-- page content -->
  </TcnPage>
</template>
```

</CodeGroup>

## Props

`TcnPage` forwards all standard `<div>` attributes. Place a `tcn-navbar` and `tcn-tabbar` inside it near
the app root so their `position: fixed` chrome anchors to the viewport.

<Source />