Pins the sheet to the area the keyboard has left visible.
Import it from rei-kit:
import { BaseSheet } from 'rei-kit'
Open BaseSheet 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, BaseSheet } from 'rei-kit'
const open = ref(false)
</script>
<template>
<BaseButton @click="open = true">New entry</BaseButton>
<BaseSheet v-model="open" title="New entry" close-label="Close">
<p>Anything that belongs to a thumb.</p>
</BaseSheet>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
title | string | yes | |
subtitle | string | '' | |
closeLabel | string | 'Close' | Accessible name for the close button. A prop rather than a translation: a component that calls t() forces every consumer onto one i18n setup, and this is the package's only visible string. |
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.