Skeleton

El hueco de lo que está cargando, con la forma que va a tener.

Display

Installation

npx shadcn@latest add @saastro/skeleton

Preview

Skeleton preview

Source Code

import * as React from "react"

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

/**
 * Markup puro: no lleva primitivo. Marca el hueco de lo que está cargando con
 * la forma que va a tener, no con un spinner centrado — la página no salta
 * cuando llegan los datos.
 */
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      aria-hidden
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }

Registry Setup

Add the Saastro registry to your components.json:

{
  "registries": {
    "@saastro": "https://ui.saastro.io/r/{name}.json"
  }
}