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