svelte-kit-vice/web/routes/uix/components/container/+page.svelte

<script lang="ts">
	import { Container, type ContainerSize } from '$uix/eidos/components/container';

	const sizes: ContainerSize[] = ['sm', 'md', 'lg', 'xl', 'xxl', 'full'];
	let size = $state<ContainerSize>('lg');
</script>

<div data-uix-canvas-inner>
	<header>
		<div data-uix-eyebrow>Layout · Container</div>
		<h1 data-uix-page-title>Container</h1>
		<p data-uix-page-lede>
			Max-width content container. Caps content at the
			<code>--container-width-{'{size}'}</code> token and centers it.
		</p>
	</header>

	<section>
		<h2>Live example</h2>
		<div style="display: flex; gap: 8px; margin-bottom: 12px">
			{#each sizes as s (s)}
				<label style="display: inline-flex; gap: 4px; align-items: center">
					<input type="radio" name="size" value={s} bind:group={size} />
					<span><code>{s}</code></span>
				</label>
			{/each}
		</div>
		<Container
			{size}
			padding={4}
			style="background: var(--color-surface-1); border: 1px dashed var(--color-border); border-radius: 8px"
		>
			<p style="margin: 0">Container content (size: <code>{size}</code>).</p>
		</Container>
	</section>

	<section>
		<h2>Props</h2>
		<table>
			<thead>
				<tr>
					<th>Prop</th>
					<th>Default</th>
					<th>Notes</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code>size</code></td>
					<td>'xl'</td>
					<td>sm · md · lg · xl · xxl · full</td>
				</tr>
				<tr>
					<td><code>align</code></td>
					<td>'center'</td>
					<td>left · center · right</td>
				</tr>
				<tr>
					<td><code>paddingX</code></td>
					<td><code>var(--container-padding-inline)</code></td>
					<td>override per-instance</td>
				</tr>
				<tr>
					<td colspan="3"><em>… plus every <code>BoxProps</code> prop</em></td>
				</tr>
			</tbody>
		</table>
	</section>

	<section>
		<h2>Reference</h2>
		<ul>
			<li>
				<strong>radix-themes Container</strong> — same surface; sizes map to fixed
				pixel widths via tokens.
			</li>
			<li>
				<strong>chakra-ui Container</strong> — origin of the centered max-width pattern.
			</li>
		</ul>
	</section>
</div>