Skip to content
Rhinolabs UI Toolkit UI Toolkit

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.

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