Diagram Grid
- from @d2
- by D2 Studio
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.
Install
New to shadcn? Set up your project
If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.
pnpm dlx shadcn@latest initpnpm dlx shadcn@latest add @d2/diagram-gridLive preview
No live preview has been built for this component yet.
Registry dependencies0
The CLI adds no other registry items with this one.
Packages0
No npm packages are installed with it.
