Pairs of "what it is" and "what it says": the summary at the top of a detail page, the facts under an invoice.
Import it from rei-kit:
import { DescriptionList } from 'rei-kit'
Open DescriptionList 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 { BaseBadge, DescriptionList } from 'rei-kit'
const items = [
{ key: 'status', term: 'Status' },
{ term: 'Created', description: '12 September 2026' },
{ term: 'Total', description: '₺1,240' },
]
</script>
<template>
<DescriptionList :items="items" layout="inline">
<template #status><BaseBadge tone="success">Paid</BaseBadge></template>
</DescriptionList>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
items | readonly DescriptionItem[] | yes | |
layout | 'stacked' | 'inline' | 'stacked' | `inline` puts the term beside its value; `stacked` puts it above. |
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.