Two panes and a handle between them — a list beside a preview, an editor beside its output.
Import it from rei-kit/web:
import { BaseSplitter } from 'rei-kit/web'
Open BaseSplitter 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 { BaseSplitter } from 'rei-kit/web'
const split = ref(35)
</script>
<template>
<BaseSplitter v-model="split" label="Resize the list" class="h-72">
<template #start><nav class="p-3">The list</nav></template>
<template #end><article class="p-3">What is selected</article></template>
</BaseSplitter>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | The handle's accessible name, e.g. "Resize the list". |
orientation | 'horizontal' | 'vertical' | 'horizontal' | `horizontal`: side by side, the handle moves left and right. |
min | number | 15 | How small the first pane may get, as a percentage. |
max | number | 85 | |
step | number | 2 | How far one arrow press moves it, in percentage points. |
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.