Perpetuity Shadcn Theme
Timeless terminal theme with infinite depth for shadcn/ui. Eternal blue-gray design with enduring monospace precision. TypeScript ready.
Powered by
Working with shadcn themes?
Join our Discord community for help from other shadcn developers working with themes and design systems.
Perpetuity Shadcn Theme
Been working with terminals for decades and there's something about blue-gray monospace text that feels like it could exist forever. This theme captures that timeless quality—subtle blue tones that never go out of style, with the kind of enduring aesthetic that makes systems feel stable and trustworthy across generations.
Perfect for system administration tools, database interfaces, long-term archival systems, or any React project where permanence and reliability matter more than trends. The monospace typography feels like it could still be readable in 50 years.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/perpetuity.jsonnpx shadcn@latest add https://www.shadcn.io/registry/perpetuity.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/perpetuity.jsonbunx shadcn@latest add https://www.shadcn.io/registry/perpetuity.jsonOriginal theme by tweakcn.com
CSS Variables
Copy and paste the following CSS variables into your global CSS file:
:root {
--background: oklch(0.9491 0.0085 197.0126);
--foreground: oklch(0.3772 0.0619 212.6640);
--card: oklch(0.9724 0.0053 197.0692);
--card-foreground: oklch(0.3772 0.0619 212.6640);
--popover: oklch(0.9724 0.0053 197.0692);
--popover-foreground: oklch(0.3772 0.0619 212.6640);
--primary: oklch(0.5624 0.0947 203.2755);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.9244 0.0181 196.8450);
--secondary-foreground: oklch(0.3772 0.0619 212.6640);
--muted: oklch(0.9295 0.0107 196.9723);
--muted-foreground: oklch(0.5428 0.0594 201.5662);
--accent: oklch(0.9021 0.0297 201.8915);
--accent-foreground: oklch(0.3772 0.0619 212.6640);
--destructive: oklch(0.5732 0.1901 25.5409);
--border: oklch(0.8931 0.0205 204.4136);
--input: oklch(0.9244 0.0181 196.8450);
--ring: oklch(0.5624 0.0947 203.2755);
--chart-1: oklch(0.5624 0.0947 203.2755);
--chart-2: oklch(0.6389 0.1029 201.5918);
--chart-3: oklch(0.7124 0.1075 201.2486);
--chart-4: oklch(0.7701 0.0979 201.1816);
--chart-5: oklch(0.8336 0.0771 200.9702);
--sidebar: oklch(0.9280 0.0183 205.3151);
--sidebar-foreground: oklch(0.3772 0.0619 212.6640);
--sidebar-primary: oklch(0.5624 0.0947 203.2755);
--sidebar-primary-foreground: oklch(1.0000 0 0);
--sidebar-accent: oklch(0.9021 0.0297 201.8915);
--sidebar-accent-foreground: oklch(0.3772 0.0619 212.6640);
--sidebar-border: oklch(0.8931 0.0205 204.4136);
--sidebar-ring: oklch(0.5624 0.0947 203.2755);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Courier New, monospace;
--font-serif: Courier New, monospace;
--font-mono: Courier New, monospace;
--radius: 0.125rem;
--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.2068 0.0247 224.4533);
--foreground: oklch(0.8520 0.1269 195.0354);
--card: oklch(0.2293 0.0276 216.0674);
--card-foreground: oklch(0.8520 0.1269 195.0354);
--popover: oklch(0.2293 0.0276 216.0674);
--popover-foreground: oklch(0.8520 0.1269 195.0354);
--primary: oklch(0.8520 0.1269 195.0354);
--primary-foreground: oklch(0.2068 0.0247 224.4533);
--secondary: oklch(0.3775 0.0564 216.5010);
--secondary-foreground: oklch(0.8520 0.1269 195.0354);
--muted: oklch(0.2894 0.0412 218.8153);
--muted-foreground: oklch(0.6611 0.0975 195.0526);
--accent: oklch(0.3775 0.0564 216.5010);
--accent-foreground: oklch(0.8520 0.1269 195.0354);
--destructive: oklch(0.6168 0.2086 25.8088);
--border: oklch(0.3775 0.0564 216.5010);
--input: oklch(0.3775 0.0564 216.5010);
--ring: oklch(0.8520 0.1269 195.0354);
--chart-1: oklch(0.8520 0.1269 195.0354);
--chart-2: oklch(0.6611 0.0975 195.0526);
--chart-3: oklch(0.5804 0.0849 195.0673);
--chart-4: oklch(0.4269 0.0630 202.6247);
--chart-5: oklch(0.3142 0.0455 204.1575);
--sidebar: oklch(0.2068 0.0247 224.4533);
--sidebar-foreground: oklch(0.8520 0.1269 195.0354);
--sidebar-primary: oklch(0.8520 0.1269 195.0354);
--sidebar-primary-foreground: oklch(0.2068 0.0247 224.4533);
--sidebar-accent: oklch(0.3775 0.0564 216.5010);
--sidebar-accent-foreground: oklch(0.8520 0.1269 195.0354);
--sidebar-border: oklch(0.3775 0.0564 216.5010);
--sidebar-ring: oklch(0.8520 0.1269 195.0354);
--destructive-foreground: oklch(1.0000 0 0);
--font-sans: Source Code Pro, monospace;
--font-serif: Source Code Pro, monospace;
--font-mono: Source Code Pro, monospace;
--radius: 0.125rem;
--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
Working on systems that need to run for years or decades, realized that the most enduring interfaces are the ones that don't chase trends. This theme uses that classic blue-gray terminal aesthetic that's been readable since the 1980s and will probably still feel right in 2050.
Most terminal-inspired themes either go too stark and lose personality, or try to modernize and lose that timeless quality. This theme hits that sweet spot—classic enough to feel eternal, refined enough to work in modern interfaces.
Dark mode enhances the terminal heritage while adding that blue glow that makes long coding sessions feel less harsh. The cyan-blue tones create that classic phosphor monitor aesthetic that developers have trusted for generations.
What's actually in this theme
Dead simple setup—copy the CSS variables into your globals.css and you're done. The monospace typography everywhere creates that consistent, systematic feeling where every character has equal weight and importance.
That blue-gray primary hits the perfect balance between authority and approachability—serious enough for system administration interfaces, friendly enough for everyday developer tools. The minimal border radius keeps everything crisp and architectural.
All contrast ratios pass WCAG AA standards because accessible design is timeless design. 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 blue-gray tones should mark system-level actions and persistent elements—anything that needs to feel stable and enduring. Use the terminal aesthetic to create environments where technical precision and long-term reliability are the priority.
This works especially well for system administration tools, database interfaces, monitoring dashboards, or any interface where longevity and trustworthiness matter more than visual excitement. Think Unix philosophy applied to modern UIs.
In practice, embrace the eternal quality this palette creates. The subtle blue tones and monospace consistency reduce visual noise and create interfaces that feel like they'll work the same way for decades—which is exactly what system operators want.
You might also like
Mono Theme
Pure monochromatic theme with eternal simplicity
Dark Matter Theme
Deep space inspired theme with infinite depth
Vercel Theme
Clean development-focused terminal theme
Graphite Theme
Sophisticated graphite with timeless elegance
Corporate Theme
Professional corporate theme with enduring authority
Notebook Theme
Academic notebook theme with scholarly permanence