Skip to content

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

Free

Table with Pagination Skeleton for Vue

A table of five loading rows, with a footer that reserves a page count and five page buttons.

UI library: Ark UI

A header and five rows of four cells, then a footer: one bar for the page summary and five squares for the page buttons.

Use it so the pager holds its place before the rows arrive. When the pages are real, put Pagination under the table. In Vue, Ark UI does not know how many pages there are.

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-4">
  <div class="flex 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 v-for="row in ROWS" class="grid grid-cols-4 gap-4" :key="row">
      <Skeleton class="h-4 w-full" />
      <Skeleton class="h-4 w-full" />
      <Skeleton class="h-4 w-full" />
      <Skeleton class="h-4 w-full" />
    </div>
  </div>
  <div class="flex items-center justify-between border-t pt-3">
    <Skeleton class="h-4 w-32" />
    <div class="flex gap-2">
      <Skeleton class="size-8 rounded-md" />
      <Skeleton class="size-8 rounded-md" />
      <Skeleton class="size-8 rounded-md" />
      <Skeleton class="size-8 rounded-md" />
      <Skeleton class="size-8 rounded-md" />
    </div>
  </div>
</div>

FAQ

How is the table block built?

A max-w-2xl column with gap-4. Inside, header and rows use gap-3. Header and each row are grid grid-cols-4 gap-4, and the header adds border-b pb-3.

What widths are the header bars?

h-4 at w-20, w-24, w-16 and w-20. Each body cell is h-4 w-full.

How many body rows are there?

Five, from ROWS. They sit above the footer in the same gap-3 stack.

What is in the pagination row?

flex items-center justify-between border-t pt-3. The start bar is h-4 w-32. The end is flex gap-2 of five size-8 rounded-md squares.

How do I match a real pager?

Keep five size-8 squares if you show five page buttons, and h-4 w-32 for the page summary. border-t is what separates the footer from the rows.

Should the pager bars be hidden?

Set aria-hidden on each Skeleton when nearby text already says the table is loading. The squares stand in for the page buttons.

API Reference

Skeleton

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

All 30 skeleton examples