Sections of one page, one visible at a time.
Import it from rei-kit/web:
import { BaseTabs } from 'rei-kit/web'
Open BaseTabs 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 { BaseTabs } from 'rei-kit/web'
const tab = ref('week')
const tabs = [
{ key: 'week', label: 'Week' },
{ key: 'month', label: 'Month' },
]
</script>
<template>
<BaseTabs v-model="tab" :items="tabs" label="Report">
<template #default="{ active }">
<p v-if="active === 'week'">This week…</p>
<p v-else>This month…</p>
</template>
</BaseTabs>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
items | readonly TabPanel<K>[] | yes | |
label | string | '' | Accessible name for the tablist. |
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.