---
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", "auth", "blocks", "buttons", "cards", "charts", "dashboard", "design-system", "e-commerce", "forms", "hooks", "loaders", "media", "mobile", "navigation", "overlays", "pro-available", "retro", "tables"]
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: 6
component_count: 101
generated_at: "2026-10-27T06:34:08.542Z"
---

# @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.netlify.app/registry/d2
- This file: https://sh4dcn.netlify.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 (101)

| 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` |
| github-repos | registry:component | A responsive grid of GitHub repositories with language, stars and forks — pass your own list or leave the sample rows in. | `npx shadcn@latest add https://ui.d2studio.dev/r/github-repos.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` |
| card-ecommerce-01 | registry:component | E-commerce product card on the D2 card primitive: colour swatches that cross-fade the photo, a wishlist heart that swaps with a blur, a derived sale badge and … | `npx shadcn@latest add https://ui.d2studio.dev/r/card-ecommerce-01.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` |
| accordion | registry:ui | A vertically stacked set of interactive headings that each reveal a section of content. | `npx shadcn@latest add https://ui.d2studio.dev/r/accordion.json` |
| alert | registry:ui | Displays a callout for user attention. | `npx shadcn@latest add https://ui.d2studio.dev/r/alert.json` |
| alert-dialog | registry:ui | A modal dialog that interrupts the user with important content and expects a response. | `npx shadcn@latest add https://ui.d2studio.dev/r/alert-dialog.json` |
| aspect-ratio | registry:ui | Displays content within a desired ratio. | `npx shadcn@latest add https://ui.d2studio.dev/r/aspect-ratio.json` |
| attachment | registry:ui | A file attachment chip with a preview, name, size and a remove action. | `npx shadcn@latest add https://ui.d2studio.dev/r/attachment.json` |
| avatar | registry:ui | An image element with a fallback for representing the user. | `npx shadcn@latest add https://ui.d2studio.dev/r/avatar.json` |
| badge | registry:ui | Displays a badge or a component that looks like a badge. | `npx shadcn@latest add https://ui.d2studio.dev/r/badge.json` |
| breadcrumb | registry:ui | Displays the path to the current resource using a hierarchy of links. | `npx shadcn@latest add https://ui.d2studio.dev/r/breadcrumb.json` |
| bubble | registry:ui | A chat message bubble that aligns and colours itself by sender. | `npx shadcn@latest add https://ui.d2studio.dev/r/bubble.json` |
| button | registry:ui | Displays a button or a component that looks like a button. | `npx shadcn@latest add https://ui.d2studio.dev/r/button.json` |
| button-group | registry:ui | A container that groups related buttons together with consistent styling. | `npx shadcn@latest add https://ui.d2studio.dev/r/button-group.json` |
| calendar | registry:ui | A date field component that allows users to enter and edit a date. | `npx shadcn@latest add https://ui.d2studio.dev/r/calendar.json` |
| card | registry:ui | Displays a card with header, content, and footer. | `npx shadcn@latest add https://ui.d2studio.dev/r/card.json` |
| carousel | registry:ui | A carousel with motion and swipe built using Embla. | `npx shadcn@latest add https://ui.d2studio.dev/r/carousel.json` |
| chart | registry:ui | Beautiful charts built using Recharts, themed from CSS variables. | `npx shadcn@latest add https://ui.d2studio.dev/r/chart.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` |
| collapsible | registry:ui | An interactive component which expands and collapses a panel. | `npx shadcn@latest add https://ui.d2studio.dev/r/collapsible.json` |
| combobox | registry:ui | Autocomplete input and command palette with a list of suggestions. | `npx shadcn@latest add https://ui.d2studio.dev/r/combobox.json` |
| command | registry:ui | Fast, composable, unstyled command menu for React. | `npx shadcn@latest add https://ui.d2studio.dev/r/command.json` |
| context-menu | registry:ui | Displays a menu to the user, such as a set of actions or functions, triggered by a right click. | `npx shadcn@latest add https://ui.d2studio.dev/r/context-menu.json` |
| dialog | registry:ui | A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. | `npx shadcn@latest add https://ui.d2studio.dev/r/dialog.json` |
| direction | registry:ui | A provider that sets the reading direction, left-to-right or right-to-left, for the components beneath it. | `npx shadcn@latest add https://ui.d2studio.dev/r/direction.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` |
| dropdown-menu | registry:ui | Displays a menu to the user, such as a set of actions or functions, triggered by a button. | `npx shadcn@latest add https://ui.d2studio.dev/r/dropdown-menu.json` |
| empty | registry:ui | Use the Empty component to display an empty state. | `npx shadcn@latest add https://ui.d2studio.dev/r/empty.json` |
| field | registry:ui | Combine labels, controls, and help text to compose accessible form fields and grouped inputs. | `npx shadcn@latest add https://ui.d2studio.dev/r/field.json` |
| form | registry:ui | Building forms with React Hook Form and Zod. | `npx shadcn@latest add https://ui.d2studio.dev/r/form.json` |
| hover-card | registry:ui | For sighted users to preview content available behind a link. | `npx shadcn@latest add https://ui.d2studio.dev/r/hover-card.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` |
| input-group | registry:ui | Add addons, buttons and helper content to inputs. | `npx shadcn@latest add https://ui.d2studio.dev/r/input-group.json` |
| input-otp | registry:ui | Accessible one-time password component with copy paste functionality. | `npx shadcn@latest add https://ui.d2studio.dev/r/input-otp.json` |
| item | registry:ui | A versatile component to display any content: media, title, description and actions. | `npx shadcn@latest add https://ui.d2studio.dev/r/item.json` |
| kbd | registry:ui | Used to display textual user input from a keyboard. | `npx shadcn@latest add https://ui.d2studio.dev/r/kbd.json` |
| label | registry:ui | Renders an accessible label associated with controls. | `npx shadcn@latest add https://ui.d2studio.dev/r/label.json` |
| marker | registry:ui | A small inline marker for flagging state, such as unread, new or pinned. | `npx shadcn@latest add https://ui.d2studio.dev/r/marker.json` |
| menubar | registry:ui | A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands. | `npx shadcn@latest add https://ui.d2studio.dev/r/menubar.json` |
| message | registry:ui | A chat message row: avatar, author, timestamp and content. | `npx shadcn@latest add https://ui.d2studio.dev/r/message.json` |
| message-scroller | registry:ui | A chat transcript scroller that sticks to the newest message and offers a jump-to-latest button. | `npx shadcn@latest add https://ui.d2studio.dev/r/message-scroller.json` |
| native-select | registry:ui | A styled native HTML select element with consistent design system integration. | `npx shadcn@latest add https://ui.d2studio.dev/r/native-select.json` |
| navigation-menu | registry:ui | A collection of links for navigating websites. | `npx shadcn@latest add https://ui.d2studio.dev/r/navigation-menu.json` |
| pagination | registry:ui | Pagination with page navigation, next and previous links. | `npx shadcn@latest add https://ui.d2studio.dev/r/pagination.json` |
| popover | registry:ui | Displays rich content in a portal, triggered by a button. | `npx shadcn@latest add https://ui.d2studio.dev/r/popover.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` |
| radio-group | registry:ui | A set of checkable buttons, known as radio buttons, where no more than one can be checked at a time. | `npx shadcn@latest add https://ui.d2studio.dev/r/radio-group.json` |
| resizable | registry:ui | Accessible resizable panel groups and layouts with keyboard support. | `npx shadcn@latest add https://ui.d2studio.dev/r/resizable.json` |
| scroll-area | registry:ui | Augments native scroll functionality for custom, cross-browser styling. | `npx shadcn@latest add https://ui.d2studio.dev/r/scroll-area.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` |
| separator | registry:ui | Visually or semantically separates content. | `npx shadcn@latest add https://ui.d2studio.dev/r/separator.json` |
| sheet | registry:ui | Extends the Dialog component to display content that complements the main content of the screen. | `npx shadcn@latest add https://ui.d2studio.dev/r/sheet.json` |
| sidebar | registry:ui | A composable, themeable and customizable sidebar component. | `npx shadcn@latest add https://ui.d2studio.dev/r/sidebar.json` |
| skeleton | registry:ui | Use to show a placeholder while content is loading. | `npx shadcn@latest add https://ui.d2studio.dev/r/skeleton.json` |
| slider | registry:ui | An input where the user selects a value from within a given range. | `npx shadcn@latest add https://ui.d2studio.dev/r/slider.json` |
| sonner | registry:ui | An opinionated toast component for React. | `npx shadcn@latest add https://ui.d2studio.dev/r/sonner.json` |
| spinner | registry:ui | An indicator that can be used to show a loading state. | `npx shadcn@latest add https://ui.d2studio.dev/r/spinner.json` |
| switch | registry:ui | A control that allows the user to toggle between checked and not checked. | `npx shadcn@latest add https://ui.d2studio.dev/r/switch.json` |
| table | registry:ui | A responsive table component. | `npx shadcn@latest add https://ui.d2studio.dev/r/table.json` |
| tabs | registry:ui | A set of layered sections of content, known as tab panels, that are displayed one at a time. | `npx shadcn@latest add https://ui.d2studio.dev/r/tabs.json` |
| textarea | registry:ui | Displays a form textarea or a component that looks like a textarea. | `npx shadcn@latest add https://ui.d2studio.dev/r/textarea.json` |
| toggle | registry:ui | A two-state button that can be either on or off. | `npx shadcn@latest add https://ui.d2studio.dev/r/toggle.json` |
| toggle-group | registry:ui | A set of two-state buttons that can be toggled on or off. | `npx shadcn@latest add https://ui.d2studio.dev/r/toggle-group.json` |
| tooltip | registry:ui | A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. | `npx shadcn@latest add https://ui.d2studio.dev/r/tooltip.json` |
| use-mobile | registry:hook | A hook that reports whether the viewport is below the mobile breakpoint. | `npx shadcn@latest add https://ui.d2studio.dev/r/use-mobile.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` |
| power-chip | registry:component | An animated SVG illustration: a RAW chip charges and sends power along six wires to the tiles around it. Plain SVG and CSS, light and dark. | `npx shadcn@latest add https://ui.d2studio.dev/r/power-chip.json` |
| raw-chip | registry:component | The RAW chip from Power Chip on its own: a static SVG illustration with no dependencies. | `npx shadcn@latest add https://ui.d2studio.dev/r/raw-chip.json` |
| moon-tile-01 | registry:component | A night tile: a crescent moon rises over a bank of clouds, then the clouds sway in parallax while a sparkle twinkles and two stars blink. Plays twice once it s… | `npx shadcn@latest add https://ui.d2studio.dev/r/moon-tile-01.json` |
| moon-tile-02 | registry:component | A night window: a pale moon rises from behind dark hills in a round pane of stars, then the hills roll like a swell, the stars twinkle in three sets and the ha… | `npx shadcn@latest add https://ui.d2studio.dev/r/moon-tile-02.json` |
| moon-tile-03 | registry:component | A tipped night card on dashed layout guides: a crescent moon rises from behind a bank of clouds, then a small cloud drifts across it while the banks sway in pa… | `npx shadcn@latest add https://ui.d2studio.dev/r/moon-tile-03.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.netlify.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.netlify.app/json (library slug: d2).
```