Skeleton
Placeholder shimmer used while content loads.
<Skeleton className="w-full max-w-md" />Usage
import { Skeleton } from "@reva/ui";Examples
Shape
Use shape for rectangle (default), circle, or pill.
<HStack gap={6} align="center"> <Skeleton shape="rectangle" className="w-24" /> <Skeleton shape="circle" /> <Skeleton shape="pill" className="w-24" /></HStack>Size
Use size for the height ramp (xs → xl). xs maps to size-2 / h-2; circles step size-2 through size-10.
<VStack gap={6} align="center" justify="center"> <Skeleton size="xs" className="w-28" /> <Skeleton size="sm" className="w-28" /> <Skeleton size="default" className="w-28" /> <Skeleton size="lg" className="w-28" /> <Skeleton size="xl" className="w-28" /></VStack>Loading swap
Toggle loading to fade children in when data is ready. Implemented as SkeletonLoadingSwapDemo in the docs app (useState + Button).
"use client";import { Button, Skeleton, Text, VStack } from "@reva/ui";import * as React from "react";export function SkeletonLoadingSwapDemo() {const [loading, setLoading] = React.useState(true);return ( <VStack align="center" gap={8}> <Button size="sm" type="button" variant="secondary" onClick={() => setLoading((v) => !v)}> {loading ? "Finish loading" : "Reload"} </Button> <Skeleton className="min-w-[200px]" fadeDuration={200} loading={loading}> <Text className="text-sm">Loaded content</Text> </Skeleton> </VStack>);}Composing layouts
Stack rows with VStack or align placeholders with HStack.
<VStack gap={3} align="stretch" className="w-full max-w-3xl"> <HStack gap={3} align="center"> <Skeleton shape="circle" size="sm" /> <Skeleton className="min-w-0 flex-1" size="sm" /> </HStack> <Skeleton className="w-full" size="sm" /> <Skeleton className="w-3/4" size="sm" /></VStack>Props
Skeleton extends React.ComponentProps<"div"> with shape, size, loading, and fadeDuration.
| Prop | Type | Description |
|---|---|---|
shape | "rectangle" | "circle" | "pill" | rectangle — rounded-md; circle — square footprint + rounded-full; pill — full rounded-full bar. Defaults to rectangle. |
size | "xs" | "sm" | "default" | "lg" | "xl" | Height ramp; xs → h-2 / size-2 (circles); sm … xl → h-4 … h-10 / size-4 … size-10. Defaults to default. |
loading | boolean | When true (default), shows the shimmer and ignores children. When false with children, fades content in; when false without children, renders nothing. |
fadeDuration | number | Fade duration in ms when loading becomes false. Defaults to 200. Sets --tw-duration on the loaded wrapper. |
className | string | Merged after variants — overrides size / shape dimensions when needed (for example size-5 from className). |
Other div props are forwarded to the root element.