Data & feedback@neumorphism-ui/skeleton

Skeleton

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

@neumorphism-ui/skeleton

Registry JSON

Preview

Installation

npx shadcn@latest add @neumorphism-ui/skeleton

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

<div className="flex items-center gap-3" aria-busy="true">
  <span className="sr-only">Loading profile</span>
  <Skeleton className="size-12 rounded-full" />
  <div className="grid flex-1 gap-2">
    <Skeleton className="h-4 w-1/3" />
    <Skeleton className="h-3 w-2/3" />
  </div>
</div>

API Reference

Component	Prop	Type	Default	Description
`Skeleton`	`className`required	`string`	`—`	Sets the placeholder width, height, and radius.
`Skeleton`	`aria-hidden`	`boolean`	`true`	Hides the decorative placeholder from the accessibility tree.