Feedback

Skeleton

Name: VEXA
Author: Valfiguer

Server-safe

A placeholder shown while content loads.

Live preview

Rendered from the installed VEXA source — the same files you receive.

Installation

Adds the component source to your project. Registry dependencies are pulled in automatically.

npx shadcn@latest add https://vexa.valfiguer.com/r/skeleton.json

Installs to components/vexa/skeleton.tsx

npm dependencies

No external npm dependencies.

Registry dependencies

@vexa/utils

Other VEXA items this component needs. Install them first — they are resolved automatically by the CLI.

Source

Copy this into its target path, or install it with the command above.

components/vexa/skeleton.tsx

import type * as React from "react";

import { cn } from "@/lib/utils";

/**
 * Skeleton — a placeholder shown while content loads.
 *
 * RSC-safe. Hidden from assistive technology (`aria-hidden`) so the loading
 * shimmer is not announced; pair it with a live region or `Spinner` when the
 * loading state itself must be communicated. Respects reduced-motion.
 */
export function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      aria-hidden="true"
      className={cn(
        "animate-pulse rounded-vexa-md bg-vexa-muted motion-reduce:animate-none",
        className,
      )}
      {...props}
    />
  );
}

Registry JSONr/skeleton.json

r/skeleton.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "type": "registry:ui",
  "title": "Skeleton",
  "description": "A placeholder shown while content loads.",
  "registryDependencies": [
    "@vexa/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/skeleton.tsx",
      "type": "registry:ui",
      "target": "components/vexa/skeleton.tsx",
      "content": "import type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Skeleton — a placeholder shown while content loads.\n *\n * RSC-safe. Hidden from assistive technology (`aria-hidden`) so the loading\n * shimmer is not announced; pair it with a live region or `Spinner` when the\n * loading state itself must be communicated. Respects reduced-motion.\n */\nexport function Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"animate-pulse rounded-vexa-md bg-vexa-muted motion-reduce:animate-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "meta": {
    "frameworks": [
      "react",
      "next"
    ],
    "rsc": "server-safe",
    "cssVars": [
      "--vexa-muted"
    ],
    "a11y": "aria-hidden so the shimmer is not announced; respects prefers-reduced-motion.",
    "example": "<Skeleton className=\"h-4 w-32\" />",
    "tests": "planned — see docs/README.md#roadmap"
  }
}

Details

Accessibility

aria-hidden so the shimmer is not announced; respects prefers-reduced-motion.

Usage

A placeholder shimmer that reserves layout while content loads.

Anatomy

Skeleton: A shaped, animated block sized by `className`.

Accessibility

`aria-hidden` — the shimmer is not announced to screen readers.

Focus: Not focusable.

Respects `prefers-reduced-motion`. Announce loading through a live region (role=status) elsewhere for screen-reader users.

Guidelines

Do

Match the skeleton to the final content's shape.
Keep it `aria-hidden`.
Announce loading via a live region for SR users.

Don't

Don't make it the only loading signal for screen readers.
Don't animate it under reduced motion.
Don't leave skeletons up after content loads.

Edit this page

Was this page helpful?

Stored locally in this browser. No account or server needed.