ephemera

Skeleton

A light pencil sketch while content loads.

Install

$ npx shadcn@latest add https://ephemera.kerrshift.com/r/skeleton.json

Or copy the source below into components/ui/skeleton.tsx. Core components need the Paper Theme and Radix where noted.

Usage

example.tsx
import { Skeleton } from "@/components/ui/skeleton";

<div className="flex items-center gap-4">
  <Skeleton className="size-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-48" />
    <Skeleton className="h-4 w-32" />
  </div>
</div>

Props

PropTypeDefaultDescription
classNamestring—Size and shape it with Tailwind classes.

Any other props are passed to the root element.

Fonts

Components read optional CSS variables and fall back to system fonts: --font-display, --font-receipt, --font-type, --font-hand and --font-stamp. This site uses Fraunces, IBM Plex Mono, Courier Prime, Caveat and Anton.

Source

components/ui/skeleton.tsx
import * as React from "react";

/** A light pencil sketch where content will go. */
export function Skeleton({ className = "", style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      aria-hidden
      data-paper-motion
      className={`rounded-[2px] ${className}`}
      style={{
        background:
          "repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ink) 16%, transparent) 0 1px, transparent 1px 6px) 0 0 / 24px 24px",
        boxShadow: "inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent)",
        animation: "paper-sketch 1.4s linear infinite",
        ...style,
      }}
      {...props}
    />
  );
}