Layout component

Container

Theme-aware, responsive container component.

6 props1 slots0 eventsTheme readyResponsive

Interactive playground

Configure Container

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

Live preview

Composable content area.

Component code

<Container>
  <!-- Add default slot content here -->
</Container>

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

Composable content area.

Component usage.wrn

<Container>
  <!-- Add default slot content here -->
</Container>

Dense UI

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

Live preview

Composable content area.

Component usage.wrn

<Container
  size="sm">
  <!-- Add default slot content here -->
</Container>

Extended

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

Live preview

Rich supporting content with additional context.

Component usage.wrn

<Container
  size="lg">
  <!-- Add default slot content here -->
</Container>

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