> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tappify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a page

> Give your extension its own route under the owner's project, with optional navigation entry.

A page is your own route inside the owner's project, at
`/projects/:projectId/ext/:extensionId/:pageId`. With `nav: true` it also gets an entry in
the project navigation, with your vendor tile beside the name.

```bash theme={null}
tappify extension add page --name Explore --nav
```

## The manifest entry

```json theme={null}
{
  "contributes": {
    "pages": [
      {
        "id": "explore",
        "title": "Explore",
        "entry": "src/pages/explore.tsx",
        "nav": true
      }
    ]
  }
}
```

The command writes this entry. You can hand-edit `tappify.extension.json` instead — the
`$schema` line gives your editor completion and validation, and
[`tappify extension doctor`](/extensions/test/doctor-checks) checks the result.

## The component

`TapPageProps` carries `params`, the segments under your own page's path, keyed by position
alongside `pageId` and the unsplit `path`.

```tsx theme={null}
import {
  TapPageHeader,
  useTapParams,
  type TapPageProps,
} from "@tappify/extension-sdk";
import "@tappify/extension-sdk/styles.css";

export default function Explore(_props: TapPageProps) {
  const params = useTapParams();
  const funnelId = params["0"] === "funnels" ? params["1"] : undefined;

  return (
    <div className="tap-stack">
      <TapPageHeader
        title="Explore"
        description={
          funnelId === undefined
            ? "Pick a funnel."
            : `Funnel ${funnelId}`
        }
      />
    </div>
  );
}
```

Sub-paths under your page are yours: `tap.nav.push("/explore/funnels/123")` navigates
inside it and `useTapParams()` reads the segments back. See
[Navigate inside your page](/extensions/build/navigate-inside-your-page).

## What the host renders

Tappify draws the project chrome — sidebar, header, breadcrumb — and mounts your component in
the content area with `tap.ui.size` set to `page`. The navigation entry shows your vendor
tile so an owner always knows whose page they are on.

An organization-scoped extension cannot declare pages, tabs, widgets or series: those are
project surfaces. Declare `installScope: "project"` if you need them.