NexUI

Getting started

Theming

NexUI uses CSS custom properties (variables) registered in the Tailwind v4 @theme inline block. Change a single variable to retheme every component at once.

How it works

Every component references semantic tokens like bg-primary, text-muted-foreground, and border-border rather than literal colours. Changing a token in globals.css updates every component that references it.

--color-primary

Buttons, links, focus rings, active states

--color-background

Page background

--color-card

Card & panel surfaces

--color-border

Borders and dividers

--color-muted-foreground

Secondary text, placeholders

--radius

Corner rounding on all components

Default tokens

Copy this block into your globals.css and modify the values to match your brand.

globals.css
/* globals.css */
@import "tailwindcss";

@theme inline {
  --font-sans: "Inter", "Inter Fallback";
  --font-mono: "JetBrains Mono", monospace;

  /* Brand */
  --color-primary:             oklch(0.62 0.21 250);
  --color-primary-foreground:  oklch(0.98 0   0);

  /* Surface */
  --color-background:          oklch(0.09 0   0);
  --color-foreground:          oklch(0.97 0   0);
  --color-card:                oklch(0.12 0   0);
  --color-card-foreground:     oklch(0.97 0   0);

  /* Secondary & muted */
  --color-secondary:           oklch(0.16 0   0);
  --color-secondary-foreground:oklch(0.97 0   0);
  --color-muted:               oklch(0.16 0   0);
  --color-muted-foreground:    oklch(0.55 0   0);

  /* Borders */
  --color-border:              oklch(0.22 0   0);
  --color-input:               oklch(0.22 0   0);

  /* Status */
  --color-destructive:         oklch(0.60 0.22 25);
  --color-destructive-foreground: oklch(0.98 0 0);

  /* Ring */
  --color-ring:                oklch(0.62 0.21 250);

  /* Radius */
  --radius: 0.5rem;
}

Light mode

NexUI defaults to dark. To add a light theme, apply a .light class to <html> and override the surface tokens:

globals.css
/* globals.css — add a .light class for an explicit light theme */
.light {
  --color-background:       oklch(0.99 0 0);
  --color-foreground:       oklch(0.09 0 0);
  --color-card:             oklch(0.96 0 0);
  --color-border:           oklch(0.90 0 0);
  --color-muted-foreground: oklch(0.45 0 0);
  --color-secondary:        oklch(0.94 0 0);
}

Custom brand colour

NexUI uses the OKLCH colour space for perceptually-uniform colour manipulation. To change the primary hue, adjust the third argument (hue angle):

globals.css
/* Override the primary hue for a green brand */
--color-primary: oklch(0.60 0.20 142);
Blue (default)
Purple
Green
Orange
Rose

Fonts

Set --font-sans and --font-mono in the @theme inline block. Then load your fonts via next/font/google and apply the CSS variable in your layout. NexUI uses Inter and JetBrains Mono by default.

Related

Installation

Set up NexUI in your project.

Browse components

See all components with live previews.