Components

This page showcases the reusable Vue components available to all contributors writing documentation pages. Import is not required — every component is registered globally and can be used directly in any .md file.

---

Callout

A highlighted callout box with a colored left border. Use it to draw attention to important information.

Prop: type — note (default) | warning | danger | tip

Usage:

<Callout type="note">
This is an informational note.
</Callout>

<Callout type="tip">
A helpful tip for readers.
</Callout>

<Callout type="warning">
Something to be careful about.
</Callout>

<Callout type="danger">
This action is irreversible.
</Callout>

Preview:

ℹ

This is an informational note. Use it for general guidance or context.

✓

A helpful tip for readers. Use it to highlight best practices.

⚠

Something to be careful about. Use it for gotchas or non-obvious behavior.

✕

This action is irreversible. Use it for destructive or security-sensitive steps.

---

Steps

A numbered steps list with styled circular counters. Place standard <li> elements inside.

Usage:

<Steps>
  <li>Clone the repository.</li>
  <li>Install dependencies with <code>pnpm install</code>.</li>
  <li>Start the dev server with <code>pnpm dev</code>.</li>
</Steps>

Preview:

1. Clone the repository.
2. Install dependencies with pnpm install.
3. Start the dev server with pnpm dev.

---

Code group

VitePress has a built-in code-group container for showing the same command in multiple package managers or environments. No custom component needed.

Usage:

::: code-group

```bash [npm]
npm install
```

```bash [pnpm]
pnpm install
```

```bash [yarn]
yarn install
```

:::

Preview:

npm

npm install

pnpm

pnpm install

yarn

yarn install

See the VitePress docs on code groups for full details.

---

SettingTable

A structured table for documenting configuration options or settings objects.

Prop: settings — array of { name, type, default, description } objects.

Usage:

<SettingTable :settings="[
  { name: 'host', type: 'string', default: 'localhost', description: 'Database host address.' },
  { name: 'port', type: 'number', default: '5432', description: 'Database port.' },
  { name: 'ssl', type: 'boolean', default: 'false', description: 'Enable SSL connections.' },
  { name: 'poolSize', type: 'number', default: '10', description: 'Connection pool size.' },
]" />

Preview:

Name	Type	Default	Description
host	string	localhost	Database host address.
port	number	5432	Database port.
ssl	boolean	false	Enable SSL connections.
poolSize	number	10	Connection pool size.

---

Label

An inline badge for tagging headings, settings, or features.

Props:

• type — admin | new | local | sso
• version (optional) — when type="new", renders "New in <version>"

Usage:

Server Settings <Label type="admin" />

Dark mode <Label type="new" version="2.1" />

Runs on your machine <Label type="local" />

Single sign-on required <Label type="sso" />

Preview:

Server Settings Admin

Dark mode New in 2.1

Runs on your machine Local

Single sign-on required SSO