Container

A container lets you center and constrain the width of your content.

Usage

<template>
  <UContainer>
    <Placeholder class="h-32" />
  </UContainer>
</template>

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

Slots

Slot Type
default

{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    container: {
      base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'
    }
  }
})