Components

Skeleton

tint-1 placeholder block that pulses only when motion is allowed.

Install

bash

npx shadcn add @eloquent/skeleton

Usage

tsx

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

<div role="status" aria-busy="true">
  <span className="sr-only">Loading the front page</span>
  <Skeleton className="h-4 w-48" />
</div>

States

State	Treatment
Motion allowed	Opacity pulse (`motion-safe:animate-pulse`)
`prefers-reduced-motion: reduce`	Static tint-1 block

Keyboard

This component is not interactive. It is not a tab stop, so Tab skips it.

Key	Action
Tab	Skips it; not a tab stop

Vietnamese

Ink adaptation

Upstream's muted rounded block becomes a square tint-1 block. The pulse (opacity only) uses motion-safe:, so there is no animation under prefers-reduced-motion.