A panel that comes in from the edge of a wide screen.
Import it from rei-kit/web:
import { BaseDrawer } from 'rei-kit/web'
Open BaseDrawer 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, BaseCheckbox } from 'rei-kit'
import { BaseDrawer } from 'rei-kit/web'
const open = ref(false)
const unpaid = ref(true)
const thisMonth = ref(false)
</script>
<template>
<BaseButton variant="secondary" @click="open = true">Filters</BaseButton>
<BaseDrawer v-model="open" title="Filters" close-label="Close" side="end" size="24rem">
<div class="flex flex-col gap-3">
<BaseCheckbox v-model="unpaid" label="Only unpaid" />
<BaseCheckbox v-model="thisMonth" label="This month" />
</div>
<template #actions>
<BaseButton variant="ghost" @click="open = false">Clear</BaseButton>
<BaseButton @click="open = false">Apply</BaseButton>
</template>
</BaseDrawer>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
title | string | yes | Names the dialog. Already translated. |
closeLabel | string | yes | Accessible name of the close button. Already translated. |
side | 'start' | 'end' | 'top' | 'bottom' | 'end' | Which edge it comes from. `start` and `end` follow the writing direction. |
size | string | '22rem' | How far it reaches in from that edge — a width on the sides, a height on the top and bottom. Any CSS length. |
dismissible | boolean | true | Escape and the scrim close it. Off for something half filled in. |
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.