Neumorphism UI

Skeleton

Use Skeleton to reserve the shape of content while it loads and reduce layout movement.

Preview

Loading a content card

Reserve a cover, avatar, heading, and several text lines inside one named loading region.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/skeleton

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Match the placeholders to the final content's dimensions. Mark the surrounding region as busy and provide a short loading message rather than naming every decorative shape.

import { Skeleton } from "@/components/ui/skeleton";

export default function Example() {
  return (
    <div aria-busy="true">
      <span className="sr-only">Loading profile</span>
      <Skeleton className="h-4 w-40" />
    </div>
  );
}

API Reference

A simple div-based pulse placeholder. It only provides a visual loading shape and is hidden from assistive technology with aria-hidden=true.

ComponentPropTypeDefaultDescription
SkeletonclassNamerequiredstring—Sets the placeholder width, height, and radius.
Skeletonaria-hiddenbooleantrueHides the decorative placeholder from the accessibility tree.

Accessibility

  • 01

    Because Skeleton is aria-hidden, provide a separate sr-only status message or role=status around it.

  • 02

    Set aria-busy=true on the loading region when appropriate, then remove it when loading completes.

  • 03

    The global prefers-reduced-motion rule effectively disables the pulse animation.