Components

Discover the components you can use in your markdown files.

#Alerts

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

#Package Manager

Components to generate cross package manager comments

npm i defu

npm run dev

npx giget unjs new-lib

#Read More

The component is used to create a link to another page.

#Cards

Group related links or highlights into cards. A ::card can be standalone or wrapped in a ::card-group grid. Add a to to make the whole card a link.

Getting Started

Install undocs and scaffold your first docs site.

Components

Alerts, tabs, cards and more, straight from markdown.

#Fields

Document options, props or parameters. A ::field shows its name in monospace with the type as a badge, and the content beneath (or the description prop) as its body. Add required to flag it. Wrap fields in a ::field-group to list them with dividers. Use :br for a line break inside a field.

baserequiredstring

Storage prefix for cache keys.
Defaults to /cache.

maxAgenumber

Maximum age of a cache entry, in seconds.

swrboolean

Serve stale content while revalidating.

#Tabs

Group alternative content into tabs. Each direct child becomes a tab — set its label (or title) and an optional icon. Children can be ::tab blocks or ::div blocks carrying those props.

Content shown under the npm tab.

::tabs
  ::tab{label="npm" icon="i-lucide-package"}
  Content shown under the **npm** tab.
  ::
  ::tab{label="pnpm" icon="i-lucide-package"}
  Content shown under the **pnpm** tab.
  ::
::

#Steps

Render a vertical, numbered steps list. Each heading inside ::steps becomes a numbered step; the content beneath it belongs to that step. Numbering and the guide line are produced with CSS, so any headings work.

#Install the package

npm i undocs

#Run the dev server

npm run dev

#Ship your docs 🚀

::steps
#### Install the package

:pm-install{name="undocs"}

#### Run the dev server

:pm-run{script="dev"}

#### Ship your docs 🚀
::

Tip

Steps are also generated automatically from standard numbered lists — see Content Transform.

#Code Group

Group multiple code blocks into a single tabbed switcher. Each block's filename (in [brackets]) becomes its tab label, with a language icon inferred automatically.

{
  "scripts": {
    "dev": "undocs dev"
  }
}

::code-group
```json [package.json]
{
  "scripts": {
    "dev": "undocs dev"
  }
}
```

```ts [server/api/hello.get.ts]
export default defineEventHandler(() => {
  return { hello: "world" };
});
```
::

Note

Consecutive code blocks are grouped automatically — see Content Transform. Use ::code-group when you need to group blocks that are not adjacent.

#Code Tree

Display a set of files in a VS Code–style explorer: a folder/file tree on the left, the selected file's highlighted code on the right. Filenames containing / (e.g. [server/routes/index.ts]) nest into folders. Use defaultValue to pick the initially selected file and expandAll to expand every folder.

src

routes

index.ts

app.ts

package.json

export const app = createApp();

::code-tree{defaultValue="src/app.ts" expandAll}
```ts [package.json]
{
  "name": "my-app"
}
```

```ts [src/app.ts]
export const app = createApp();
```

```ts [src/routes/index.ts]
export default defineRoute(() => "Hello");
```
::

#Mermaid Graphs

  ```mermaid
  graph TD
  A[Getting Started] --> B[Components]
  A --> C[Content Transform]
  A --> D[Prose]

      click A "/guide"
      click B "/guide/components"
      click C "/guide/content-transformation"
      click D "/guide/prose"
  ```

#Prose Components

Undocs ships its own set of Prose components that render standard markdown — headings, links, tables, code blocks, and more — with sensible typography defaults. Just write markdown and they are applied automatically.