A bento scaffold rather than a finished bento: nine slots in the scattered arrangement an integration diagram wants, with one emphasised centre, and a `slots` prop keyed 1 to 9 for what goes in them. Anything left out draws itself as a dashed placeholder over a dots or hatch texture, so the layout is legible before there is any content, which is the point of shipping the frame apart from what fills it. A filled slot is a card and an empty one is the outline of where a card will go, so only the empty state is dashed and translucent. The grid flows dense, so a slot spanning two columns does not leave the hole before it empty, since the scatter is the layout rather than a side effect of it. Both textures are painted in `--border` rather than a fixed grey, so they track the same token as the dashed edge around them and invert with the host instead of smearing light grey across a dark card. The grid itself is headless, with no section, no heading and no background, so it drops straight into a hero. No dependencies and no client hooks.
pnpm dlx shadcn@latest add "https://ui.d2studio.dev/r/diagram-grid.json"