Mono Shadcn Theme
Pure monochromatic theme with stark black and white design for shadcn/ui. Terminal-inspired aesthetic with zero-distraction focus. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Mono Shadcn Theme
Tired of color distractions when trying to focus on complex code or data. This theme strips everything down to pure black and white—the ultimate expression of "content is king." Monospace fonts everywhere, zero border radius, and the kind of stark contrast that makes information architecture crystal clear.
Perfect for terminal applications, code editors, data analysis tools, or any React project where focus and clarity matter more than visual flair. The pure monochromatic approach eliminates all cognitive overhead from color processing.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/mono.jsonnpx shadcn@latest add https://www.shadcn.io/registry/mono.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/mono.jsonbunx shadcn@latest add https://www.shadcn.io/registry/mono.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(1.0000 0 0);
--foreground: oklch(0.1448 0 0);
--card: oklch(1.0000 0 0);
--card-foreground: oklch(0.1448 0 0);
--popover: oklch(1.0000 0 0);
--popover-foreground: oklch(0.1448 0 0);
--primary: oklch(0.5555 0 0);
--primary-foreground: oklch(0.9851 0 0);
--secondary: oklch(0.9702 0 0);
--secondary-foreground: oklch(0.2046 0 0);
--muted: oklch(0.9702 0 0);
--muted-foreground: oklch(0.5486 0 0);
--accent: oklch(0.9702 0 0);
--accent-foreground: oklch(0.2046 0 0);
--destructive: oklch(0.5830 0.2387 28.4765);
--border: oklch(0.9219 0 0);
--input: oklch(0.9219 0 0);
--ring: oklch(0.7090 0 0);
--chart-1: oklch(0.5555 0 0);
--chart-2: oklch(0.5555 0 0);
--chart-3: oklch(0.5555 0 0);
--chart-4: oklch(0.5555 0 0);
--chart-5: oklch(0.5555 0 0);
--sidebar: oklch(0.9851 0 0);
--sidebar-foreground: oklch(0.1448 0 0);
--sidebar-primary: oklch(0.2046 0 0);
--sidebar-primary-foreground: oklch(0.9851 0 0);
--sidebar-accent: oklch(0.9702 0 0);
--sidebar-accent-foreground: oklch(0.2046 0 0);
--sidebar-border: oklch(0.9219 0 0);
--sidebar-ring: oklch(0.7090 0 0);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Geist Mono, monospace;
--font-serif: Geist Mono, monospace;
--font-mono: Geist Mono, monospace;
--radius: 0rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
--spacing: 0.25rem;
}
.dark {
--background: oklch(0.1448 0 0);
--foreground: oklch(0.9851 0 0);
--card: oklch(0.2134 0 0);
--card-foreground: oklch(0.9851 0 0);
--popover: oklch(0.2686 0 0);
--popover-foreground: oklch(0.9851 0 0);
--primary: oklch(0.5555 0 0);
--primary-foreground: oklch(0.9851 0 0);
--secondary: oklch(0.2686 0 0);
--secondary-foreground: oklch(0.9851 0 0);
--muted: oklch(0.2686 0 0);
--muted-foreground: oklch(0.7090 0 0);
--accent: oklch(0.3715 0 0);
--accent-foreground: oklch(0.9851 0 0);
--destructive: oklch(0.7022 0.1892 22.2279);
--border: oklch(0.3407 0 0);
--input: oklch(0.4386 0 0);
--ring: oklch(0.5555 0 0);
--chart-1: oklch(0.5555 0 0);
--chart-2: oklch(0.5555 0 0);
--chart-3: oklch(0.5555 0 0);
--chart-4: oklch(0.5555 0 0);
--chart-5: oklch(0.5555 0 0);
--sidebar: oklch(0.2046 0 0);
--sidebar-foreground: oklch(0.9851 0 0);
--sidebar-primary: oklch(0.9851 0 0);
--sidebar-primary-foreground: oklch(0.2046 0 0);
--sidebar-accent: oklch(0.2686 0 0);
--sidebar-accent-foreground: oklch(0.9851 0 0);
--sidebar-border: oklch(1.0000 0 0);
--sidebar-ring: oklch(0.4386 0 0);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Geist Mono, monospace;
--font-serif: Geist Mono, monospace;
--font-mono: Geist Mono, monospace;
--radius: 0rem;
--shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-destructive-foreground: var(--destructive-foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
}Why this theme actually works
Terminal applications have proven for decades that black and white creates the ultimate focused environment. No color psychology to decode, no hue fatigue—just pure information architecture. This theme applies that same zero-distraction principle to modern web interfaces.
Most themes try to be everything to everyone with color schemes that please rather than perform. This theme does the opposite—it's built for people who need to process complex information quickly without visual interference.
Dark mode becomes your classic terminal experience—white text on black background with maximum contrast. The monospace typography ensures everything aligns perfectly, making data patterns immediately visible.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. Everything uses Geist Mono for that consistent, terminal-inspired typography that makes code, data, and text equally readable.
The zero border radius creates sharp, precise edges that feel like well-structured code. Gray midtones provide hierarchy without introducing color complexity. The result is interfaces that feel like powerful command-line tools.
All contrast ratios are maximized for optimal readability during long work sessions. Since it uses standard shadcn color tokens, your TypeScript autocomplete for bg-primary, text-foreground, etc. works perfectly.
How to use this in projects
The gray midtones should mark interactive elements and create hierarchy through contrast rather than color. Use the stark black and white to eliminate visual noise and let content structure speak for itself.
This works especially well for developer tools, data analysis platforms, terminal applications, or any interface where information density and processing speed matter more than emotional engagement. Think Unix philosophy applied to UI design.
In practice, embrace the brutalist simplicity this palette creates. The absence of color forces excellent information architecture—which often results in more usable, efficient interfaces than their colorful counterparts.
You might also like
Graphite Theme
Sophisticated graphite with monochromatic elegance
Vercel Theme
Clean development-focused monochromatic theme
Dark Matter Theme
Deep space inspired theme with cosmic minimalism
Notebook Theme
Academic notebook theme with scholarly precision
Corporate Theme
Professional corporate theme with business focus
Modern Minimal Theme
Clean minimal theme with subtle sophistication
FAQ
Graphite Shadcn Theme
Sophisticated graphite theme with elegant gray tones for shadcn/ui. Professional monochromatic design with executive appeal. TypeScript ready.
Notebook Shadcn Theme
Academic notebook theme with scholarly precision for shadcn/ui. Paper-inspired design with intellectual handwritten vibes. TypeScript ready.