Where the toasts land. One of these, at the app root.
Import it from rei-kit:
import { ToastHost } from 'rei-kit'
Open ToastHost 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 { BaseButton, ToastHost, useToast } from 'rei-kit'
const toast = useToast()
</script>
<template>
<!-- Once, near the root of the app. -->
<ToastHost close-label="Close" />
<BaseButton @click="toast.success('Saved')">Save</BaseButton>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
closeLabel | string | yes | The accessible name of each dismiss button. Required, because the button is an X and an X has no name — and the kit does not know the language. |
bottom | boolean | false | Stack from the bottom instead of the top. For a phone shell, where the top is a status bar and a header and the thumb is nowhere near it. |
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.