The bar at the top of a screen: a title with room either side of it.
Import it from rei-kit:
import { PageHeader } from 'rei-kit'
Open PageHeader 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 { BaseButton, PageHeader } from 'rei-kit'
</script>
<template>
<PageHeader title="Settings">
<template #right>
<BaseButton size="sm" variant="ghost">Done</BaseButton>
</template>
</PageHeader>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
title | string | yes | |
as | 'h1' | 'h2' | 'h3' | 'p' | 'h1' | The element the title is, when `h1` is not it. A screen's title is the page's one `h1`, which is the default. It is the wrong answer in two places: a screen rendered inside another page — a documentation site, a preview, a phone frame beside three others — and a header that sits under a heading that already owns the rank. Both put a second `h1` in the document, which is how this kit's own showcase ended up with three. |
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.