Fragments
Page Container
Responsive container with size variants for consistent page widths.
FormanceCustom component built for Formance products.
Installation#
npx shadcn@latest add @formance/page-containerInstall the following dependencies:
npm install class-variance-authorityCopy 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 formsdefault— 1200px, standard page widthlarge— 1600px, for data-dense views like dashboardsfull— no max-width constraint