Skeleton

Loading placeholder elements that pulse with a soft shimmer. Use them to hint at content shape while data is being fetched.

Usage

import { Skeleton } from "@bloomkit/react";
 
<Skeleton variant="text" />
<Skeleton variant="card" />
<Skeleton variant="avatar" />

Composition Example

Combine avatar and multiple text skeletons to represent a user row:

<div className="flex items-center gap-[var(--space-md)]">
  <Skeleton variant="avatar" />
  <div className="flex flex-col gap-[var(--space-sm)]">
    <Skeleton variant="text" className="w-[140px]" />
    <Skeleton variant="text" className="w-[100px]" />
  </div>
</div>

Custom Shape

Use variant="custom" with a className to create any shape:

<Skeleton variant="custom" className="h-[32px] w-[200px] rounded-[var(--bloom-radius-pill)]" />

Props

Prop	Type	Default	Description
variant	"text" \| "card" \| "avatar" \| "custom"	"text"	Preset shape — text is a short line, card is a rounded rectangle, avatar is a circle, custom lets you define your own dimensions
className	string	""	Additional Tailwind classes, required when variant is custom

PreviousSeparatorComponents

NextSliderComponents