Skip to content

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

Free

Content with Sidebar Skeleton for Ark UI

A page placeholder with a wide article column beside a sidebar that holds two related cards.

A wide article column, with a title, an image, and two paragraphs, sits beside a sidebar of two cards. The second card is a short list of links.

Use it for an article with related reading, so both columns hold their place. A known download is clearer as Progress. In React, Ark UI does not fill either column.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Skeleton anatomy: avatar, title, description, media

Usage

<div className="grid w-full max-w-5xl grid-cols-3 gap-8">
  <div className="col-span-2 flex flex-col gap-6">
    <Skeleton className="h-8 w-3/4" />
    <Skeleton className="h-64 w-full" />
    <div className="flex flex-col gap-3">
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-5/6" />
    </div>
    <div className="flex flex-col gap-3">
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-4/6" />
    </div>
  </div>
  <div className="flex flex-col gap-6">
    <div className="flex flex-col gap-3 rounded-md border p-4">
      <Skeleton className="h-5 w-24" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-5/6" />
    </div>
    <div className="flex flex-col gap-3 rounded-md border p-4">
      <Skeleton className="h-5 w-32" />
      {LINKS.map((link) => (
        <div className="flex items-center gap-2" key={link}>
          <Skeleton className="size-8 rounded-md" />
          <Skeleton className="h-4 flex-1" />
        </div>
      ))}
    </div>
{/* The rest of the file is under Installation. */}

FAQ

How is the page split?

A grid w-full max-w-5xl grid-cols-3 gap-8. The article is col-span-2 with gap-6. The sidebar is the remaining column, two cards stacked with gap-6.

What is in the article column?

An h-8 w-3/4 title, an h-64 w-full image, then two paragraph groups with gap-3. The first ends on w-5/6. The second ends on w-4/6. Every line is h-4.

What do the sidebar cards contain?

Each card is flex flex-col gap-3 rounded-md border p-4. The first has an h-5 w-24 title and two h-4 lines. The second has an h-5 w-32 title and four link rows.

How do I keep this layout from jumping?

Match h-64 to the hero, col-span-2 to the real article column, and the four link rows to the list you render. The grid is grid-cols-3 at every width in this file.

Should the page skeleton be announced?

Set aria-hidden on the bars when nearby text already says the page is loading. Skeleton is a placeholder, and a text status should carry the message.

API Reference

Skeleton

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

All 30 skeleton examples