Components — Modern React UI Library

Examples

Basic Skeleton

A single skeleton block. Customize width and height via className.

Basic

import { Skeleton } from "@g4rcez/components/display/skeleton";

function BasicSkeleton() {
  return (
    <div className="flex flex-col gap-4">
      <Skeleton />
      <Skeleton className="h-4 w-48" />
      <Skeleton className="h-12 w-full" />
    </div>
  );
}

Skeleton List

SkeletonList renders a list of skeleton rows with random widths to simulate real content.

SkeletonList

import { SkeletonList } from "@g4rcez/components/display/skeleton";

function SkeletonListDemo() {
  return (
    <div className="flex flex-col gap-8">
      <SkeletonList rows={3} />
      <SkeletonList rows={6} />
    </div>
  );
}

Skeleton as Different Elements

Use the `as` prop to change the rendered element for semantic correctness.

Semantic elements

import { Skeleton } from "@g4rcez/components/display/skeleton";

function SemanticSkeleton() {
  return (
    <div className="flex flex-col gap-4">
      <Skeleton as="div" className="h-40 w-full rounded-lg" />
      <div className="flex gap-3 items-center">
        <Skeleton as="span" className="h-10 w-10 rounded-full" />
        <div className="flex flex-col gap-2 flex-1">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-3 w-48" />
        </div>
      </div>
    </div>
  );
}

When to use Skeleton

Use when

You need the documented Skeleton interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Skeleton behavior you need.

Accessibility

Keep the Skeleton labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.