Skeleton
Animated placeholder for loading states. Wave shimmer (default) and pulse variants, five rounded options, and composable with any layout.
Installation
pnpm add @tessinaui/uiUsage
import { Skeleton } from "@tessinaui/ui";<Skeleton className="h-10 w-40" />Playground
Preview
Showcase
Preview
Variants
| Variant | Description |
|---|---|
wave | A shimmer gradient sweeps across the element. Default. |
pulse | Opacity fades in and out using Tailwind's animate-pulse. |
API Reference
Skeleton
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "wave" | "pulse" | "wave" | Animation style |
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Border radius |
className | string | — | Extra classes — typically set h-* and w-* to size the placeholder |
The component extends all standard div HTML attributes.
Shortcut
Keyboard shortcut badges for documenting and displaying key combinations. Includes a standalone Key component for individual keys and a Shortcut wrapper for combos with configurable separators and RTL support.
Progress
Communicate operation status with a linear bar or circular ring. Four variants (default/success/warning/error), three sizes, five rounding options, indeterminate animation, optional label with inside/outside positioning, and LTR/RTL support.