Bainred
All themes
Redd
Redd is a red shadcn/ui theme with rounded corners and sans-serif typography, in light and dark modes.
- Sans
- Poppins
- Serif
- Playfair Display
- Mono
- JetBrains Mono
- Radius
- 4px
Heads up!
You can add components to your app using the CLI.
Payment failed
Please update your billing details.
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.
:root {
--background: oklch(0.9848 0 0);
--foreground: oklch(0.2658 0.1063 15.6);
--card: oklch(1 0 0);
--card-foreground: oklch(0.2658 0.1063 15.6);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.2658 0.1063 15.6);
--primary: oklch(0.246 0.101 29.23);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.9725 0.0042 91.45);
--secondary-foreground: oklch(0.3789 0.1519 18.6);
--muted: oklch(0.9638 0.0026 91.43);
--muted-foreground: oklch(0.527 0.0621 3.07);
--accent: oklch(0.9348 0.0158 91.55);
--accent-foreground: oklch(0.4323 0.1735 19.37);
--destructive: oklch(0.6356 0.2082 25.38);
--destructive-foreground: oklch(0.9848 0 0);
--border: oklch(0.9272 0.0053 91.46);
--input: oklch(0.9272 0.0053 91.46);
--ring: oklch(0.246 0.101 29.23);
--chart-1: oklch(0.2436 0.1 29.23);
--chart-2: oklch(0.6309 0.1013 183.49);
--chart-3: oklch(0.8336 0.1186 88.15);
--chart-4: oklch(0.7834 0.1261 58.75);
--chart-5: oklch(0.6772 0.1571 35.19);
--sidebar: oklch(0.9863 0.0021 91.43);
--sidebar-foreground: oklch(0.2658 0.1063 15.6);
--sidebar-primary: oklch(0.4841 0.1944 19.92);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.9545 0.0111 91.51);
--sidebar-accent-foreground: oklch(0.4841 0.1944 19.92);
--sidebar-border: oklch(0.9272 0.0053 91.46);
--sidebar-ring: oklch(0.4841 0.1944 19.92);
--font-sans: Poppins, sans-serif;
--font-serif: Playfair Display, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 4px;
--spacing: 0.25rem;
--tracking-normal: 0.015em;
--shadow-color: oklch(0.2658 0.1063 15.6);
--shadow-opacity: 0.05;
--shadow-blur: 10px;
--shadow-spread: 0px;
--shadow-offset-x: 0px;
--shadow-offset-y: 2px;
--shadow-2xs: 0px 2px 10px 0px hsl(345 100% 15% / 0.03);
--shadow-xs: 0px 2px 10px 0px hsl(345 100% 15% / 0.03);
--shadow-sm: 0px 2px 10px 0px hsl(345 100% 15% / 0.05), 0px 1px 2px -1px hsl(345 100% 15% / 0.05);
--shadow: 0px 2px 10px 0px hsl(345 100% 15% / 0.05), 0px 1px 2px -1px hsl(345 100% 15% / 0.05);
--shadow-md: 0px 2px 10px 0px hsl(345 100% 15% / 0.05), 0px 2px 4px -1px hsl(345 100% 15% / 0.05);
--shadow-lg: 0px 2px 10px 0px hsl(345 100% 15% / 0.05), 0px 4px 6px -1px hsl(345 100% 15% / 0.05);
--shadow-xl: 0px 2px 10px 0px hsl(345 100% 15% / 0.05), 0px 8px 10px -1px hsl(345 100% 15% / 0.05);
--shadow-2xl: 0px 2px 10px 0px hsl(345 100% 15% / 0.13);
}
.dark {
--background: oklch(0.2156 0 0);
--foreground: oklch(0.9848 0 0);
--card: oklch(0.2376 0 0);
--card-foreground: oklch(0.9848 0 0);
--popover: oklch(0.2156 0 0);
--popover-foreground: oklch(0.9848 0 0);
--primary: oklch(0.2908 0.1193 29.23);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.3211 0 0);
--secondary-foreground: oklch(0.9848 0 0);
--muted: oklch(0.2697 0 0);
--muted-foreground: oklch(0.7244 0 0);
--accent: oklch(0.3236 0.1296 17.46);
--accent-foreground: oklch(0.9848 0 0);
--destructive: oklch(0.4776 0.1631 25.94);
--destructive-foreground: oklch(0.9848 0 0);
--border: oklch(0.3211 0 0);
--input: oklch(0.3211 0 0);
--ring: oklch(0.5838 0.2347 20.65);
--chart-1: oklch(0.5838 0.2347 20.65);
--chart-2: oklch(0.7579 0.1228 183.36);
--chart-3: oklch(0.876 0.0908 88.83);
--chart-4: oklch(0.8326 0.096 60.23);
--chart-5: oklch(0.7439 0.1185 34.86);
--sidebar: oklch(0.193 0 0);
--sidebar-foreground: oklch(0.9848 0 0);
--sidebar-primary: oklch(0.5838 0.2347 20.65);
--sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent: oklch(0.2658 0.1063 15.6);
--sidebar-accent-foreground: oklch(0.9848 0 0);
--sidebar-border: oklch(0.2697 0 0);
--sidebar-ring: oklch(0.5838 0.2347 20.65);
--font-sans: Poppins, sans-serif;
--font-serif: Playfair Display, serif;
--font-mono: JetBrains Mono, monospace;
--radius: 4px;
--spacing: 0.25rem;
--tracking-normal: 0.015em;
--shadow-color: oklch(0 0 0);
--shadow-opacity: 0.5;
--shadow-blur: 25px;
--shadow-spread: 0px;
--shadow-offset-x: 0px;
--shadow-offset-y: 10px;
--shadow-2xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.25);
--shadow-xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.25);
--shadow-sm: 0px 10px 25px 0px hsl(0 0% 0% / 0.50), 0px 1px 2px -1px hsl(0 0% 0% / 0.50);
--shadow: 0px 10px 25px 0px hsl(0 0% 0% / 0.50), 0px 1px 2px -1px hsl(0 0% 0% / 0.50);
--shadow-md: 0px 10px 25px 0px hsl(0 0% 0% / 0.50), 0px 2px 4px -1px hsl(0 0% 0% / 0.50);
--shadow-lg: 0px 10px 25px 0px hsl(0 0% 0% / 0.50), 0px 4px 6px -1px hsl(0 0% 0% / 0.50);
--shadow-xl: 0px 10px 25px 0px hsl(0 0% 0% / 0.50), 0px 8px 10px -1px hsl(0 0% 0% / 0.50);
--shadow-2xl: 0px 10px 25px 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);
}
}