Skeleton
Use to show a placeholder while content is loading.
Usage
import {Skeleton} from "@/components/ui/skeleton";
// Simple line
<Skeleton className="h-4 w-[120px]" />
// Circle (e.g., avatar)
<Skeleton className="h-12 w-12 rounded-full" />Components
Skeleton
| Prop | Type | Default | Description |
|---|---|---|---|
borderRadius | "none" | "sm" | "md" | "lg" | "xl" | "full" | "md" | Sets the border radius of the skeleton. |
baseClassName | string | - | Tailwind classes to apply to the inner element. Overrides className. |
className | string | - | Additional Tailwind classes (merged unless baseClassName provided). |
Accepts all other View props (e.g., testID, accessibilityLabel).
Styling
Base classes
Slots:
base- For the skeleton
Base Classes:
base-bg-accent animate-pulse rounded-md