104Get started
HextaUI

Skeleton: Shapes

On its own, a skeleton is an empty block. Give it a size and radius with classes to match what it stands in for.

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

export function SkeletonShapes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <div className="flex items-center gap-4">
        <Skeleton className="size-12 rounded-full" />
        <div className="flex flex-1 flex-col gap-2">
          <Skeleton className="h-4 w-2/5" />
          <Skeleton className="h-4 w-3/5" />
        </div>
        <Skeleton className="h-8 w-20" />
      </div>
      <Skeleton className="aspect-video w-full rounded-xl" />
    </div>
  )
}

Add this example

This adds the example as components/examples/skeleton/shapes.tsx, together with the Skeleton component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/skeleton-shapes.json

To add only the component, follow the Skeleton installation.

More Skeleton examples

See them all, with keyboard support and accessibility notes, on the Skeleton page.

Related components