All components
Skeleton Card
FeedbackA card-shaped loading placeholder built from pulsing blocks.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/skeleton-card.jsonOr install manually
1. Install dependencies
pnpm add clsx tailwind-merge2. Copy the component source into
components/library/skeleton-card.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Classes applied to the card. |
Accessibility
- aria-hidden, so screen readers skip the placeholder entirely.
- Announce loading state separately with aria-live where it matters.
- Block sizes mirror the real card, so there is no layout jump.
Dependencies
clsxtailwind-merge