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 is a pulsing gray placeholder for content that is still loading. Use shapes that match the geometry of the real content (round avatar, h-4 title, h-3 line of text).

Compared with Spinner: Skeleton is a placeholder for the final layout, Spinner only says "something is loading somewhere".

Installation

Terminal

$ bext ui add skeleton

Copy and paste the following into src/components/ui/skeleton.tsx.

skeleton.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>

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	—	Default: rounded-md bg-muted animate-pulse. Add h-N w-N to size it.

Accessibility

Wrap the container that holds the skeletons with aria-busy="true" aria-live="polite" to tell assistive technologies that the content is loading.

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