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

<script lang="ts">
	import { Stack } from '$uix/eidos/components/stack';
	import { Box } from '$uix/eidos/components/box';

	const cellStyle = 'background: var(--color-surface-2); border-radius: 4px; padding: 8px 12px';
</script>

<div data-uix-canvas-inner>
	<header>
		<div data-uix-eyebrow>Layout · Stack</div>
		<h1 data-uix-page-title>Stack</h1>
		<p data-uix-page-lede>
			Vertical (default) or horizontal stack. Thin alias over Flex with
			<code>direction='column'</code>.
		</p>
	</header>

	<section>
		<h2>Vertical (default)</h2>
		<Stack
			gap={2}
			padding={4}
			style="background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 8px"
		>
			<Box style={cellStyle}>Row 1</Box>
			<Box style={cellStyle}>Row 2</Box>
			<Box style={cellStyle}>Row 3</Box>
		</Stack>
	</section>

	<section>
		<h2>Horizontal</h2>
		<Stack
			direction="row"
			gap={2}
			padding={4}
			align="center"
			style="background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 8px"
		>
			<Box style={cellStyle}>A</Box>
			<Box style={cellStyle}>B</Box>
			<Box style={cellStyle}>C</Box>
		</Stack>
	</section>

	<section>
		<h2>Props</h2>
		<table>
			<thead>
				<tr>
					<th>Prop</th>
					<th>Default</th>
					<th>Notes</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code>direction</code></td>
					<td>'column'</td>
					<td>row · row-reverse · column · column-reverse</td>
				</tr>
				<tr>
					<td><code>gap</code></td>
					<td>—</td>
					<td>maps to <code>var(--space-N)</code> when numeric</td>
				</tr>
				<tr>
					<td><code>align</code> / <code>justify</code></td>
					<td>—</td>
					<td>inherited from Flex</td>
				</tr>
				<tr>
					<td colspan="3"><em>… plus FlexProps minus <code>wrap</code>, <code>inline</code>, <code>rowGap</code>, <code>columnGap</code></em></td>
				</tr>
			</tbody>
		</table>
	</section>

	<section>
		<h2>Reference</h2>
		<ul>
			<li>
				<strong>chakra-ui Stack / VStack / HStack</strong> — same intent; we collapse
				the three into one component with a <code>direction</code> prop.
			</li>
			<li>
				<strong>radix-themes Flex direction='column'</strong> — equivalent shape; Stack
				is the named shortcut.
			</li>
		</ul>
	</section>
</div>