GkStack

Layout primitive: display: flex with direction, gap, alignment, and optional wrap.

When to use

Use as the default primitive for spacing and alignment instead of writing ad-hoc flex wrappers in app pages.

Live Examples

Column

Default flex column with token gap.

AB

vue

<script setup lang="ts">
import { GkStack } from 'god-kit/vue'
</script>

<template>
  <GkStack direction="column" :gap="3">
    <span>A</span>
    <span>B</span>
  </GkStack>
</template>

Row toolbar

Row direction with alignment, justify, and wrap.

FiltersActions

vue

<script setup lang="ts">
import { GkStack } from 'god-kit/vue'
</script>

<template>
  <GkStack direction="row" :gap="2" align="center" justify="space-between" wrap>
    <span>Filters</span>
    <span>Actions</span>
  </GkStack>
</template>

Semantic list

Use tag="ul" when the stack represents a real list.

• Accessible list item 1
• Accessible list item 2

vue

<script setup lang="ts">
import { GkStack } from 'god-kit/vue'
</script>

<template>
  <GkStack tag="ul" direction="column" :gap="1">
    <li>Accessible list item 1</li>
    <li>Accessible list item 2</li>
  </GkStack>
</template>

API

Props

Prop	Type	Default	Description
tag	string	'div'	Root element
direction	'row' | 'column'	'column'	Flex direction
gap	1–6	4	Spacing token step
align	'start' | 'center' | 'end' | 'stretch'	'stretch'	align-items
justify	'start' | 'center' | 'end' | 'space-between'	'start'	justify-content
wrap	boolean	false	flex-wrap

Slots

Slot	Description
default	Children

Examples

Each scenario under Live Examples includes a copyable Vue snippet (source is imported from the same SFC as the preview).

Accessibility notes

• Pick semantic tag values when stack wrappers represent lists, nav, or landmark groupings.
• Preserve source order; visual flex arrangement should not conflict with reading order.

Related components

• GkGrid
• GkContainer
• GkDivider
• GkButton