Ghost Diagrams 👻

Minimalist, theme-aware diagrams that blend seamlessly with any background.

The Philosophy

Transparent backgrounds

No solid fills—let the page show through

currentColor everywhere

Auto-adapts to light and dark mode

Thin borders

Never heavier than 1-2px strokes

Subtle opacity

Use /15, /20, /30, /40 for hierarchy

The Core Technique

tsx

// [Yes] Ghost style - auto-adapts to theme
<div className="border border-current/20 text-current/60" />

// [No] Fixed colors - breaks in light/dark mode
<div className="border border-gray-700 text-gray-400" />

Live Example

User Input

→

Phase 1

Processing

Validate

Parse

Transform

if valid

✓ Complete

Data flow diagram

Available Primitives

GhostContainerRoot wrapper with max-width and spacing

GhostBoxTransparent bordered container with optional label

GhostGridGrid of small labeled cells

GhostArrowVertical arrow connector

GhostDashedLineHorizontal dashed line with arrows

GhostPlaceholderFake text lines (skeleton UI)

GhostCaptionCentered caption text

GhostLabelUppercase tracking label

GhostIconSmall icon placeholder

tsx

import {
  GhostContainer,
  GhostBox,
  GhostBoxTitle,
  GhostGrid,
  GhostArrow,
  GhostCaption
} from '@/components/ui/ghost-diagram';

Box Variants

Default

Neutral styling

Muted

Subtle tinted background

Success

Completion, success states

Warning

Caution, attention needed

Error

Failure, blocked states

Do's and Don'ts

• Use opacity for hierarchy (/60, /40, /20)
• Keep it minimal—remove what you can
• Use thin strokes (1-2px max)
• Let it breathe with generous padding
• Center-align diagrams
• Add captions to explain
• Use select-none to prevent selection

Don't

• Use solid fills (bg-gray-800)
• Use fixed colors (text-gray-500)
• Add shadows—stay flat
• Use gradients—stay simple
• Overcrowd—split into multiple
• Use heavy fonts—font-medium max
• Add animations—keep it static

Opacity Reference

Use Case	Opacity	Preview
Primary text	/80 - /100	Sample text
Secondary text	/60	Sample text
Tertiary text	/40	Sample text
Primary borders	/30
Secondary borders	/20
Background tint	/[0.02]