Page Width

Our <PageWidth /> is a very simple wrapper that lets you define a set of consistent widths for your page content. It also applies a consistent outer padding.

It gets it's widths from some Tailwind theme variables set in globals.css:

  • --spacing-page-width-skinny
  • --spacing-page-width
  • --spacing-page-width-wide

You can always add more widths for an extra wide or extra skinny page.

<PageWidth>{/* Page content... */}</PageWidth>

Examples

This is a skinny page width.

This is a medium width page width.

This is a wide page width.

Props
PropTypeDefaultDescription
@extendsComponentProps<'div'>All props from the <div> element are accepted.
width'medium' | 'wide' | 'skinny''medium'The width of the page content.