Theming

The design system was inspired 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-line] has special meanings for codeblock styling.

Tailwind CSS

You can use Next Docs UI with Tailwind CSS.

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

In addition, you may copy the configuration below to share the same design system with it.

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;