Skeleton

A loading placeholder with animated pulse effect.

Installation

Package

import { Skeleton } from '@smc/darwin-ui';

shadcn CLI

npx shadcn add https://darwin-ui.mandalsuraj.com/registry/skeleton.json

Usage

import { Skeleton } from '@smc/darwin-ui';

export function Example() {
  return (
    <div className="space-y-2">
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-1/2" />
    </div>
  );
}

Examples

Card Skeleton

<div className="space-y-4">
  <Skeleton className="h-40 w-full rounded-lg" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>

Avatar Skeleton

<Skeleton className="h-12 w-12 rounded-full" />

API Reference

Props

Prop	Type	Description
className	string	Size and shape classes