Skip to content

Skeleton

Proposed

The shape of what is coming, in the fill colour, pulsing. Match the real layout so nothing jumps when it lands.

@varick/ui/components/skeletonAdded 2 Sept 2026

Usage

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

export function KpiSkeleton() {
  return (
    <div className="kpi">
      <Skeleton className="size-8" />
      <Skeleton className="h-3 w-24" />
      <Skeleton className="h-6 w-32" />
    </div>
  );
}

API reference

Every component also accepts className and the native props of its root element.

PropTypeDefaultDescription
classNamestringrequiredWidth, height and radius. The component brings colour and motion.

Accessibility

  • aria-hidden. Put aria-busy on the region that is loading instead.

Styles

Proposed CSS in Varick tokens. Nothing in the app renders this yet.

.skeleton {
  background: var(--fill);
  border-radius: 4px;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse { 50% { opacity: 0.5; } }