Parts of a whole.
Import it from rei-kit:
import { DonutChart } from 'rei-kit'
Open DonutChart 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 { DonutChart } from 'rei-kit'
const PARTS = [
{ key: 'components', label: 'Component styles', value: 19.8 },
{ key: 'tokens', label: 'Tokens', value: 4.6 },
{ key: 'palettes', label: 'Palettes', value: 2.2 },
{ key: 'motion', label: 'Motion', value: 1.3 },
]
const TONES = ['text-primary', 'text-accent', 'text-positive', 'text-warning']
</script>
<template>
<DonutChart
:slices="PARTS"
label="What the stylesheet is made of"
:value-label="(kb) => `${kb.toFixed(1)} KB`"
:fill="(_, index) => TONES[index % TONES.length]!"
/>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
slices | readonly T[] | yes | The parts, in the order they should read around the ring. |
label | string | yes | Names the chart, e.g. "What the stylesheet is made of". |
valueLabel | (value: number, item: T) => string | yes | How a value reads, e.g. `(kb) => `${kb} KB``. The kit has no units. |
fill | (item: T, index: number) => string | yes | A class for one slice, e.g. `text-primary` — it paints the stroke. |
thickness | number | 14 | How thick the ring is, as a percentage of its radius. |
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.