About
An isometric SVG illustration of a 24-port network patch panel whose cables lift and lean away from a hovered or focused port, with neighbouring ports easing back on springs the farther they are from the pointer.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Patch Panel to your project and fits it to your theme.
Code
How Patch Panel is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import Patch from "@/components/ui/patch";
export default function PatchDemo() {
return (
<div className="flex min-h-[480px] w-full items-center justify-center bg-background p-8">
<div className="w-full max-w-xl rounded-2xl border border-border bg-card p-6">
<Patch aria-label="A patch panel of twenty-four ports: the cable under the pointer lifts, and its neighbours lean away, less the further away." />
</div>
</div>
);
}
More by lucasmarkes
View all
Hairline Riffle
126
Hairline Terrain
60
Padlock
51
Hairline Terminal
47
Isometric Elevator
44
Hairline Slow
44
Hairline Turntable
38
Hairline Sieve
32