Theming

The design system is based on Shadcn UI, allowing you to overwrite css variables.

Example

You can easily customise all the properties using css variables.

:root {
  /* hsl colors */
  /* use whitespace instead of comma */
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
 
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
 
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;
}

Global Styles

By importing next-docs-ui/style.css the default border, text and background colors will be changed.

CSS selectors such as [data-rehype-pretty-code-fragment] has special meanings for codeblock styling.

Tailwind CSS

You can use Next Docs UI with Tailwind CSS, and copy the Tailwind configuration from Shadcn UI.

Since Next Docs UI uses Tailwind CSS for styling, the nd- prefix is added to all classes in order to prevent conflicts.

Fix Preflight

Some global styles might be overwritten by Tailwind CSS Preflight.

Since Next Docs UI already perform the preflight, you can remove @tailwind base from your stylesheet.

@tailwind components;
@tailwind utilities;