---
name: "@d2"
slug: "d2"
description: "Ultra modern monospace component library for React and Tailwind CSS v4 — AI cards, bento grids, dashboards, hero sections and animated pixel spinners."
category: "Animated components"
tags: ["ai", "animation", "blocks", "buttons", "cards", "dashboard", "design-system", "forms", "loaders", "overlays", "pro-available", "retro"]
framework: "react"
license: "MIT"
author: "rajaaltus"
website: "https://ui.d2studio.dev"
github: "https://github.com/rajaaltus/d2studio-ui"
registry: "https://ui.d2studio.dev/r/registry.json"
pro: true
pro_url: "https://pro.d2studio.dev/blocks?utm_source=ui.d2studio.dev&utm_medium=nav&utm_campaign=pro-showcase"
github_stars: 4
component_count: 40
generated_at: "2026-09-21T01:50:16.753Z"
---

# @d2

Ultra modern monospace component library for React and Tailwind CSS v4 — AI cards, bento grids, dashboards, hero sections and animated pixel spinners.

## Links

- Website: https://ui.d2studio.dev
- GitHub: https://github.com/rajaaltus/d2studio-ui
- Registry JSON: https://ui.d2studio.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/d2
- This file: https://sh4dcn.vercel.app/md/d2.md
- Pro / pricing: https://pro.d2studio.dev/blocks?utm_source=ui.d2studio.dev&utm_medium=nav&utm_campaign=pro-showcase

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.d2studio.dev/r/registry.json
pnpm dlx shadcn@latest add https://ui.d2studio.dev/r/registry.json
bunx shadcn@latest add https://ui.d2studio.dev/r/registry.json
# clone the source repo
git clone https://github.com/rajaaltus/d2studio-ui.git
# fetch the raw registry index
curl -s https://ui.d2studio.dev/r/registry.json
```

## Components (40)

| name | type | description | install |
| --- | --- | --- | --- |
| ai-block | registry:ui | AI prompt template grid with creative prompts, summarizer, story, poetry and study presets. | `npx shadcn@latest add https://ui.d2studio.dev/r/ai-block.json` |
| ai-content-creator-card-v2 | registry:ui | Glassmorphic AI content generator card with content type and tone pickers and a prompt field. | `npx shadcn@latest add https://ui.d2studio.dev/r/ai-content-creator-card-v2.json` |
| ai-content-creator-card | registry:ui | Pro version content creation card | `npx shadcn@latest add https://ui.d2studio.dev/r/ai-content-creator-card.json` |
| dashboard-01 | registry:ui | Hotel booking dashboard with guest and vacancy stats, booking search and a check-in and check-out table. | `npx shadcn@latest add https://ui.d2studio.dev/r/dashboard-01.json` |
| bento-01 | registry:ui | Bento grid for an education program platform with admin overview, faculty view and a program form. | `npx shadcn@latest add https://ui.d2studio.dev/r/bento-01.json` |
| ai-v2 | registry:ui | Tabbed AI prompt input with assistant, blog and pro modes plus file upload. | `npx shadcn@latest add https://ui.d2studio.dev/r/ai-v2.json` |
| hero-01 | registry:ui | Startup mentorship landing hero with a headline, call to action and mentor avatar group. | `npx shadcn@latest add https://ui.d2studio.dev/r/hero-01.json` |
| input | registry:ui | Displays a form input field or a component that looks like an input field. | `npx shadcn@latest add https://ui.d2studio.dev/r/input.json` |
| label | registry:ui | Renders an accessible label associated with controls. | `npx shadcn@latest add https://ui.d2studio.dev/r/label.json` |
| card | registry:ui | Displays a card with header, content, and footer. | `npx shadcn@latest add https://ui.d2studio.dev/r/card.json` |
| select | registry:ui | Displays a list of options for the user to pick from—triggered by a button. | `npx shadcn@latest add https://ui.d2studio.dev/r/select.json` |
| checkbox | registry:ui | A control that allows the user to toggle between checked and not checked. | `npx shadcn@latest add https://ui.d2studio.dev/r/checkbox.json` |
| progress | registry:ui | Displays an indicator showing the completion progress of a task. | `npx shadcn@latest add https://ui.d2studio.dev/r/progress.json` |
| alert | registry:ui | Displays a callout for user attention. | `npx shadcn@latest add https://ui.d2studio.dev/r/alert.json` |
| drawer | registry:ui | A drawer component that slides in from the bottom or sides of the screen. | `npx shadcn@latest add https://ui.d2studio.dev/r/drawer.json` |
| pricing-01 | registry:component | Responsive three-tier pricing cards with feature comparison and popular plan highlighting | `npx shadcn@latest add https://ui.d2studio.dev/r/pricing-01.json` |
| hero-section-01 | registry:component | Premium landing page hero with a serif accent headline, badge and mentor avatar group. | `npx shadcn@latest add https://ui.d2studio.dev/r/hero-section-01.json` |
| hero-section-02 | registry:component | Modern landing page hero section with badge, headline and avatar social proof. | `npx shadcn@latest add https://ui.d2studio.dev/r/hero-section-02.json` |
| ai-writing-assistance | registry:component | AI writing assistant panel with assistant, blog and pro modes and a prompt field. | `npx shadcn@latest add https://ui.d2studio.dev/r/ai-writing-assistance.json` |
| block-01 | registry:component | AI feature showcase with smart summarizer, creative prompts, document analysis and engagement metrics cards. | `npx shadcn@latest add https://ui.d2studio.dev/r/block-01.json` |
| notification-bento | registry:component | A four-panel notification bento: a pure-CSS metallic bell on a lit dot-matrix field, recent activity feed, unread counter and delivery-channel toggles, with dr… | `npx shadcn@latest add https://ui.d2studio.dev/r/notification-bento.json` |
| bento-02 | registry:component | A five-card feature bento with metallic-gradient glyphs on lifting icon tiles, a dot-matrix texture and color-dodged glow revealed on hover, and a holographic … | `npx shadcn@latest add https://ui.d2studio.dev/r/bento-02.json` |
| bento-03 | registry:component | A flat 3×2 feature grid on thin edge-masked rules — no cards, no fills. Each cell pairs a recessed keycap icon tile with a sans-serif title and monospace descr… | `npx shadcn@latest add https://ui.d2studio.dev/r/bento-03.json` |
| bento-04 | registry:component | A four-card services bento on marching dashed blueprint frames. Hover blooms each card's icon from blue to the D2 holographic gradient, scrambles the Clean Cod… | `npx shadcn@latest add https://ui.d2studio.dev/r/bento-04.json` |
| bento-05 | registry:component | A four-card studio bento on a masked dot field. Each card is a Figma gradient export carrying its own glass fill and 16px border; an ambilight sampled from the… | `npx shadcn@latest add https://ui.d2studio.dev/r/bento-05.json` |
| metallic-shimmer | registry:component | Brushed-metal text: a bright band travels across the glyphs like a reflection, not a glow. Wraps any inline content, flips its stops per theme, and holds still… | `npx shadcn@latest add https://ui.d2studio.dev/r/metallic-shimmer.json` |
| progress-bar | registry:component | A frosted-glass progress pill with technical-drawing leader lines bracketing a monospace readout. Three levels of chrome — full, bar, plain — and two fill styl… | `npx shadcn@latest add https://ui.d2studio.dev/r/progress-bar.json` |
| button-matt | registry:component | A matte chip button with a holographic rim: three blurred glows pinned under the top edge, a bounce light along the bottom, and a gradient-clipped label and ma… | `npx shadcn@latest add https://ui.d2studio.dev/r/button-matt.json` |
| d2-card | registry:ui | The card surface pricing-01 is built on: header, content, footer and a title/description pair. | `npx shadcn@latest add https://ui.d2studio.dev/r/d2-card.json` |
| pixel-spinner | registry:ui | The pixel-grid spinner engine every spinner preset builds on. | `npx shadcn@latest add https://ui.d2studio.dev/r/pixel-spinner.json` |
| spinner-spiral-in-5 | registry:component | A 5×5 pixel-grid loading spinner: 25 frames at 75ms (1875ms loop). | `npx shadcn@latest add https://ui.d2studio.dev/r/spinner-spiral-in-5.json` |
| spinner-ring-4-cw | registry:component | A 4×4 pixel-grid loading spinner: 12 frames at 110ms (1320ms loop). | `npx shadcn@latest add https://ui.d2studio.dev/r/spinner-ring-4-cw.json` |
| spinner-dual-ring-5 | registry:component | A 5×5 pixel-grid loading spinner: 16 frames at 110ms (1760ms loop). | `npx shadcn@latest add https://ui.d2studio.dev/r/spinner-dual-ring-5.json` |
| spinner-vortex-in | registry:component | A 4×4 pixel-grid loading spinner: 16 frames at 90ms (1440ms loop). | `npx shadcn@latest add https://ui.d2studio.dev/r/spinner-vortex-in.json` |
| spinner-col-wave-5 | registry:component | A 5×5 pixel-grid loading spinner: 8 frames at 120ms (960ms loop). | `npx shadcn@latest add https://ui.d2studio.dev/r/spinner-col-wave-5.json` |
| spinner-swell-roll | registry:component | A 4×4 pixel-grid loading spinner: 4 frames at 160ms (640ms loop). | `npx shadcn@latest add https://ui.d2studio.dev/r/spinner-swell-roll.json` |
| spinner-rain-4 | registry:component | A 4×4 pixel-grid loading spinner: 4 frames at 180ms (720ms loop). | `npx shadcn@latest add https://ui.d2studio.dev/r/spinner-rain-4.json` |
| spinner-tide-roll | registry:component | A 4×4 pixel-grid loading spinner: 6 frames at 180ms (1080ms loop). | `npx shadcn@latest add https://ui.d2studio.dev/r/spinner-tide-roll.json` |
| spinner-billboard-tiles | registry:component | A 4×4 pixel-grid loading spinner: 5 frames at 180ms (900ms loop). | `npx shadcn@latest add https://ui.d2studio.dev/r/spinner-billboard-tiles.json` |
| spinner-ripple-out | registry:component | A 3×3 pixel-grid loading spinner: 3 frames at 260ms (780ms loop). | `npx shadcn@latest add https://ui.d2studio.dev/r/spinner-ripple-out.json` |

## For AI agents

```text
You are adding components from @d2 to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/d2.md) for the component list.
2. Fetch the machine-readable index: https://ui.d2studio.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: d2).
```