A panel of anything — a form, a picker, a few settings — anchored to the control that opened it.
Import it from rei-kit:
import { BasePopover } from 'rei-kit'
Open BasePopover 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 { BaseButton, BasePopover, BaseSwitch } from 'rei-kit'
const unpaid = ref(true)
</script>
<template>
<BasePopover label="Filters">
<template #trigger="{ props }">
<BaseButton variant="secondary" v-bind="props">Filters</BaseButton>
</template>
<template #default="{ close }">
<BaseSwitch v-model="unpaid" label="Only unpaid" />
<BaseButton class="mt-3" size="sm" block @click="close">Done</BaseButton>
</template>
</BasePopover>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | The panel's accessible name — what a screen reader announces on open. |
side | 'bottom' | 'top' | 'bottom' | Where it prefers to open. It flips when there is no room there. |
align | 'start' | 'center' | 'end' | 'start' | Which edge of the trigger the panel lines up with. |
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.