An interactive isometric line drawing of a garment rail with seven bare hangers that rock away from the pointer, the nearest one most, and settle back when the pointer leaves.
import type { CSSProperties } from "react";
import Rail from "@/components/ui/rail";
/**
* Maps hairline's palette to the host theme's shadcn tokens, following the
* same mapping the source repo ships for its own shadcn-themed consumers
* (registry/src/hairline.tsx), so the figure tracks light/dark instead of
* its library-default 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 RailDemo() {
return (
<div className="flex w-full items-center justify-center bg-background p-10">
<div className="w-full max-w-sm overflow-hidden rounded-xl border border-border bg-background shadow-sm">
<Rail style={tokens} className="p-6" />
</div>
</div>
);
}