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

# Extensions.definePage()

> Define a full page of your app

`Extensions.definePage()` defines a [page](./overview): a full screen under your app's own URL, listed in the Apps section of the sidebar.

## File location

The page must be the **default export** of `src/app/pages/<slug>/page.tsx`. The folder name is the page's slug and its URL segment. See [Pages](./overview) for the discovery rules.

## Example

```tsx src/app/pages/dashboard/page.tsx theme={"system"}
import React from "react"
import {Extensions, Grid, Card, Stack, Typography, Badge} from "attio/client"

export default Extensions.definePage({
  name: "Dashboard",
  Page: () => (
    <Grid maxColumns={3}>
      <Card title="Open deals">
        <Stack gap="small">
          <Typography.Title>42</Typography.Title>
          <Badge color="green">+6 this week</Badge>
        </Stack>
      </Card>
      <Card title="Won this quarter">
        <Typography.Title>$1.2M</Typography.Title>
      </Card>
      <Card title="At risk">
        <Typography.Title>3</Typography.Title>
      </Card>
    </Grid>
  ),
})
```

See [`Grid`](../components/grid), [`Card`](../components/card) and [`Stack`](../components/stack) for the layout components.

## Arguments

<ParamField path="name" type="string" required>
  The name of the page. Used as the sidebar label, the browser tab title and the page header.
</ParamField>

<ParamField path="variant" type="&#x22;full&#x22; | &#x22;centered&#x22;">
  How wide the content region is.

  `"full"` runs edge to edge. Use it for dashboards and tables.

  `"centered"` caps the content width and centers it, matching Attio's home page. Use it for
  reading-heavy pages and forms.

  Defaults to `"full"`.
</ParamField>

<ParamField path="Page" type="React.ComponentType<{}>" required>
  A React component that renders the page. It receives no props.

  It can suspend while loading data.
</ParamField>

<Note>
  Pages are workspace-level, not record-scoped, which is why `Page` gets no props. For UI about a
  single record, use a [record tab](../extensions/record-tab): its `Tab` component receives
  `recordId` and `object`.
</Note>