All presets
Retro Synthwave preset
Neon magenta and cyan over a violet night sky, with a grotesque display face. Lavender haze in light mode.
- Family
- Retro
- Typeface
- Bricolage Grotesque
- Radius
- 0.5rem
- Density
- default
- Shadows
- soft
Light and dark
Overview
Good morning, Ana
Revenue, 7 days
$48,210
Weekly digest
Overview
Good morning, Ana
Revenue, 7 days
$48,210
Weekly digest
Install
One registry item sets the colours, radius, font stack, spacing step and shadow scale. Load the typeface itself with next/font or Fontsource.
npx shadcn@latest add https://ui.tealmac.com/r/presets/retro-synthwave.json{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "preset-retro-synthwave",
"type": "registry:theme",
"title": "Retro Synthwave preset",
"description": "Neon magenta and cyan over a violet night sky, with a grotesque display face. Lavender haze in light mode. Bricolage Grotesque, default density, soft shadows.",
"cssVars": {
"theme": {
"font-sans": "\"Bricolage Grotesque\", ui-sans-serif, system-ui, sans-serif",
"spacing": "0.25rem",
"shadow-2xs": "0 1px rgb(0 0 0 / 0.04)",
"shadow-xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"shadow-sm": "0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08)",
"shadow": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
"shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
"shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
},
"light": {
"radius": "0.5rem",
"background": "oklch(0.975 0.012 315)",
"foreground": "oklch(0.21 0.06 300)",
"card": "oklch(0.995 0.005 315)",
"card-foreground": "oklch(0.21 0.06 300)",
"popover": "oklch(0.995 0.005 315)",
"popover-foreground": "oklch(0.21 0.06 300)",
"primary": "oklch(0.52 0.24 330)",
"primary-foreground": "oklch(0.99 0.008 315)",
"secondary": "oklch(0.94 0.025 300)",
"secondary-foreground": "oklch(0.26 0.07 300)",
"muted": "oklch(0.945 0.02 310)",
"muted-foreground": "oklch(0.48 0.06 300)",
"accent": "oklch(0.93 0.05 210)",
"accent-foreground": "oklch(0.32 0.08 240)",
"destructive": "oklch(0.53 0.21 25)",
"border": "oklch(0.9 0.03 310)",
"input": "oklch(0.66 0.06 305)",
"ring": "oklch(0.62 0.22 330)",
"chart-1": "oklch(0.58 0.24 330)",
"chart-2": "oklch(0.66 0.14 215)",
"chart-3": "oklch(0.5 0.22 290)",
"chart-4": "oklch(0.75 0.16 60)",
"chart-5": "oklch(0.65 0.18 160)",
"sidebar": "oklch(0.995 0.005 315)",
"sidebar-foreground": "oklch(0.21 0.06 300)",
"sidebar-primary": "oklch(0.52 0.24 330)",
"sidebar-primary-foreground": "oklch(0.99 0.008 315)",
"sidebar-accent": "oklch(0.93 0.05 210)",
"sidebar-accent-foreground": "oklch(0.32 0.08 240)",
"sidebar-border": "oklch(0.9 0.03 310)",
"sidebar-ring": "oklch(0.62 0.22 330)"
},
"dark": {
"background": "oklch(0.15 0.06 292)",
"foreground": "oklch(0.95 0.02 310)",
"card": "oklch(0.195 0.07 292)",
"card-foreground": "oklch(0.95 0.02 310)",
"popover": "oklch(0.215 0.075 292)",
"popover-foreground": "oklch(0.95 0.02 310)",
"primary": "oklch(0.72 0.21 340)",
"primary-foreground": "oklch(0.15 0.06 292)",
"secondary": "oklch(0.26 0.08 292)",
"secondary-foreground": "oklch(0.95 0.02 310)",
"muted": "oklch(0.24 0.07 292)",
"muted-foreground": "oklch(0.76 0.06 300)",
"accent": "oklch(0.3 0.09 250)",
"accent-foreground": "oklch(0.9 0.09 200)",
"destructive": "oklch(0.7 0.19 25)",
"border": "oklch(0.8 0.12 320 / 18%)",
"input": "oklch(0.8 0.12 320 / 26%)",
"ring": "oklch(0.82 0.13 200)",
"chart-1": "oklch(0.72 0.21 340)",
"chart-2": "oklch(0.82 0.13 200)",
"chart-3": "oklch(0.68 0.2 295)",
"chart-4": "oklch(0.84 0.15 75)",
"chart-5": "oklch(0.8 0.17 160)",
"sidebar": "oklch(0.195 0.07 292)",
"sidebar-foreground": "oklch(0.95 0.02 310)",
"sidebar-primary": "oklch(0.72 0.21 340)",
"sidebar-primary-foreground": "oklch(0.15 0.06 292)",
"sidebar-accent": "oklch(0.3 0.09 250)",
"sidebar-accent-foreground": "oklch(0.9 0.09 200)",
"sidebar-border": "oklch(0.8 0.12 320 / 18%)",
"sidebar-ring": "oklch(0.82 0.13 200)"
}
}
}