Rebuild

Component 3

About

An interactive isometric illustration of a monorepo dependency tree where hovering a package tile raises it and every package that depends on it rises after it along the links.

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

Code

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

Usage.tsx

import Rebuild from "@/components/ui/rebuild";

export default function RebuildDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-10">
      <Rebuild
        className="w-full max-w-sm"
        aria-label="A tree of package tiles: the one touched rises, and every package that depends on it rises after it along the links."
      />
    </div>
  );
}