Hairline Cabinet

Component 10

About

An isometric SVG server rack of twelve 1U blades that slide out along their rails toward the pointer's height, each on its own spring, with a lit status lamp on the active blade.

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

Code

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

Usage.tsx

"use client";

import Cabinet from "@/components/ui/cabinet";

export default function CabinetDemo() {
  return (
    <div className="w-full h-screen bg-background">
      <Cabinet
        className="w-full h-full"
        style={{ aspectRatio: "auto" }}
        aria-label="A rack of twelve blades: the pointer's height pulls the nearest ones out on their rails, the farther the less."
      />
    </div>
  );
}