Pre Component

pre-plain

Removes background, padding and border-radius. Uses current text color.

pre-plain  no background

pre-muted

Subtle semi-transparent border with background.

pre-muted  light border

pre-outline

Solid border matching the theme color.

pre-outline  solid border

pre-solid

Solid filled background with white text.

pre-solid  dark background

Primary / Secondary / Tertiary

pre-primary

pre-secondary

pre-tertiary

Status colors

pre-success

pre-error

pre-info

pre-warning

pre-caution

Highlight / Ink

pre-highlight

pre-ink

Title / Description / Caption / Disabled

pre-title

pre-description

pre-caption

pre-placeholder

pre-muted-*

pre-muted-primary

pre-muted-success

pre-muted-error

pre-outline-*

pre-outline-primary

pre-outline-success

pre-outline-error

pre-solid-*

pre-solid-primary

pre-solid-success

pre-solid-error

Custom colors (subtle)

pre-indigo-500

pre-green-500

pre-red-500

pre-blue-200

Custom colors (solid)

pre-solid-indigo-500

pre-solid-green-500

pre-solid-[#ff0000]

Custom colors (outline)

pre-outline-indigo-500

pre-outline-[#ff6b6b]

pre-outline-[blue]

Custom colors (muted)

pre-muted-indigo-500

pre-muted-[#ff6b6b]

Plain <pre> tag

function hello() {
    console.log("Hello World");
}
      

<pre> + <code><code> (recommended)

function hello() {
  console.log("Hello World");
}

<pre> + <code><code> with theme color

function hello(name) {
  return `Hello, ${name}!`;
}

console.log(hello("World"));

<pre> + <code><code> with error color

ERROR: Failed to connect to database
  at Database.connect (db.js:42)
  at Server.start (server.js:18)

<pre> + <code><code> solid variant

$ npm install beautify
$ npm run build
$ npm start

<pre> + <code><code> outline variant

[2026-06-13 17:00:00] INFO  Starting server...
[2026-06-13 17:00:01] INFO  Server listening on port 3000

<pre> muted variant with color

WARNING: Deprecated configuration option
Please update your config file.