Shimmering placeholders for loading content.
npx shadcn@latest add @lokalhost/skeletonThe source is copied to components/ui/skeleton.tsx — it’s yours to edit.
import { Skeleton } from "@/components/ui/skeleton";
<View style={{ flexDirection: "row", gap: 12, alignItems: "center" }}>
<Skeleton width={44} height={44} radius={22} />
<View style={{ flex: 1, gap: 8 }}>
<Skeleton width="40%" height={14} />
<Skeleton width="25%" height={12} />
</View>
</View>
<Skeleton height={176} radius={16} />| Prop | Type | Default | Description |
|---|---|---|---|
width | DimensionValue | "100%" | Width of the placeholder. |
height | number | 16 | Height in points. |
radius | number | 8 | Corner radius. Use height / 2 for circles. |
style | StyleProp<ViewStyle> | undefined | Extra styles. |