Stack

Headless Stack; covers CSS flexbox, CSS logical properties, Reka UI Primitive.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Stack } from "@vizejs/ui/stack";

Or copy the source into your project with vize lib pull stack (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Vertical stack of form actions nested with an inline row of buttons. -->
<script setup lang="ts">
import { Stack } from "@vizejs/ui/stack";
</script>

<template>
  <Stack as="section" gap="0.75rem">
    <h2>Account settings</h2>
    <p>Update how your profile appears to other members.</p>
    <Stack axis="inline" gap="0.5rem" justify="end" align="center">
      <button type="button">Cancel</button>
      <button type="submit">Save changes</button>
    </Stack>
  </Stack>
</template>

API

Stack

Source: src/families/layout/stack/stack.vue

Props

Slots

Exposed

Behavior

Normative state x input -> outcome table for stack.vue (@vizejs/ui/stack). Every row is proven by the named mounted-DOM or SSR test. A row without a passing test is a contract violation.

Props

Slots

Expose

Data Attributes

ARIA Attributes

Stack never sets role, aria-hidden, aria-label, aria-labelledby, or tabindex. Consumers may pass semantic attributes to the host when the chosen element requires them.

CSS Custom Properties

Parts