Theming

The design system was inspired on Shadcn UI, allowing you to overwrite css variables.

Usage

You can import the pre-built stylesheet.

import 'next-docs-ui/style.css';

For Tailwind CSS projects, please use the built-in plugin instead.

const { docsUi, docsUiPlugins } = require('next-docs-ui/tailwind-plugin');
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './node_modules/next-docs-ui/dist/**/*.js',
    ...
  ],
  plugins: [...docsUiPlugins, docsUi],
};

Customise

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%;
}

Typography

We use the Tailwind CSS Typography plugin internally, you may customise it with CSS.

Our Tailwind CSS plugin overrides the default configuration for Typography plugin. You may use the prose utility directly.

<div className="prose">...</div>

Global Styles

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

The official Tailwind CSS plugin also includes new colors and extra utilities including steps and step.