Space

Set the spacing between components.

Basic Usage

Set the spacing between components. Default direction is horizontal, spacing size is small (8px).

Basic Usage

Vertical Layout

Set direction to vertical for vertical layout.

Vertical Layout

Different Sizes

Set spacing size via size prop. Supported values are mini (4px), small (8px), medium (16px), large (24px), a custom number (px), or an array [horizontal, vertical].

Different Sizes

Alignment

Set cross-axis alignment via align prop.

Centered:

Box

Alignment

Justify

Set main-axis alignment via justify prop. Works best with fill prop enabled.

Justify

Wrap

Set whether to wrap automatically via wrap prop.

Wrap

Fill Container

Use the fill prop to make the space component fill the parent container width.

Fill Container

Spacer

Pass separator text via spacer prop, or customize via #spacer slot.

|

|

Spacer

Use in Nuxt

The Space component fully supports Nuxt 3/4 SSR rendering. The spacing layout is calculated on the server, ensuring the correct spacing effect is presented on the first screen without waiting for client-side activation.

Use in Nuxt

SSR Notes:

• ✅ Spacing direction (direction), size (size), and alignment (align) take effect on initial render
• ✅ Auto wrap (wrap) and fill supported in SSR
• ✅ Spacer content renders correctly on the server
• 💡 Dynamic spacing changes will be automatically completed through the reactive system after client-side activation

Nuxt Auto Import

After installing the @yh-ui/nuxt module, the YhSpace component is auto-registered, no manual import needed.

API

Props

Prop	Description	Type	Default
direction	Spacing direction	'horizontal' | 'vertical'	'horizontal'
size	Spacing size	'mini' | 'small' | 'medium' | 'large' | number | [SpaceSize, SpaceSize]	'small'
align	Cross-axis alignment	'start' | 'end' | 'center' | 'baseline' | 'stretch'	'center'
justify	Main-axis alignment	'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'	'start'
wrap	Whether to wrap (horizontal only)	boolean	false
fill	Whether to fill parent container	boolean	false
spacer	Spacer text	string | number	—
theme-overrides	Theme override variables	ComponentThemeVars	—

Slots

Slot Name	Description
default	Child elements in the space
spacer	Custom spacer content

Theme Variables

Variable	Description	Default
--yh-space-spacer-padding	Spacer padding	2px