skeleton

Use to show a placeholder while content is loading.

Installation

npx @gentleduck/cli add skeleton
npx @gentleduck/cli add skeleton

Usage

import { Skeleton } from "@/components/ui/skeleton"
import { Skeleton } from "@/components/ui/skeleton"
<Skeleton className="w-[100px] h-[20px] rounded-full" />
<Skeleton className="w-[100px] h-[20px] rounded-full" />

Examples

Card

API Reference

Skeleton

  • props (React.ComponentProps<'div'>): All other standard div props are forwarded to the root <div> element.

Behavior: Renders a div with a pulsing animation (animate-pulse), rounded corners (rounded-md), and a muted background (bg-muted). Used as a placeholder UI skeleton while content is loading. It is marked with aria-hidden="true" for accessibility and includes a custom attribute duck-skeleton for styling or targeting.

SheetSlider