Container

Start by importing the Container component from the theui-svelte library. To use the Container component with its default settings, simply include it in your Svelte template:

<script>
  import { Container } from "theui-svelte";
</script>

<Container>
  <!-- Content -->
</Container>

For customization, you can add your own classes to adjust the spacing, alignment, or other styles:

<Container class="bg-gray-100 py-8 px-0">
  <!-- Content -->
</Container>

The Container renders a <section> element. Any other attributes you add, like id or aria-label, are passed to it directly.

A Container grows to the width of its parent and stops at --max-width, which is 1280px out of the box. The Navbar reads the same variable for its inner row, so the brand and the links line up with the content below them. Change the one variable and both follow.

It is a plain CSS custom property on :root, not a Tailwind theme value, so you set it in your own CSS with no @theme block. Your stylesheet comes after theui-svelte/style, so your value is the one that applies.

@import 'tailwindcss';
@import 'theui-svelte/style';

:root {
  --max-width: 1400px;
}

Because it is inherited, you can also set it on one part of the page. Anything inside picks up the new width, and the rest of the site keeps the old one, which is how you give a single section room to breathe:

<div style="--max-width: 1600px">
  <Container>
    <!-- This one is wider than the rest of the page -->
  </Container>
</div>

For a one-off, a class is simpler than the variable: <Container class="max-w-4xl"> overrides the width for that container alone, since the class comes last.

Container renders a <section>. Left unnamed, that is treated as an ordinary block and changes nothing for assistive technology, which is what you want for a container that only sets width and spacing.

Add aria-label or aria-labelledby and it becomes a region landmark, listed alongside the banner, navigation and main areas of the page. Do that for an area people may want to jump straight to, and leave the rest unnamed: a page where everything is a landmark is as hard to move around as one with none.

<Container aria-labelledby="pricing-heading">
  <h2 id="pricing-heading">Pricing</h2>
  <!-- Content -->
</Container>

A Container is not a replacement for the landmarks a page needs anyway. Keep your <header>, <nav>, <main> and <footer>, and put containers inside them.