A tree of things that contain things: folders, a category list, a table of contents.
Import it from rei-kit/web:
import { BaseTree } from 'rei-kit/web'
Open BaseTree 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 { ref } from 'vue'
import { BaseTree } from 'rei-kit/web'
import type { TreeNode } from 'rei-kit/web'
const nodes: TreeNode<string>[] = [
{
key: 'src',
label: 'src',
children: [
{ key: 'index', label: 'index.ts' },
{
key: 'components',
label: 'components',
children: [{ key: 'button', label: 'Button.vue' }],
},
],
},
{ key: 'readme', label: 'README.md' },
]
const open = ref(['src'])
const chosen = ref<string | undefined>('index')
</script>
<template>
<BaseTree v-model="chosen" v-model:expanded="open" :nodes="nodes" label="Files" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
modelValue | Value | undefined | The chosen key, or keys in `multiple` mode, with `v-model`. |
nodes | readonly TreeNode<K>[] | yes | |
label | string | yes | The tree's accessible name. |
mode | M | 'single' as M | `multiple` lets several be chosen, each with its own tick. |
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.