Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Detailed Article Skeleton for Solid

A long-form article placeholder with a title, a hero image, two titled sections and a second image.

UI library: Ark UI

A long article shape: a title and a subtitle, a tall hero, two sections that each start with a heading, and a second image lower down.

Use it for a guide whose sections you can already sketch. When you cannot predict that shape, a Spinner is enough. In Solid, Ark UI does not fetch those sections.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Skeleton anatomy: avatar, title, description, media

Usage

<div class="flex w-full max-w-3xl flex-col gap-8">
    <div class="flex flex-col gap-4">
      <Skeleton class="h-8 w-3/4" />
      <Skeleton class="h-4 w-1/2" />
    </div>
    <Skeleton class="h-96 w-full" />
    <div class="flex flex-col gap-6">
      <div class="flex flex-col gap-3">
        <Skeleton class="h-6 w-48" />
        <Skeleton class="h-4 w-full" />
        <Skeleton class="h-4 w-full" />
        <Skeleton class="h-4 w-full" />
        <Skeleton class="h-4 w-5/6" />
      </div>
      <div class="flex flex-col gap-3">
        <Skeleton class="h-6 w-40" />
        <Skeleton class="h-4 w-full" />
        <Skeleton class="h-4 w-full" />
        <Skeleton class="h-4 w-4/6" />
      </div>
      <Skeleton class="h-48 w-full" />
    </div>
  </div>

FAQ

How is the article column spaced?

flex w-full max-w-3xl flex-col gap-8. A header group, an h-96 image, then a gap-6 stack of two sections and a second image.

What is in the header?

gap-4 stacks an h-8 w-3/4 title and an h-4 w-1/2 line under it.

How does a section differ from a paragraph?

Each section starts with an h-6 heading, w-48 then w-40, above h-4 lines in a gap-3 column. The first section ends on w-5/6. The second ends on w-4/6.

What sizes are the two images?

The hero is h-96 w-full. The later image is h-48 w-full, inside the gap-6 stack. Match both heights to the images you render.

Do the headings pulse the same way as the lines?

Yes. Title, headings, lines and images are all Skeleton, so they share animate-pulse and bg-muted. data-slot="skeleton" is on each one.

Should this article skeleton be hidden?

Set aria-hidden on each bar when the page already says the article is loading. Do not leave the pulse as the only loading message.

API Reference

Skeleton

No extra props in this demo. The rest is on the Skeleton page.

All 30 skeleton examples