Skip to Content
DocsCloud UI PrimitiveStack

Stack

Compose elements and components in a vertical flex container with consistent spacing.

Import

import { Stack } from '@tidbcloud/uikit'

Basic Usage

import { Stack, Button } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Stack>
      <Button variant="default">First</Button>
      <Button variant="default">Second</Button>
      <Button variant="default">Third</Button>
    </Stack>
  )
}

With Gap and Alignment

import { Stack, Button } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Stack h={300} bg="var(--mantine-color-body)" align="center" justify="center" gap="md">
      <Button variant="default">1</Button>
      <Button variant="default">2</Button>
      <Button variant="default">3</Button>
    </Stack>
  )
}
  • Use Group for horizontal flex containers
  • Use Flex for full control over flex container properties

Key Props

PropTypeDescription
gapMantineSpacingGap between children (theme.spacing key or CSS value)
alignAlignItemsControls align-items CSS property
justifyJustifyContentControls justify-content CSS property
Last updated on
SpoilerStepper