Pine Terminal

Pine Terminal is a green shadcn/ui theme with sharp corners and monospace typography, in light and dark modes.

Green Minimal Sharp corners Monospace

Sans: System
Serif: System
Mono: System
Radius: 0rem

Open in editor

Create project

Deploy your new project in one click.

Name

Framework

Notes

Visitors

January – June

+12.5%

Buttons

Typography

The theme's three font families.

Sans · System

The quick brown fox

Serif · System

jumps over the lazy dog.

Mono · System

npx shadcn add button

Account

Accept terms and conditions

Notifications

Choose what you want to hear about.

Product updates

New features and releases

Security alerts

Sign-ins from new devices

Marketing

Tips, offers and news

Payment method

CardPayPalApple Pay

Heads up!

You can add components to your app using the CLI.

Payment failed

Please update your billing details.

Team

Invite your teammates to collaborate.

SDJLINWK

OwnerEditorViewerSuspended

Storage7.2 of 10 GB

Volume64%

Invoices

Invoice	Status	Amount
INV001	Paid	$250.00
INV002	Pending	$150.00
INV003	Unpaid	$350.00
INV004	Paid	$450.00

FAQ

Yes. It adheres to the WAI-ARIA design pattern.

Colors

Click any swatch to copy its OKLCH value.

Base

Brand

Lines

Charts

Sidebar

StatusOptional, generated to match

Use this theme

Install it with the shadcn CLI, paste the CSS, or export tokens for your design tool.

Paste into app/globals.css, replacing the existing :root and .dark blocks.

Include success, warning & info colors

:root {
  --background: oklch(0.9641 0.0052 158.6);
  --foreground: oklch(0.2836 0.0272 156.43);
  --card: oklch(0.9424 0.0083 158.53);
  --card-foreground: oklch(0.2253 0.0193 156.7);
  --popover: oklch(0.9424 0.0083 158.53);
  --popover-foreground: oklch(0.2253 0.0193 156.7);
  --primary: oklch(0.5313 0.1014 153.37);
  --primary-foreground: oklch(0.9854 0.0014 158.69);
  --secondary: oklch(0.5852 0.0854 61.14);
  --secondary-foreground: oklch(0.985 0.0009 64.08);
  --muted: oklch(0.9115 0.0084 158.52);
  --muted-foreground: oklch(0.4858 0.0418 156.69);
  --accent: oklch(0.889 0.0105 158.46);
  --accent-foreground: oklch(0.2836 0.0272 156.43);
  --destructive: oklch(0.5107 0.1226 22.4);
  --destructive-foreground: oklch(0.9848 0 0);
  --border: oklch(0.8513 0.0142 158.36);
  --input: oklch(0.9263 0.0069 158.56);
  --ring: oklch(0.5313 0.1014 153.37);
  --chart-1: oklch(0.5313 0.1014 153.37);
  --chart-2: oklch(0.5852 0.0854 61.14);
  --chart-3: oklch(0.5107 0.1226 22.4);
  --chart-4: oklch(0.5907 0.0672 155.93);
  --chart-5: oklch(0.7038 0.0439 157.29);
  --sidebar: oklch(0.9278 0.0104 158.48);
  --sidebar-foreground: oklch(0.3391 0.0346 156.27);
  --sidebar-primary: oklch(0.5313 0.1014 153.37);
  --sidebar-primary-foreground: oklch(0.9854 0.0014 158.69);
  --sidebar-accent: oklch(0.889 0.0105 158.46);
  --sidebar-accent-foreground: oklch(0.2836 0.0272 156.43);
  --sidebar-border: oklch(0.8513 0.0142 158.36);
  --sidebar-ring: oklch(0.5313 0.1014 153.37);
  --font-sans: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Menlo', monospace;
  --font-serif: Georgia, serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Menlo', monospace;
  --radius: 0rem;
  --spacing: 0.25rem;
  --tracking-normal: -0.01em;
  --shadow-color: oklch(0.2836 0.0272 156.43);
  --shadow-opacity: 0.1;
  --shadow-blur: 0px;
  --shadow-spread: 0px;
  --shadow-offset-x: 2px;
  --shadow-offset-y: 2px;
  --shadow-2xs: 2px 2px 0px 0px hsl(142 20% 15% / 0.05);
  --shadow-xs: 2px 2px 0px 0px hsl(142 20% 15% / 0.05);
  --shadow-sm: 2px 2px 0px 0px hsl(142 20% 15% / 0.10), 2px 1px 2px -1px hsl(142 20% 15% / 0.10);
  --shadow: 2px 2px 0px 0px hsl(142 20% 15% / 0.10), 2px 1px 2px -1px hsl(142 20% 15% / 0.10);
  --shadow-md: 2px 2px 0px 0px hsl(142 20% 15% / 0.10), 2px 2px 4px -1px hsl(142 20% 15% / 0.10);
  --shadow-lg: 2px 2px 0px 0px hsl(142 20% 15% / 0.10), 2px 4px 6px -1px hsl(142 20% 15% / 0.10);
  --shadow-xl: 2px 2px 0px 0px hsl(142 20% 15% / 0.10), 2px 8px 10px -1px hsl(142 20% 15% / 0.10);
  --shadow-2xl: 2px 2px 0px 0px hsl(142 20% 15% / 0.25);
}

