Hairline Rail

Component 18

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hairline Rail to your project and fits it to your theme.

Code

How Hairline Rail is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}