The floating bottom bar.
Import it from rei-kit:
import { TabBar } from 'rei-kit'
Open TabBar 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 { House, Settings } from 'lucide-vue-next'
import { TabBar } from 'rei-kit'
const active = ref('home')
const tabs = [
{ key: 'home', to: '/', label: 'Home', icon: House },
{ key: 'settings', to: '/settings', label: 'Settings', icon: Settings },
]
</script>
<template>
<TabBar :items="tabs" :active="active" label="Main" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
items | readonly TabItem<K>[] | yes | |
active | K | Which item is current. Usually from `route.meta`. | |
label | string | '' | Accessible name for the navigation landmark. |
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.