Skeleton

PrimitivesFree

Muted placeholder with the house shimmer. Deterministic widths only.

Install

npx shadcn@latest add https://labs.duku.design/r/skeleton.json

Ask your agent to use this

Connect DUKU Labs to MCP, then hand your coding agent this prompt:

Use the DUKU Labs MCP server to install the Skeleton component (get_component "skeleton", then its install command). Adapt it to my existing design tokens, preserve all accessibility and reduced-motion behavior, and keep every interaction state working.

Interaction

Try	What happens
Observe	Gradient sweeps left→right every 1.6s (CSS keyframes, not JS)

Props

Prop	Type	Default	Description
className	string	—	Size it with utility classes.

Source — registry/default/ui/skeleton.tsx

import * as React from "react";
import { cn } from "@/lib/utils";

export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  ref?: React.Ref<HTMLDivElement>;
}

/**
 * Loading placeholder with the house shimmer. Widths must be deterministic
 * (className / style) — never Math.random in render (SSR hydration safety).
 */
export function Skeleton({ className, ref, ...rest }: SkeletonProps) {
  return (
    <div
      ref={ref}
      data-slot="skeleton"
      aria-hidden="true"
      className={cn(
        "relative overflow-hidden rounded-md bg-muted",
        className
      )}
      {...rest}
    >
      <span className="absolute inset-0 animate-[duku-shimmer_1.6s_linear_infinite] bg-gradient-to-r from-transparent via-foreground/[0.06] to-transparent" />
    </div>
  );
}