Container

Centers page content at a capped width with consistent responsive gutters — the standard mx-auto max-w-* px-* wrapper in one place. Use render to merge the styling onto your own element instead of rendering an extra div.

import { Container } from '@jbpark/ui-kit';

<Container maxWidth="md">Page content</Container>;

Centered, max-width md content with responsive gutters.

Props

Prop	Type	Default
maxWidth	'3xs'…'7xl' | 'full' | 'none'	'7xl'
padded	boolean (responsive horizontal gutters)	true
render	ReactElement | (props) => ReactElement	-
className	string	-

maxWidth accepts Tailwind's full max-w-* scale. All other div props are forwarded.

<Container render={<section aria-label="Results" />}>Content</Container>