Skeleton

The Skeleton component provides animated placeholders that mimic the layout of content while it loads. This improves perceived performance and creates a smoother user experience.

Match skeleton shapes and sizes to your actual content for a seamless transition.

Features

Animated pulse effect
Customizable size and shape via className
Adapts to container dimensions
Works for text, images, buttons, and more
Lightweight implementation

Usage

import { Skeleton } from '@loke/design-system/skeleton';

export default 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>
  );
}

Tips:

Use className to set dimensions and border radius.
Create skeleton layouts that match your actual content structure.
Avoid using skeletons for very short loading times (under 300ms).

Props

Skeleton

Prop

Type

The Skeleton component accepts all standard div HTML attributes.

Examples

Basic skeleton

<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

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

List skeleton

<div className="space-y-4">
  {[...Array(3)].map((_, i) => (
    <div key={i} className="flex items-center space-x-4">
      <Skeleton className="h-10 w-10 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[200px]" />
        <Skeleton className="h-4 w-[150px]" />
      </div>
    </div>
  ))}
</div>

Form skeleton

<div className="space-y-6">
  <div className="space-y-2">
    <Skeleton className="h-4 w-[100px]" />
    <Skeleton className="h-10 w-full" />
  </div>
  <div className="space-y-2">
    <Skeleton className="h-4 w-[120px]" />
    <Skeleton className="h-10 w-full" />
  </div>
  <Skeleton className="h-10 w-[100px]" />
</div>

Accessibility

Skeletons are purely visual placeholders with no semantic meaning.
Use aria-busy="true" on the parent container while loading.
Consider using aria-hidden="true" on skeleton elements.
Provide alternative text or announcements for screen readers during loading.

Best practices

Match skeleton dimensions to actual content for smooth transitions.
Use consistent spacing to maintain layout stability.
Group related skeletons to represent content structure.
Avoid skeleton flicker—don't show for very short loads (under 300ms).
Consider using a minimum display time to prevent jarring transitions.
Use rounded shapes for avatars and sharp corners for cards/text.
Don't overload the page with too many animated elements.

Skeleton

On this page