A row of values, compared.
Import it from rei-kit:
import { BarChart } from 'rei-kit'
Open BarChart 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 { BarChart } from 'rei-kit'
const SIZES = [
{ key: 'rei', label: 'rei-kit', value: 31.1 },
{ key: 'element', label: 'element-plus', value: 104.1 },
{ key: 'naive', label: 'naive-ui', value: 132.4 },
]
</script>
<template>
<BarChart
:series="SIZES"
label="Bundle size, ten components"
:value-label="(kb) => `${kb.toFixed(1)} KB`"
:fill="(item) => (item.key === 'rei' ? 'bg-positive' : 'bg-muted')"
/>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
series | readonly T[] | yes | The rows, in the order they should read. |
label | string | yes | Names the chart, e.g. "Bundle size by kit". Becomes its caption. |
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) | () | A class for one row's bar, e.g. `bg-positive`. |
max | number | undefined | The top of the scale. Defaults to the largest value present. |
animate | boolean | true | Grow the bars when the chart first scrolls into view. |
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.