Documentation

D2 Studio

D2 Studio is a collection of copy-and-paste React components, blocks, and utilities built with shadcn/ui, Tailwind CSS, and TypeScript. Everything is open source, accessible, and designed to be production-ready.

Installation

Pull any component into your project using the shadcn CLI. Make sure you have the CLI initialized first.

pnpm dlx shadcn@latest add @d2studio/hero-section

Quick Start

Import the component in any page or layout. It works out of the box with shadcn's theme tokens.

import { HeroSection } from "@/components/hero-section";

export default function Home() {
  return <HeroSection />;
}

Components

The component library includes navigation, hero sections, pricing cards, testimonials, and more. Every component is accessible, themeable, and TypeScript-first.

Blocks

Blocks are fully composed page sections ready to drop into your project. Browse the Blocks gallery.

Theming

Every component uses shadcn/ui design tokens —--background,--foreground,--primary— so light and dark modes work automatically.

Spinners

The Pixel Glow Spinners tool lets you tune color, size, spacing, speed, and glow — then copy the HTML, CSS, or React snippet.

Registry

Components are distributed through a shadcn-compatible registry. Each item ships with its dependencies, styles, and TypeScript types.

Support

Found a bug or have a feature request? Open an issue on GitHub and we'll take a look.