Skeleton

Placeholder loading shimmer for content that hasn't loaded yet.

Examples

Text lines

Placeholder for a block of text content.

Avatar + text

Placeholder for a user profile row.

Card

Placeholder for a content card.

Table rows

Placeholder for tabular data.

Custom shape

Skeleton adapted to a non-standard shape (e.g. circle badge).

Form

Skeleton placeholder for a form layout.

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { Skeleton } from "@rokle/components";

import { Skeleton } from "@rokle/components";

export function Example() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="w-12 h-12 rounded-full" />
      <div className="flex-1 space-y-2">
        <Skeleton className="h-4 w-3/4" />
        <Skeleton className="h-4 w-1/2" />
      </div>
    </div>
  );
}

Source

The implementation source for this component. Copy it into your project and customise.

API Reference

Prop	Type	Default	Description
className	string	-	Width, height, and shape via CSS classes.

Previous← Progress NextToast →