Skeleton · ascii-cn

"use client";
import { Skeleton } from "@/components/ui/skeleton";
export function Demo() {
  return (
    <div
      role="status"
      aria-label="Loading content"
      className="w-full max-w-sm space-y-4"
    >
      <Skeleton className="h-12 w-12" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-1/2" />
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://ascii-cn.kdawg.dev/r/skeleton.json

Usage

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

example.tsx

"use client";
import { Skeleton } from "@/components/ui/skeleton";
export function Demo() {
  return (
    <div
      role="status"
      aria-label="Loading content"
      className="w-full max-w-sm space-y-4"
    >
      <Skeleton className="h-12 w-12" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-1/2" />
    </div>
  );
}

Customize

Edit the component's Tailwind classes directly. The component keeps the shadcn composition API with square geometry and the ASCII color palette.

components/ui/skeleton.tsx

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

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn(
        "bg-muted rounded-none motion-safe:animate-pulse",
        className,
      )}
      {...props}
    />
  );
}

export { Skeleton };