Geist · 0.625rem radius

Default

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

#0a0a0a

primary

#171717

secondary

#f5f5f5

muted

#f5f5f5

accent

#f5f5f5

border

#e5e5e5

destructive

#e7000b

dark

background

#0a0a0a

foreground

#fafafa

primary

#e5e5e5

secondary

#262626

muted

#262626

accent

#262626

border

#2e2e2e

destructive

#ff6467

Preview

Real blocks from the library, rendered in Default.

CSS

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

1/* Default · generated by nextui */
2:root {
3  --radius: 0.625rem;
4  --background: oklch(1 0 0);
5  --foreground: oklch(0.145 0 0);
6  --card: oklch(1 0 0);
7  --card-foreground: oklch(0.145 0 0);
8  --popover: oklch(1 0 0);
9  --popover-foreground: oklch(0.145 0 0);
10  --primary: oklch(0.205 0 0);
11  --primary-foreground: oklch(0.985 0 0);
12  --secondary: oklch(0.97 0 0);
13  --secondary-foreground: oklch(0.205 0 0);
14  --muted: oklch(0.97 0 0);
15  --muted-foreground: oklch(0.556 0 0);
16  --accent: oklch(0.97 0 0);
17  --accent-foreground: oklch(0.205 0 0);
18  --destructive: oklch(0.583 0.239 28.5);
19  --border: oklch(0.922 0 0);
20  --input: oklch(0.922 0 0);
21  --ring: oklch(0.205 0 0);
22}
23
24.dark {
25  --background: oklch(0.145 0 0);
26  --foreground: oklch(0.985 0 0);
27  --card: oklch(0.205 0 0);
28  --card-foreground: oklch(0.985 0 0);
29  --popover: oklch(0.205 0 0);
30  --popover-foreground: oklch(0.985 0 0);
31  --primary: oklch(0.922 0 0);
32  --primary-foreground: oklch(0.205 0 0);
33  --secondary: oklch(0.269 0 0);
34  --secondary-foreground: oklch(0.985 0 0);
35  --muted: oklch(0.269 0 0);
36  --muted-foreground: oklch(0.709 0 0);
37  --accent: oklch(0.269 0 0);
38  --accent-foreground: oklch(0.985 0 0);
39  --destructive: oklch(0.702 0.189 22.2);
40  --border: oklch(0.301 0 0);
41  --input: oklch(0.348 0 0);
42  --ring: oklch(0.922 0 0);
43}
44
45/* font-family: ui-sans-serif, system-ui, sans-serif */

Other themes

All themes

Ember Ocean Forest Grape Rose Amber Clay Brutal

CSS

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

1/* Default · generated by nextui */
2:root {
3  --radius: 0.625rem;
4  --background: oklch(1 0 0);
5  --foreground: oklch(0.145 0 0);
6  --card: oklch(1 0 0);
7  --card-foreground: oklch(0.145 0 0);
8  --popover: oklch(1 0 0);
9  --popover-foreground: oklch(0.145 0 0);
10  --primary: oklch(0.205 0 0);
11  --primary-foreground: oklch(0.985 0 0);
12  --secondary: oklch(0.97 0 0);
13  --secondary-foreground: oklch(0.205 0 0);
14  --muted: oklch(0.97 0 0);
15  --muted-foreground: oklch(0.556 0 0);
16  --accent: oklch(0.97 0 0);
17  --accent-foreground: oklch(0.205 0 0);
18  --destructive: oklch(0.583 0.239 28.5);
19  --border: oklch(0.922 0 0);
20  --input: oklch(0.922 0 0);
21  --ring: oklch(0.205 0 0);
22}
23
24.dark {
25  --background: oklch(0.145 0 0);
26  --foreground: oklch(0.985 0 0);
27  --card: oklch(0.205 0 0);
28  --card-foreground: oklch(0.985 0 0);
29  --popover: oklch(0.205 0 0);
30  --popover-foreground: oklch(0.985 0 0);
31  --primary: oklch(0.922 0 0);
32  --primary-foreground: oklch(0.205 0 0);
33  --secondary: oklch(0.269 0 0);
34  --secondary-foreground: oklch(0.985 0 0);
35  --muted: oklch(0.269 0 0);
36  --muted-foreground: oklch(0.709 0 0);
37  --accent: oklch(0.269 0 0);
38  --accent-foreground: oklch(0.985 0 0);
39  --destructive: oklch(0.702 0.189 22.2);
40  --border: oklch(0.301 0 0);
41  --input: oklch(0.348 0 0);
42  --ring: oklch(0.922 0 0);
43}
44
45/* font-family: ui-sans-serif, system-ui, sans-serif */