Skip to content

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

Free

Expandable Rows Skeleton for Vue

A table placeholder with a header and two rows, the first expanded to show a detail panel.

UI library: Ark UI

A header and two rows, each with a small square for an expand icon. A detail panel sits under the first row. Nothing in the demo opens or closes it.

Use it for orders or transactions whose rows reveal detail. If the table is already real and one cell is busy, use a Spinner. In Vue, Ark UI does not toggle that panel.

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-2xl flex-col gap-3">
  <div class="grid grid-cols-4 gap-4 border-b pb-3">
    <Skeleton class="h-4 w-20" />
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-4 w-16" />
    <Skeleton class="h-4 w-20" />
  </div>
  <div class="flex flex-col gap-2">
    <div class="grid grid-cols-4 items-center gap-4">
      <div class="flex items-center gap-2">
        <Skeleton class="size-4 rounded-sm" />
        <Skeleton class="h-4 flex-1" />
      </div>
      <Skeleton class="h-4 w-full" />
      <Skeleton class="h-4 w-full" />
      <Skeleton class="h-4 w-full" />
    </div>
    <div class="rounded-md bg-muted/50 py-2 ps-10 pe-4">
      <div class="flex flex-col gap-2">
        <Skeleton class="h-3 w-full" />
        <Skeleton class="h-3 w-5/6" />
      </div>
    </div>
  </div>
  <div class="grid grid-cols-4 items-center gap-4">
    <div class="flex items-center gap-2">
      <Skeleton class="size-4 rounded-sm" />
      <Skeleton class="h-4 flex-1" />
    </div>
    <Skeleton class="h-4 w-full" />
    <Skeleton class="h-4 w-full" />
<!-- The rest of the file is under Installation. -->

FAQ

How is the header row built?

grid grid-cols-4 gap-4 border-b pb-3 with four h-4 bars: w-20, w-24, w-16 and w-20. The whole block is max-w-2xl with gap-3.

What is the small square in the first cell?

size-4 rounded-sm, beside an h-4 flex-1 bar, in flex items-center gap-2. It holds the place of the expand icon. The other three cells are h-4 w-full.

Is the detail panel opened by state?

No. The panel is always in the markup, under the first row only. It is rounded-md bg-muted/50 py-2 ps-10 pe-4, with two h-3 lines at w-full and w-5/6.

What does the second row show?

The same grid-cols-4 as the first row, including the size-4 rounded-sm icon, and no panel under it.

Why is the panel padded with ps-10?

ps-10 pe-4 insets the detail past the icon column, using logical padding so the inset follows the writing direction. gap-2 stacks the two h-3 lines.

Should these rows be hidden while loading?

Set aria-hidden on each Skeleton when nearby text already says the table is loading. The rows are a grid of Skeleton bars, and the pulse is decorative.

API Reference

Skeleton

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

All 30 skeleton examples