Skeleton

Demos

A profile row in its loading state.

"use client"

import { Skeleton } from "@workspace/ui/components/skeleton"

export function SkeletonDemo() {
  return (
    <div className="flex w-full max-w-sm items-center gap-4">
      <Skeleton className="size-12 rounded-full" />
      <div className="grid flex-1 gap-2">
        <Skeleton className="h-4 w-3/4" />
        <Skeleton className="h-4 w-1/2" />
      </div>
    </div>
  )
}

Usage

Use skeletons when the layout of the incoming content is known. Match the size and position of the real content so nothing jumps when it arrives. For an action with an unknown result, use a spinner or a Progress bar.

Import it from @workspace/ui/components/skeleton.

Anatomy

Skeleton — A pulsing block. Size and shape come from className.

Notes

Use rounded-full for avatars and round icons.
Skeletons are decorative. Announce loading to screen readers in another way, such as aria-busy on the container.

Examples

Card

Match the shape of the content that will load, such as a result card.

"use client"

import { Skeleton } from "@workspace/ui/components/skeleton"

export function SkeletonCard() {
  return (
    <div className="grid w-full max-w-sm gap-3 rounded-lg border p-4">
      <Skeleton className="h-4 w-24" />
      <Skeleton className="h-8 w-32" />
      <Skeleton className="h-3 w-full" />
      <Skeleton className="h-3 w-5/6" />
    </div>
  )
}

List

Repeat a row to stand in for a list of results.

"use client"

import { Skeleton } from "@workspace/ui/components/skeleton"

export function SkeletonList() {
  return (
    <div className="grid w-full max-w-sm gap-3">
      {Array.from({ length: 4 }).map((_, index) => (
        <div key={index} className="flex items-center justify-between gap-4">
          <Skeleton className="h-4 w-28" />
          <Skeleton className="h-4 w-16" />
        </div>
      ))}
    </div>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

Skeleton

Prop	Type	Default	Description
`className`	`string`	—	Classes merged onto the element. Set the size here.