Layout

Container

A centered layout wrapper with responsive horizontal padding and a max-width constraint. Default styles: w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8.

Basic Usage

Wrap page content inside a Container for consistent centering and responsive padding.

This content is inside a Container — centered with max-w-7xl and responsive padding.

<script lang="ts">
  import { Container } from 'sv5ui';
</script>

<Container>
  <h1>Page Title</h1>
  <p>Centered content with max-w-7xl and responsive padding.</p>
</Container>

Custom Element

Render as a semantic HTML element with the as prop.

Rendered as <main>

Rendered as <section>

Rendered as <article>

<Container as="main">Main content</Container>
<Container as="section">Section content</Container>
<Container as="article">Article content</Container>

Custom Width

Override the default max-w-7xl via the ui prop.

<Container ui={{ root: 'max-w-sm' }}>max-w-sm</Container>
<Container ui={{ root: 'max-w-xl' }}>max-w-xl</Container>
<Container ui={{ root: 'max-w-3xl' }}>max-w-3xl</Container>
<Container>max-w-7xl (default)</Container>

Page Layout

Typical usage as a page wrapper with vertical padding.

Page Title

Page content goes here with consistent layout.

<Container as="main" class="py-8">
  <h1 class="text-3xl font-bold">Page Title</h1>
  <p class="mt-4 text-on-surface/60">Page content here.</p>
</Container>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	Root container element — controls max-width, centering, padding

Props

Prop	Type	Default
`as`	`keyof HTMLElementTagNameMap`	`'div'`
`class`	`string`	`-`
`ui`	`Record<Slot, Class>`	`-`

Card Separator