Skeleton

Use to show a placeholder while content is loading.

1. Import

Import the skeleton component from the design system.

import { Skeleton } from "@/design-system/components/ui/skeleton"

2. Props

Skeleton component props.

Prop	Type	Default
className	string	--

3. Usages

Common skeleton patterns and configurations.

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

export function Example() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  );
}