Ship interfaces that look designed, not assembled.
Blocks, components, illustrations, backgrounds, spinners and whole page templates for React, Tailwind and shadcn. Install from one registry, own the source, and keep every item added after.
Early bird $20, one payment. Regular price $200.
Built on the stack you already use
Pixel grid loaders, one engine, a hundred frame tables.
A grid of cells, a list of which cells light on each step, and a four step fade that turns the steps into a trail. Install one from the CLI, or install the engine and draw your own.
Welcome to the D2 agent
/help for help, /status for setup
cwd: ~/projects/d2-spinners
> add a triangle cell shape to the spinner engine
I'll add the clip-path to SHAPE_STYLE and wire the shape through the union.
npx shadcn@latest add @d2/pixel-spinnerUsage
import { PixelSpinner } from "@/components/ui/pixel-spinner"; // Cells are indexed row-major from 0. Each frame lists the cells that light on// that step, and a lit cell fades over the next three. That is the trail.const pattern = { rows: 4, cols: 4, interval: 130, frames: [ [1, 5, 6, 7, 8, 9, 10, 14], [2, 4, 5, 6, 9, 10, 11, 13], [0, 3, 5, 6, 9, 10, 12, 15], ],}; export function Pending() { return <PixelSpinner pattern={pattern} cellSize={4} gap={2} />;}Manual setup
- 1Copy components/ui/pixel-spinner.tsx into your own components/ui/.
- 2Copy components/ui/pixel-spinner.css next to it - the component imports it directly.
- 3Render <PixelSpinner pattern={…} /> with the frames of whichever spinner you want.
A design system your agent already knows how to use.
The blocks are only half of it. The other half is everything that makes them land in your repo correctly the first time.
Pay once. Keep it, and everything added after.
No seats, no renewal, no expiring licence. The source lands in your repo and stays there whatever happens to this site.
- Every pro spinner, block and illustration, now and later
- New components and blocks added every week
- Full source in your repo, with no runtime to carry
- One licence key for the shadcn CLI
- The same key works from your agent over MCP
The library you buy is smaller than the one you end up with.
New components, application surfaces and marketing blocks land every week. They arrive in the same registry under the same licence key, so keeping up is one CLI command and never a second purchase.
Tweak it in the browser, install what you tweaked.
- Turn it before you take itComponents with a playground let you set the size, the icon and the state on the page, and hand you the install line for exactly that.
- Written to be editedNo config object, no theme provider, no wrapper you have to learn. The source lands in your repo as ordinary components you can change.
- Customisation supportNeed a block reshaped for your product? Ask, and it comes back as a variant in the registry under your licence key.
npx shadcn@latest add @d2/button-quartz<QuartzButton size="lg" icon={<BoxAdd />}> Add package</QuartzButton>The things people ask before they buy.
If yours is not here, either of the accounts in the footer will answer it.
Is it really one payment?
Yes. One charge, no seats, no renewal and no expiring licence. The source lands in your repo the moment you install it and stays there whatever happens to this site.
What is free, and what needs a licence key?
Free items install with no key at all. Pro items are marked wherever they are drawn, and one key opens every one of them, including the ones that land after you buy.
How do I install a pro item?
Add the @d2 registry to your components.json, put your key in .env.local as D2_TOKEN, then run npx shadcn@latest add @d2/spinner-pro-9. The dashboard prints all three steps with your own key already filled in.
Is there a runtime or a dependency to carry?
No. The CLI writes ordinary React and Tailwind files into your project. Nothing named D2 appears in your dependencies, there is no provider to mount and no config to keep in step. Change the files like any others, because after the install they are yours.
Can my coding agent install from it?
Yes, through shadcn's own MCP server. Point Claude Code, Cursor or VS Code at it once with the same key and then ask in English: “Add the bento-05 block from @d2 to this project.” The dashboard carries the config for each client.
I paid. Where is my key?
In your dashboard the moment Stripe confirms the payment, under Settings. That panel can also regenerate it, which revokes the old key and issues the new one in the same step, so a key you pasted somewhere public is a one click fix.
Stop rebuilding the same hero for the fourth time.
One payment, every pro item, and everything added after it. Twenty dollars while the early bird window is open.
