One measure, centred, with the page's gutters.
Import it from rei-kit:
import { PageContainer } from 'rei-kit'
Open PageContainer in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { PageContainer } from 'rei-kit'
</script>
<template>
<PageContainer width="reading" as="article">
<h1>A long read</h1>
<p>Set at about 68 characters a line.</p>
</PageContainer>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
width | 'wide' | 'reading' | 'full' | 'wide' | `wide` for a page, `reading` for prose, `full` to opt out. |
as | string | 'div' | The element to render. `main`, `section` and `article` all belong here. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.