# Page container

The column a page's content sits in: centred, no wider than its `width`, with a gutter at each side that follows `data-density`. Wrap a page's main content in it so pages line up with one another.

- Registry name: `page-container` (`@candor/page-container`)
- Tier: Pro. Installing it needs a Pro, Premium or Team licence key: the person runs `npx candor-ui key <key>` themselves; never ask for the key in chat or write it to a file.
- Docs: https://candor.themethodic.com/docs/page-container

## Install

```bash
npx candor-ui add page-container
```

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/page-container`.
It brings in: tokens, utils.
npm packages: @base-ui/react@^1.9.0.

## Example

```tsx
"use client"

import { PageContainer } from "@/components/candor/page-container"
import { Heading } from "@/components/candor/heading"
import { Text } from "@/components/candor/text"

export default function Example() {
  return (
    <div className="w-full rounded-lg border bg-sunken py-6">
      <PageContainer width="narrow" className="rounded-md bg-card py-4">
        <Heading level={2} size="lg">
          Weekly summary
        </Heading>
        <Text tone="muted" size="sm">
          A narrow container is the thread&apos;s width, so prose stays readable; it follows the density.
        </Text>
      </PageContainer>
    </div>
  )
}
```

## <PageContainer>

Props:

- `width?: keyof typeof widths | undefined` (default `"default"`): How wide the content may grow: `narrow` for reading (a thread's width), `default`, `wide` for tables and dashboards, `full` for no limit.
- `padded?: boolean | undefined` (default `true`): A gutter at each side, which follows `data-density` and widens on larger screens. Default true.
- `render?: useRender.RenderProp | undefined`: The element to draw instead of a `<div>`: `render={<main />}` for the page's main content.
- `className?: string | undefined`: Classes for the element, applied last, so they win over the props.
- `children?: React.ReactNode | undefined`: The page's content.

Also takes the props of `React.ComponentProps<"div">`.

## Rules for using Candor UI

- Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks.
- A control that can't be used says why: wrap it in `<Locked reason="…">`, don't just disable it.
- Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one.
- Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output.
- Your app's words go in `LocaleProvider`: its fixed strings in `strings`, its nouns in `nouns`; entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.