Box

Generic container with optional padding and glass background.

Jump to API reference

Import

Vue
import { UiBox } from '@ziyarago/ui/vue'

Padded

A box with 16px padding.

Vue
<UiBox
  :p="16"
  :style="{ border: '1px solid var(--zg-stroke)', borderRadius: '12px' }"
>
  <UiText>
    A box with 16px padding.
  </UiText>
</UiBox>

Glass

Glass surface

Blurred background with a rim light.

Vue
<UiBox :p="20" glass :style="{ borderRadius: '20px' }">
  <UiHeading :level="3" size="sm">
    Glass surface
  </UiHeading>
  <UiText tone="muted">
    Blurred background with a rim light.
  </UiText>
</UiBox>

API reference

Generic container with optional padding and glass background.

Props

PropType and valuesDefaultDescription
pnumber | string—Padding. Numbers are pixels, strings any CSS value.
glassbooleanfalseApplies the glass surface style.
asstring'div'HTML tag to render.
styleRecord<string, string | number>—Inline styles merged over the component styles.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultBox content.