---
layout: '@/layouts/Doc.astro'
title: Pre
---

import Example from '@/components/Example.astro'
import preStyle from '@webtui/css/components/pre.css?raw'
import badgeStyle from '@webtui/css/components/badge.css?raw'
import boxStyle from '@webtui/css/utils/box.css?raw'

Displays preformatted text

<Example stylesheets={[preStyle]} html="<pre>This is preformatted text</pre>" />

## Import

```css
@import '@webtui/css/components/pre.css';
```

## Usage

```html
<pre>This is preformatted text</pre>
```

## Examples

### Sizing

<Example
    stylesheets={[preStyle]}
    css={`
        body {
            display: flex;
            flex-direction: column;
            gap: 1lh;
        }
    `}
    html={`<pre size-="small">Small pre</pre>
<pre>Default pre</pre>
<pre size-="large">Large pre</pre>`}
/>

## Reference

### Properties

- `--pre-background`: Background color of the pre element

```css
#my-pre {
    --pre-background: var(--background1);
}
```

### Extending

To extend the Pre stylesheet, define a CSS rule on the `components` layer

```css
@layer components {
    pre,
    [is-~='pre'] {
        &[size-='thicc'] {
            height: 3lh;
            padding: 1lh 8ch;
        }

        /* ... */
    }
}
```

### Scope

- All `<pre>` elements
- All elements with the `is-~="pre"` selector

```css
pre,
[is-~='pre'] {
    /* ... */
}
```
