Command Menu

Search documentation, components, and switch theme.

Fragments

Page Container

Responsive container with size variants for consistent page widths.

Formance
Docs

Installation#

npx shadcn@latest add @formance/page-container

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { PageContainer } from '@/components/ui/page-container'
<PageContainer size="default">
  {/* Page content */}
</PageContainer>

Sizes#

Use the size prop to control the maximum width of the container.

  • small — 768px, ideal for focused content like settings forms
  • default — 1200px, standard page width
  • large — 1600px, for data-dense views like dashboards
  • full — no max-width constraint