Components

Skeleton

Beta

Loading placeholders with seamless shimmer, pulse, and static variants. Match their dimensions to the incoming content.

Shimmer

Pulse

Static

Composition

Loading placeholder

<Skeleton />

Installation

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/skeleton.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/skeleton.json

See registry manifest

Dependencies

Effectssrc/registry/sources/control-ui/effects.cssSupport

Raw code

Primary installed source

src/registry/sources/control-ui/ui/skeleton.tsx

import type { ComponentProps, CSSProperties } from "react";

import type { SkeletonKnobStyle } from "@/components/control-ui/knob-contracts/skeleton-knobs";

export const skeletonVariants = ["shimmer", "pulse", "none"] as const;

export type SkeletonVariant = (typeof skeletonVariants)[number];

export type SkeletonProps = Omit<ComponentProps<"div">, "style"> & {

style?: CSSProperties & SkeletonKnobStyle;

variant?: SkeletonVariant;

};

export function Skeleton({ variant = "shimmer", className, ...props }: SkeletonProps) {

return (

<div

aria-hidden="true"

data-control-ui="skeleton"

data-control-family="skeleton"

data-slot="root"

data-variant={variant}

className={className}

{...props}

/>

);

}

Knobs

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-skeleton-* · 7 knobsHow the cascade resolves

--cui-skeleton-radius<length-percentage>var(--radius-control)

--cui-skeleton-background<color>var(--muted)

--cui-skeleton-background-image*none

--cui-skeleton-highlight-background<color>oklch(from var(--foreground) l c h / 0.06)

--cui-skeleton-animation-duration<time>calc(var(--duration-slow) * 5)

--cui-skeleton-easing*var(--ease-standard)

--cui-skeleton-pulse-opacity<number>0.5