Geist · 1rem radius

Grape

A ready-made palette for every nextui component and block, in light and dark, with soft shadows. Paste the CSS into globals.css.

Customize in generator

light

background

#ffffff

foreground

#09090b

primary

#7c3aed

secondary

#f4f4f5

muted

#f4f4f5

accent

#f4f4f5

border

#e4e4e7

destructive

#e7000b

dark

background

#09090b

foreground

#fafafa

primary

#8b5cf6

secondary

#27272a

muted

#27272a

accent

#27272a

border

#2f2f33

destructive

#ff6467

Preview

Real blocks from the library, rendered in Grape.

CSS

Tailwind v4 / shadcn variables in OKLCH. Replace the matching block in globals.css.

1/* Grape · generated by nextui */
2:root {
3  --radius: 1rem;
4  --background: oklch(1 0 0);
5  --foreground: oklch(0.141 0.004 285.8);
6  --card: oklch(1 0 0);
7  --card-foreground: oklch(0.141 0.004 285.8);
8  --popover: oklch(1 0 0);
9  --popover-foreground: oklch(0.141 0.004 285.8);
10  --primary: oklch(0.541 0.247 293);
11  --primary-foreground: oklch(1 0 0);
12  --secondary: oklch(0.967 0.001 286.4);
13  --secondary-foreground: oklch(0.21 0.006 285.9);
14  --muted: oklch(0.967 0.001 286.4);
15  --muted-foreground: oklch(0.552 0.014 285.9);
16  --accent: oklch(0.967 0.001 286.4);
17  --accent-foreground: oklch(0.21 0.006 285.9);
18  --destructive: oklch(0.583 0.239 28.5);
19  --border: oklch(0.92 0.004 286.3);
20  --input: oklch(0.92 0.004 286.3);
21  --ring: oklch(0.541 0.247 293);
22}
23
24.dark {
25  --background: oklch(0.141 0.004 285.8);
26  --foreground: oklch(0.985 0 0);
27  --card: oklch(0.21 0.006 285.9);
28  --card-foreground: oklch(0.985 0 0);
29  --popover: oklch(0.21 0.006 285.9);
30  --popover-foreground: oklch(0.985 0 0);
31  --primary: oklch(0.606 0.219 292.7);
32  --primary-foreground: oklch(1 0 0);
33  --secondary: oklch(0.274 0.005 286);
34  --secondary-foreground: oklch(0.985 0 0);
35  --muted: oklch(0.274 0.005 286);
36  --muted-foreground: oklch(0.706 0.014 286);
37  --accent: oklch(0.274 0.005 286);
38  --accent-foreground: oklch(0.985 0 0);
39  --destructive: oklch(0.702 0.189 22.2);
40  --border: oklch(0.307 0.007 286);
41  --input: oklch(0.35 0.009 285.9);
42  --ring: oklch(0.606 0.219 292.7);
43}
44
45/* font-family: ui-sans-serif, system-ui, sans-serif */

Other themes

All themes

Default Ember Ocean Forest Rose Amber Clay Brutal

CSS

Tailwind v4 / shadcn variables in OKLCH. Replace the matching block in globals.css.

1/* Grape · generated by nextui */
2:root {
3  --radius: 1rem;
4  --background: oklch(1 0 0);
5  --foreground: oklch(0.141 0.004 285.8);
6  --card: oklch(1 0 0);
7  --card-foreground: oklch(0.141 0.004 285.8);
8  --popover: oklch(1 0 0);
9  --popover-foreground: oklch(0.141 0.004 285.8);
10  --primary: oklch(0.541 0.247 293);
11  --primary-foreground: oklch(1 0 0);
12  --secondary: oklch(0.967 0.001 286.4);
13  --secondary-foreground: oklch(0.21 0.006 285.9);
14  --muted: oklch(0.967 0.001 286.4);
15  --muted-foreground: oklch(0.552 0.014 285.9);
16  --accent: oklch(0.967 0.001 286.4);
17  --accent-foreground: oklch(0.21 0.006 285.9);
18  --destructive: oklch(0.583 0.239 28.5);
19  --border: oklch(0.92 0.004 286.3);
20  --input: oklch(0.92 0.004 286.3);
21  --ring: oklch(0.541 0.247 293);
22}
23
24.dark {
25  --background: oklch(0.141 0.004 285.8);
26  --foreground: oklch(0.985 0 0);
27  --card: oklch(0.21 0.006 285.9);
28  --card-foreground: oklch(0.985 0 0);
29  --popover: oklch(0.21 0.006 285.9);
30  --popover-foreground: oklch(0.985 0 0);
31  --primary: oklch(0.606 0.219 292.7);
32  --primary-foreground: oklch(1 0 0);
33  --secondary: oklch(0.274 0.005 286);
34  --secondary-foreground: oklch(0.985 0 0);
35  --muted: oklch(0.274 0.005 286);
36  --muted-foreground: oklch(0.706 0.014 286);
37  --accent: oklch(0.274 0.005 286);
38  --accent-foreground: oklch(0.985 0 0);
39  --destructive: oklch(0.702 0.189 22.2);
40  --border: oklch(0.307 0.007 286);
41  --input: oklch(0.35 0.009 285.9);
42  --ring: oklch(0.606 0.219 292.7);
43}
44
45/* font-family: ui-sans-serif, system-ui, sans-serif */