Container

The Container component is a flexible block element designed to control the spacing and structure of a web page. It provides a default padding setup but can be customized easily with your own classes.

Setup & Example

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:

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

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

Customization

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

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