A pill heading for a group of things.
Import it from rei-kit:
import { SectionHeading } from 'rei-kit'
Open SectionHeading 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 { SectionHeading } from 'rei-kit'
/* Written out, so Tailwind sees the classes. The role carries the dot and the
edge; the words stay `text-ink`, because a role on a faint wash of itself
measures about 2:1 — the fault five components in this kit were fixed for. */
const income = {
fill: 'bg-positive',
card: 'bg-positive/5 border-positive/25',
text: 'text-ink',
}
</script>
<template>
<SectionHeading :tone="income" label="Income" :count="3" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
tone | Tone | yes | The colour classes for the dot, the pill and the label, as written-out class names. `Tone` is a set of classes rather than a role token because the categories here are the app's own, and Tailwind reads source as plain text: a class assembled at runtime never reaches the stylesheet. Put the role on `fill` and `card` and leave `text` as `text-ink`. |
label | string | yes | |
count | number | 0 | Hidden when zero, so an empty group's heading stays quiet. |
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.