Skip to Content
Get full access

Color Field Skeleton

Loading skeleton placeholder: pulsing bars on a Rothko color field that wait in grisaille and glaze the palette color in when switched to colored. Adjust the line count; the pulse is opacity only.

pnpm dlx shadcn add @01orbital/color-field-skeleton

Usage

"use client"

import { useEffect, useState } from "react"

import { ColorFieldSkeleton } from "@/components/color-field-skeleton/color-field-skeleton"

const PALETTES = {
  poppy: {
    ground: "oklch(0.436 0.110 259.5)",
    upper:
      "radial-gradient(ellipse 130% 100% at 50% 35%, oklch(0.627 0.214 26.0) 0%, oklch(0.627 0.214 26.0 / 0.7) 52%, transparent 100%)",
    lower:
      "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.477 0.080 189.0) 0%, oklch(0.452 0.075 207.5 / 0.75) 56%, transparent 100%)",
    glow: "oklch(0.668 0.220 29.3)",
    form: "strong",
  },
} as const

export default function ColorFieldSkeletonDemo() {
  const [colored, setColored] = useState(false)

  useEffect(() => {
    const tick = setInterval(() => setColored((c) => !c), 2800)
    return () => clearInterval(tick)
  }, [])

  return (
    <div className="w-72">
      <ColorFieldSkeleton
        palette={PALETTES["poppy"]}
        lines={4}
        colored={colored}
      />
    </div>
  )
}

API reference

A skeleton of pulsing bars on a Rothko-style ground, shown while content loads. It waits in gray and glazes the palette's color in over 1.2s when colored turns true.

Exposes role="status" with the label "Loading content"; pass aria-label to change it. The pulse changes opacity only.

Prop

Type

It also accepts the HTML attributes of the element it renders.

Dependencies

npm: cn. The CLI installs them for you.

No other registry pieces.