An isometric bank of twelve wall lockers where the door under the pointer swings open and the previously open one swings shut, used as an animated hero or empty-state illustration.
"use client";
import type { CSSProperties } from "react";
import HairlineLockers from "@/components/ui/hairline-lockers";
/* Hairline's palette, mapped to the host's shadcn tokens -- the pairing the
author ships for shadcn apps (see @lucasmarkes/hairline's shadcn registry
wrapper, registry/src/hairline.tsx), so the figure follows the page's
theme instead of its own built-in light/dark palette. */
const tokens = {
"--hairline-plate": "var(--background)",
"--hairline-hi": "var(--foreground)",
"--hairline-edge": "var(--muted-foreground)",
"--hairline-mid": "color-mix(in oklab, var(--muted-foreground) 55%, var(--background))",
"--hairline-lo": "var(--border)",
} as CSSProperties;
export default function HairlineLockersDemo() {
return (
<div className="flex h-full w-full items-center justify-center bg-background p-10">
<HairlineLockers aria-label="Twelve lockers" style={{ ...tokens, width: "100%", maxWidth: 420 }} />
</div>
);
}