Skeleton

A placeholder component used to show a loading state while content is being fetched.

Usage

import { Skeleton } from "@rhinolabs/ui"

export default function SkeletonDemo() {
  return <Skeleton className="h-4 w-[250px]" />
}

Examples

Basic Skeleton

Simple loading placeholder.

<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>

Card Skeleton

Loading state for a card component.

<div className="space-y-3">
  <Skeleton className="h-[125px] w-full rounded-xl" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

Table Skeleton

Loading state for table rows.

<div className="space-y-3">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-[250px]" />
</div>

Props

The Skeleton component accepts all standard HTML div attributes.

Prop	Type	Description
className	string	Additional CSS classes

Design Considerations

• Match content dimensions
• Use consistent spacing
• Apply appropriate timing
• Consider mobile layouts
• Maintain visual hierarchy

Accessibility

• Indicates loading state
• Uses semantic markup
• Provides visual feedback
• Handles screen readers
• Maintains content flow