Skeleton

Pulsing placeholder block for loading states. Set dimensions via className.

In progress

This component was ported from shadcn. The API is stable; Tidal-specific theming may still evolve.

Default

<Skeleton className="h-4 w-48" />

Card placeholder

<div className="flex items-center gap-4">
  <Skeleton className="size-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-40" />
    <Skeleton className="h-4 w-24" />
  </div>
</div>

Props

Prop	Type / note
className	string — set width/height/shape (e.g. `h-4 w-32`, `size-10 rounded-full`)
...rest	Standard `<div>` attributes are forwarded.

Source

packages/react/src/components/skeleton.tsx · adapted from shadcn