Skeleton
@/components/kamod-ui/skeleton
Installation
Import Skeleton from `@/components/kamod-ui/skeleton`.
pnpm add @kamod-ch/uiUsage
Build placeholders that mirror final UI structure (avatar, text, form, table) for a more polished loading experience.
import { Skeleton } from "@/components/kamod-ui/skeleton";<Skeleton />Pulse Variant (Default)
Use the default pulse variant for clean, minimal loading placeholders.
Shimmer Variant
Use the shimmer variant for a more premium loading feel.
Glass Variant
Use the glass variant for soft, subtle placeholders in dark and mixed surfaces.
Avatar Skeleton
Use circle + text lines to represent profile loading states.
Text Skeleton
Create varying text line widths to mimic natural paragraph rhythm.
Card Skeleton
Layer avatar, title, metadata, and content placeholders in card form.
Form Skeleton
Mirror label/input/button spacing to prevent layout shift while forms load.
Table Skeleton
Keep row height and column rhythm consistent with the final data table.
API Reference
Props, slots and variants for this component.
Skeleton
Skeleton component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| class | string | undefined |
| variant | "pulse" | "shimmer" | "glass" | "pulse" |
| data-slot | "skeleton" | "skeleton" |
| children | not used | n/a |
Accessibility Notes
Skeletons are visual-only loading placeholders. Add a nearby live status like 'Loading content...' for assistive technologies and replace placeholders promptly when data arrives.