Get started
Data display
Data entry
General
Layout
Navigation
Blocks
Packages
The centered, max-width content column of a full-width surface, sized from a named max-width scale.
Account settings
Centered and capped, however wide the surface around it is.
tsx
1
2
3import type { ReactNode } from 'react';
import { PageContainer } from '@/registry/bases/base-ui/components/layout/page-container';Installation#
bash
pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/page-container.jsonUsage#
tsx
import { PageContainer } from '@/components/layout/page-container';tsx
<PageContainer size="lg" className="px-6 py-6">
...
</PageContainer>Pick the width with size; className carries the surface's own padding and vertical rhythm. It centres
only the column's width, not its content on both axes - for that, use Center
instead.
API reference#
PageContainer#
Renders a div and takes every prop a div takes, plus:
| Prop | Type | Default |
|---|---|---|
size | 'sm' | 'md' | 'lg' | 'full' | 'md' |
The centred, max-width content column of a full-width surface, so content does not stretch edge to edge on
a wide screen. size picks the width from the max-width scale; className carries the surface's own
padding and vertical rhythm. It sets data-slot="page-container".
pageContainerVariants#
The size variant: sm max-w-3xl, md (the default) max-w-5xl, lg max-w-7xl, full max-w-none.