Layout component

Columns

Theme-aware, responsive columns component.

6 props1 slots0 eventsTheme readyResponsive

Interactive playground

Configure Columns

Change any prop and inspect the server-rendered component immediately.

Live preview

Component code

<Columns />

Live examples

Compare configurations and resize the browser to check responsive behavior.

Recommended

Balanced spacing, hierarchy, and content for the most common product workflow.

Live preview

Component usage.wrn

<Columns />

Dense UI

A tighter variation for dashboards, side panels, tables, and operational interfaces.

Live preview

Component usage.wrn

<Columns
  size="sm"
/>

Extended

A more expressive variation using additional data, stronger emphasis, and optional states.

Live preview

Component usage.wrn

<Columns
  size="lg"
/>

Component API

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`columns`	number	`2`	No
`gap`	string	`"md"`	No
`maxWidth`	string	`"xl"`	No
`class`	string	`""`	No