Skip to content

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

Free

Content with Sidebar Skeleton for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not fill either column.

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="grid w-full max-w-5xl grid-cols-3 gap-8">
  <div class="col-span-2 flex flex-col gap-6">
    <Skeleton class="h-8 w-3/4" />
    <Skeleton class="h-64 w-full" />
    <div class="flex flex-col gap-3">
      <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-4 w-full" />
      <Skeleton class="h-4 w-full" />
      <Skeleton class="h-4 w-4/6" />
    </div>
  </div>
  <div class="flex flex-col gap-6">
    <div class="flex flex-col gap-3 rounded-md border p-4">
      <Skeleton class="h-5 w-24" />
      <Skeleton class="h-4 w-full" />
      <Skeleton class="h-4 w-5/6" />
    </div>
    <div class="flex flex-col gap-3 rounded-md border p-4">
      <Skeleton class="h-5 w-32" />
      <div v-for="link in LINKS" class="flex items-center gap-2" :key="link">
        <Skeleton class="size-8 rounded-md" />
        <Skeleton class="h-4 flex-1" />
      </div>
    </div>
  </div>
</div>

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