Skeleton

Use to show a placeholder while content is loading.

tsx

1
2
3
4
5
6
7<div className="flex items-center gap-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

Skeleton — placeholder gris pulsé pour du contenu en cours de chargement. Utiliser des shapes qui matchent la géométrie du contenu réel (avatar rond, titre h-4, ligne de texte h-3).

Vs Spinner : Skeleton = placeholder du layout final, Spinner = juste "ça charge quelque part".

Installation

Terminal

$ bext ui add skeleton

Usage

tsx

1
2
3
4
5
6
7
8
9import { Skeleton } from "@bext-stack/ui/primitives"

<div className="flex items-center gap-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

Anatomy

<Skeleton className="h-4 w-full rounded-md" />

API Reference

Skeleton

Prop	Type	Default	Description
className	string	—	Standard : rounded-md bg-muted animate-pulse. Ajouter h-N w-N pour dimensionner.

Accessibility

Wrapper le container qui contient les skeletons avec aria-busy="true" aria-live="polite" pour signaler aux AT que le contenu se charge.

Try it live Open in play

Edit this example live in the bext playground — it compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// A skeleton is a pulsing placeholder shown while real content
// loads. The pulse is a small CSS keyframe injected via <style>.
const CSS = "@keyframes ui-pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }";
const bar = (w) => ({
  height: 14, width: w, borderRadius: 6, background: "#e2e8f0",
  animation: "ui-pulse 1.6s ease-in-out infinite",
});

export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <style>{CSS}</style>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Skeleton</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A placeholder shown while content loads.</p>
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 22 }}>
        <div style={{ width: 48, height: 48, borderRadius: 9999, background: "#e2e8f0", animation: "ui-pulse 1.6s ease-in-out infinite", flexShrink: 0 }} />

The React idiom — same UI, for comparison.

← Sidebar Slider →

On This Page