Page container

Pro

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.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2 and 4.1.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/page-container

Brings in: tokens, utils · npm: @base-ui/react@^1.9.0

Usage

TSX · The example above

"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>

Prop	Type	Default	Description
width	`keyof typeof widths \| undefined`	"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`	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">.