CSS Customization

Nextra and nextra-theme-docs expose CSS custom properties, such as --nextra-primary-hue and --nextra-primary-saturation, plus stable nextra--prefixed class names that you can override from your own global stylesheet.

This project loads app/globals.css from the root layout. The site keeps Nextra’s default blue identity, while a reusable .custom-gradient-box utility scopes an alternate purple palette to this demo only:

.custom-gradient-box {
  --nextra-primary-hue: 280deg;
  --nextra-primary-saturation: 90%;
 
  background: linear-gradient(
    135deg,
    hsl(var(--nextra-primary-hue) var(--nextra-primary-saturation) 40%),
    #db2777
  );
}

You can also override or extend MDX components globally in mdx-components.ts using the theme’s useMDXComponents helper. Tailwind CSS is usable too, since Nextra 4 ships with Tailwind support.