.dark {
  --background: oklch(0.1487 0.0066 158.21);
  --foreground: oklch(0.8352 0.0611 157.02);
  --card: oklch(0.1742 0.0094 157.5);
  --card-foreground: oklch(0.901 0.0364 157.81);
  --popover: oklch(0.1742 0.0094 157.5);
  --popover-foreground: oklch(0.901 0.0364 157.81);
  --primary: oklch(0.6369 0.1241 153.21);
  --primary-foreground: oklch(0.1616 0.008 157.6);
  --secondary: oklch(0.5961 0.1041 59.85);
  --secondary-foreground: oklch(0.1591 0.0051 63.67);
  --muted: oklch(0.2429 0.0115 157.65);
  --muted-foreground: oklch(0.6747 0.0656 156.39);
  --accent: oklch(0.2761 0.0139 157.58);
  --accent-foreground: oklch(0.901 0.0364 157.81);
  --destructive: oklch(0.5119 0.1503 24.12);
  --destructive-foreground: oklch(0.9848 0 0);
  --border: oklch(0.2797 0.0207 157);
  --input: oklch(0.2226 0.0146 157.21);
  --ring: oklch(0.6369 0.1241 153.21);
  --chart-1: oklch(0.6369 0.1241 153.21);
  --chart-2: oklch(0.5961 0.1041 59.85);
  --chart-3: oklch(0.5119 0.1503 24.12);
  --chart-4: oklch(0.6951 0.0955 155.23);
  --chart-5: oklch(0.494 0.0548 156.02);
  --sidebar: oklch(0.1616 0.008 157.6);
  --sidebar-foreground: oklch(0.8352 0.0611 157.02);
  --sidebar-primary: oklch(0.6369 0.1241 153.21);
  --sidebar-primary-foreground: oklch(0.1616 0.008 157.6);
  --sidebar-accent: oklch(0.2761 0.0139 157.58);
  --sidebar-accent-foreground: oklch(0.901 0.0364 157.81);
  --sidebar-border: oklch(0.2797 0.0207 157);
  --sidebar-ring: oklch(0.6369 0.1241 153.21);
  --font-sans: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Menlo', monospace;
  --font-serif: Georgia, serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Menlo', monospace;
  --radius: 0rem;
  --spacing: 0.25rem;
  --tracking-normal: -0.01em;
  --shadow-color: oklch(0 0 0);
  --shadow-opacity: 0.5;
  --shadow-blur: 0px;
  --shadow-spread: 0px;
  --shadow-offset-x: 3px;
  --shadow-offset-y: 3px;
  --shadow-2xs: 3px 3px 0px 0px hsl(0 0% 0% / 0.25);
  --shadow-xs: 3px 3px 0px 0px hsl(0 0% 0% / 0.25);
  --shadow-sm: 3px 3px 0px 0px hsl(0 0% 0% / 0.50), 3px 1px 2px -1px hsl(0 0% 0% / 0.50);
  --shadow: 3px 3px 0px 0px hsl(0 0% 0% / 0.50), 3px 1px 2px -1px hsl(0 0% 0% / 0.50);
  --shadow-md: 3px 3px 0px 0px hsl(0 0% 0% / 0.50), 3px 2px 4px -1px hsl(0 0% 0% / 0.50);
  --shadow-lg: 3px 3px 0px 0px hsl(0 0% 0% / 0.50), 3px 4px 6px -1px hsl(0 0% 0% / 0.50);
  --shadow-xl: 3px 3px 0px 0px hsl(0 0% 0% / 0.50), 3px 8px 10px -1px hsl(0 0% 0% / 0.50);
  --shadow-2xl: 3px 3px 0px 0px hsl(0 0% 0% / 1.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-destructive-foreground: var(--destructive-foreground);
  --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);

  --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);

  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
  --tracking-normal: var(--tracking-normal);
  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
}

@layer base {
  body {
    letter-spacing: var(--tracking-normal);
  }
}