Presentational components for black-box system design — blocks, ports, edges.
bbox-ui is a set of presentational React components for drawing black-box systems: blocks with a header, glyph, title and chip; ports that carry a state and a label; and the geometry that places one on the other.
The components know nothing about canvases. They do not listen for pointers,
never measure themselves, and never claim a z-index — they take props and return
DOM. That is what lets the same Block paint identically inside React Flow,
inside tldraw, or in a plain page, with each host owning its own dragging,
snapping and hit-testing.
You copy the source into your project. There is no package to install.
npx shadcn@latest add https://bbox-ui.com/r/port.jsonThat writes the real files into your tree, and from then on they are yours — edit them, rename them, delete half of them. No version to track, no dependency to upgrade, nothing that can change under you.
This is deliberate, and it is the only distribution channel. bbox-ui is not
published to npm. If you are looking for npm install bbox-ui, there isn't
one and there won't be. The components are small and opinionated; owning them
outright beats depending on someone else's taste.
The same command works straight off GitHub if you would rather skip this site:
npx shadcn@latest add zacharyyamaoka/bbox-ui/port| Item | What it is |
|---|---|
port | A circle with a text slot. Four states, six text layouts, three diameters. |
block | The Block in Simple View — container, header band, glyph, text slots, chip. |
bbox-layout | The pure geometry module. No React, no canvas engine. |
The two host adapters — block-node-reactflow and block-shape-tldraw — are in
the registry but not yet installable, because they import the shared core as
a package rather than as copied files. Use them as reference for now.
Start with Port — it is the smaller of the two and the conventions it establishes carry into Block.