Components

Text

Documentation starts with a clear title and a useful paragraph. Use bold for actions, code for identifiers and links to a specific task.

A subsection

Keep headings in sentence case. Reading text is 17px. Labels and code stay at least 14px.

• Show the next action.
• Keep prerequisites visible.
• Explain how to check the result.

Keep the detail that changes what the reader needs to do.

Typography and Markdown examples

Code

docusaurus.config.js

export default {
  presets: ["classic"],
  themes: ["docusaurus-theme-quiet"],
};

Code blocks, commands and highlighted lines

Callouts

Note

Restart the development server after changing the theme configuration.

Warning

Changing document slugs can break existing links. Add redirects when a URL must change.

All callout types and their source

Tabs

npm

npm install docusaurus-theme-quiet

pnpm

pnpm add docusaurus-theme-quiet

Tab syntax and keyboard behavior

Accordions

Can I keep my current content?

Yes. Quiet extends Classic. Keep your document files, IDs, routes and navigation. Review old CSS and component overrides when adopting a new theme.

Accordion source and usage

Tables

Setting	Light mode	Dark mode
Background	White	Near black
Text	Near black	Near white
Accent	Configurable	Configurable

Table syntax

Cards

Branding

Set your colors, logo and typography.

Navigation

Organize guides and reference pages.

Card component reference

Steps

1. Install the package

   Add Quiet to an existing Docusaurus site.

2. Enable the theme

   Add the package to the themes array and restart your server.

3. Check the result

   Review a page in light mode, dark mode and on a phone.

Step component reference

Diagrams

The document moves from writing to review and publication.

Mermaid setup and source