Skeleton

Reserves the shape of content while its data is loading.

Preview

Example code

Usage

tsx

import { Skeleton } from "earthling-ui/skeleton";

export function Example() {
  return (
    <>
      <Skeleton aria-hidden="true" className="h-4 w-48" />
    </>
  );
}

Match the approximate size and layout of the content that will replace each skeleton.
Group related placeholders under one loading status instead of announcing every shape.
The pulse animation stops when reduced motion is requested.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

Import package

Own the source

bash

npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx

// Generated by dts-bundle-generator v9.5.1

export declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

export {};

Runtime dependencies: cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Skeleton implementation

tsx

"use client";

import { cn } from "@/utils/cn";
import { type ComponentProps, forwardRef } from "react";

const Skeleton = forwardRef<HTMLDivElement, ComponentProps<"div">>(
  ({ className, ...props }, ref) => {
    return (
      <div
        className={cn(
          "animate-pulse rounded-md bg-muted motion-reduce:animate-none",
          className,
        )}
        ref={ref}
        {...props}
      />
    );
  },
);
Skeleton.displayName = "Skeleton";

export { Skeleton };