Base

Class	Description
.ui-box	Base class

P-1

Class	Description
.ui-box--p-1	p-1

P-2

Class	Description
.ui-box--p-2	p-2

P-3

Class	Description
.ui-box--p-3	p-3

P-4

Class	Description
.ui-box--p-4	p-4

Bg-subtle

Class	Description
.ui-box--bg-subtle	bg-subtle

Bg-muted

Class	Description
.ui-box--bg-muted	bg-muted

Rounded

Class	Description
.ui-box--rounded	rounded

Rounded-lg

Class	Description
.ui-box--rounded-lg	rounded-lg

<div class="ui-box ui-box--p-1 ui-box--bg-subtle">Padding 1</div>
<div class="ui-box ui-box--p-2 ui-box--bg-subtle">Padding 2</div>
<div class="ui-box ui-box--p-3 ui-box--bg-subtle">Padding 3</div>
<div class="ui-box ui-box--p-4 ui-box--bg-subtle">Padding 4</div>

<div class="ui-box ui-box--p-2 ui-box--bg-subtle">Subtle background</div>
<div class="ui-box ui-box--p-2 ui-box--bg-muted">Muted background</div>

<div class="ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded">Rounded</div>
<div class="ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded-lg">Rounded lg</div>

<div class="ui-box" style="--box-padding: var(--ui-space-3); --box-bg: var(--ui-color-primary); --box-color: white; --box-radius: var(--ui-radius-lg);">Custom box</div>