A length starts with a digit, a dot, or opens a CSS function.
Import it from rei-kit:
import { SkeletonList } from 'rei-kit'
Open SkeletonList 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 { SkeletonList } from 'rei-kit'
</script>
<template>
<SkeletonList :rows="4" label="Loading entries" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
rows | number | 3 | |
rowHeight | string | 'h-14' | How tall each row is, as either a utility class (`h-20`) or a CSS length (`5rem`, `72px`, `var(--row)`). Both are accepted because the class-only version failed silently: a length passed here landed in `class` as `5rem`, which is not a class, so the rows had no height and the placeholder rendered as nothing at all. A loading state that shows an empty page is worse than no loading state, because it looks like the page is finished and empty. |
label | string | 'Loading…' |
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.