D2 Studio

Overview

D2 Studio is a monospace-styled React component library built with shadcn/ui, Tailwind CSS and TypeScript, aimed at modern SaaS interfaces. The site splits its catalog into blocks, components, illustrations, templates and spinners, and says new blocks and tools are added every weekend. A separate Pro site offers additional resources.

The registry holds 101 items, including AI cards, bento grids, a dashboard, hero sections, pricing and ecommerce cards, a full set of shadcn-style primitives and a large family of pixel-grid spinners. The spinners can be tuned live on the site for cell size, gap and speed before copying the snippet.

Features

• AI blocks: AI content creator cards, an AI writing assistant block and a notification bento.
• Bento grids: Five bento layouts for feature and dashboard sections.
• Marketing blocks: Hero sections, a pricing block and an ecommerce card.
• Dashboard: A dashboard block and a GitHub repos component.
• Pixel spinners: Pixel-grid loaders with glow, gradients and shimmer, offered free.
• Visual effects: Metallic shimmer, a matte button, power and raw chips, and moon tiles.
• Primitives: Accordion through tooltip, plus chat items such as message, bubble and message scroller.

Tech stack

• React, TypeScript
• shadcn/ui, Radix UI
• Tailwind CSS v4
• Motion, GSAP, Recharts, cobe

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @d2/component-name