StorybookGitHub

Container

Constrains content to a max width and centers it with responsive side padding.

Centered content that stays readable at 980px, no matter how wide the viewport gets.

Installation

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/container.json

Usage

Wrap page sections in a container to keep line lengths and layout width consistent. Choose a size variant (base, contained, thin, full) to match how wide the section should read.

<script setup lang="ts">
import { Container } from "@/components/ui/container";
</script>

<template>
  <Container size="thin">
    <p>Centered content with responsive gutters.</p>
  </Container>
</template>