Skeleton

Reserve space for content while it loads.

Preview

Default

12345678910111213141516171819202122232425262728293031323334353637383940import * as React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
function AnswerLine({ loading, children }) {
  return <div style={{ position: "relative", width: "fit-content", maxWidth: "100%" }}>
    <span aria-hidden={loading || void 0} style={{ visibility: loading ? "hidden" : void 0 }}>{children}</span>
    {loading && <Skeleton style={{ position: "absolute", insetInline: 0, top: "50%", transform: "translateY(-50%)" }} />}
  </div>;
}
function AnswerContent({ loading = false }) {
  return <div style={{ display: "grid", gap: 8, lineHeight: "22px" }}>
    <AnswerLine loading={loading}>Research assistant</AnswerLine>
    <div style={{ color: "var(--muted-foreground)" }}>
      <AnswerLine loading={loading}>Less setup and visible sources.</AnswerLine>
      <AnswerLine loading={loading}>A clear review step before launch.</AnswerLine>
    </div>
  </div>;
}
function AnswerPreview() {
  const [loading, setLoading] = React.useState(true);
  return <section aria-busy={loading} aria-label="Research answer" style={{ width: "min(100%, 360px)", display: "grid", gap: 16 }}>
    <AnswerContent loading={loading} />
    <span role="status" className="ui-sr-only">{loading ? "Preparing the answer" : "Answer ready"}</span>
    <Button size="sm" variant="subtle" style={{ minWidth: 100 }} onClick={() => setLoading((value) => !value)}>{loading ? "Show answer" : "Load again"}</Button>
  </section>;
}
function SkeletonPreview() {
  return <div className="web-demo" style={{ width: "100%", alignItems: "center" }}><AnswerPreview /></div>;
}


function Example() {
  return <>
<SkeletonPreview />
</>;
}
export {
  Example as default
};

Design guidance

Use Skeleton when the shape of the arriving content is known. Use Loader for activity without a useful content outline, or Progress when completion can be represented truthfully. Match the expected layout so replacement feels stable; do not display fabricated content as if it has loaded.

Installation

Install

No source.

Download example files — JSX recipes, demo styles and any sample assets. Install the component first.

Basic usage

123456789import { Skeleton } from "@/components/ui/skeleton";

export function Answer({ loading }: { loading: boolean }) {
return (
  <section aria-busy={loading}>
    {loading ? <><div role="status">Preparing answer</div><Skeleton style={{ width: "80%" }} /></> : <p>Answer text</p>}
  </section>
);
}

Structures

Skeleton is a decorative div with aria-hidden set. Put aria-busy and one concise pending status on the parent region. Replace the shapes with the loaded content when ready.

Examples

Shape comparison

Choose text, circle, or rectangle geometry to match the arriving content.

123456789101112131415161718192021import * as React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
function ShapeComparisonExample() {
  return <div style={{ display: "grid", gap: 16, width: "min(100%, 320px)" }}>
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}><Skeleton variant="circle" /><Skeleton style={{ width: 160 }} /></div>
    <Skeleton style={{ width: "90%" }} />
    <Skeleton variant="rectangle" style={{ width: "100%", height: 120 }} />
  </div>;
}


function Example() {
  return <>
<ShapeComparisonExample />
</>;
}
export {
  Example as default
};

Motion

Compare the default pulse with static geometry. Reduced-motion preferences also disable animation.

1234567891011121314151617181920import * as React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
function MotionExample() {
  return <div style={{ display: "grid", gap: 12, width: "min(100%, 280px)" }}>
    <Skeleton animation="pulse" style={{ width: "100%" }} />
    <Skeleton animation="none" style={{ width: "100%" }} />
  </div>;
}


function Example() {
  return <>
<MotionExample />
</>;
}
export {
  Example as default
};

Loading to content

Use the preview control to replace placeholders with the matching answer. The host owns aria-busy and the pending status because Skeleton is decorative.

12345678910111213141516171819202122232425262728293031323334353637383940import * as React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
function AnswerLine({ loading, children }) {
  return <div style={{ position: "relative", width: "fit-content", maxWidth: "100%" }}>
    <span aria-hidden={loading || void 0} style={{ visibility: loading ? "hidden" : void 0 }}>{children}</span>
    {loading && <Skeleton style={{ position: "absolute", insetInline: 0, top: "50%", transform: "translateY(-50%)" }} />}
  </div>;
}
function AnswerContent({ loading = false }) {
  return <div style={{ display: "grid", gap: 8, lineHeight: "22px" }}>
    <AnswerLine loading={loading}>Research assistant</AnswerLine>
    <div style={{ color: "var(--muted-foreground)" }}>
      <AnswerLine loading={loading}>Less setup and visible sources.</AnswerLine>
      <AnswerLine loading={loading}>A clear review step before launch.</AnswerLine>
    </div>
  </div>;
}
function AnswerPreview() {
  const [loading, setLoading] = React.useState(true);
  return <section aria-busy={loading} aria-label="Research answer" style={{ width: "min(100%, 360px)", display: "grid", gap: 16 }}>
    <AnswerContent loading={loading} />
    <span role="status" className="ui-sr-only">{loading ? "Preparing the answer" : "Answer ready"}</span>
    <Button size="sm" variant="subtle" style={{ minWidth: 100 }} onClick={() => setLoading((value) => !value)}>{loading ? "Show answer" : "Load again"}</Button>
  </section>;
}
function SkeletonPreview() {
  return <div className="web-demo" style={{ width: "100%", alignItems: "center" }}><AnswerPreview /></div>;
}


function Example() {
  return <>
<SkeletonPreview />
</>;
}
export {
  Example as default
};

Card and list layouts

Use several shapes together when the host has a known card or row layout.

1234567891011121314151617181920212223242526272829import * as React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
function TextExample() {
  return <div style={{ display: "grid", gap: 12, width: "min(100%, 320px)" }}><Skeleton style={{ width: "96%" }} /><Skeleton style={{ width: "100%" }} /><Skeleton style={{ width: "74%" }} /></div>;
}
function CardExample() {
  return <Card.Root style={{ width: "min(100%, 360px)" }}><Skeleton variant="rectangle" /><Skeleton style={{ width: "65%" }} /><TextExample /></Card.Root>;
}
function ListExample() {
  return <div style={{ display: "grid", gap: 16, width: "min(100%, 360px)" }}>{[0, 1, 2].map((i) => <div key={i} style={{ display: "flex", gap: 12, alignItems: "center" }}><Skeleton variant="circle" style={{ width: 36, height: 36 }} /><div style={{ display: "grid", gap: 10, flex: 1 }}><Skeleton style={{ width: "80%" }} /><Skeleton style={{ width: "55%", height: 10 }} /></div></div>)}</div>;
}
function CardAndListRecipesExample() {
  return <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 24, width: "100%" }}>
    <CardExample />
    <ListExample />
  </div>;
}


function Example() {
  return <>
<CardAndListRecipesExample />
</>;
}
export {
  Example as default
};

API reference

Prop	Type	Default	Description
`variant`	`"text" \| "circle" \| "rectangle"`	`"text"`	Selects deterministic placeholder geometry. Text reserves a 12px line height.
`animation`	`"pulse" \| "none"`	`"pulse"`	Controls the pulse. Reduced-motion preferences disable animation.
`style / native props / ref / className`	`React div props`		Set dimensions and forward native div attributes. aria-hidden is always true.