A surface with a border, and optionally a head and a foot.
Import it from rei-kit:
import { BaseCard } from 'rei-kit'
Open BaseCard 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 { BaseCard } from 'rei-kit'
</script>
<template>
<BaseCard>
<template #head>This month</template>
Spent less than last month.
<template #foot>Updated today</template>
</BaseCard>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
interactive | boolean | false | |
as | string | 'div' | |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | How much room the card gives its contents. This component shipped with `px-5 py-4` baked in and was then used by nobody, across three apps and thirty-five hand-written card surfaces — which used `p-3` six times, `p-4` six times, `p-5` five times and `p-1` four times, and not once the pair this insisted on. A card that fixes its padding cannot be reached for, which is the same mistake `PageContainer` made with its width and `size="sm"` made with its height. `none` is for a card that holds a list: the rows own the padding, and the dividers have to reach the border. |
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.