Saltar al contenido
VEXA
enes
Feedback

Skeleton

Apto para servidor

A placeholder shown while content loads.

Vista previa en vivo

Renderizado desde el código fuente instalado de VEXA — los mismos archivos que recibes.

Escritorio

Instalación

Añade el código del componente a tu proyecto. Las dependencias del registry se resuelven automáticamente.

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

Se instala en components/vexa/skeleton.tsx

Dependencias npm

Sin dependencias npm externas.

Dependencias del registry

  • @vexa/utils

Otros items de VEXA que necesita este componente. Instálalos primero — la CLI los resuelve automáticamente.

Código

Cópialo a su ruta destino, o instálalo con el comando de arriba.

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}
    />
  );
}
JSON del registryr/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"
  }
}

Detalles

Accesibilidad

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

Uso

A placeholder shimmer that reserves layout while content loads.

Anatomía

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

Accesibilidad

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

Foco: Not focusable.

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

Buenas prácticas

Recomendado

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

Evitar

  • 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.
Editar esta página

¿Te ha resultado útil esta página?

Guardado localmente en este navegador. Sin cuenta ni servidor.