The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Stack

Basic flexbox layout utility
<Stack>

  <Box backgroundColor="neutral9" height="8" width="8" />

  <Box backgroundColor="neutral9" height="8" width="8" />

</Stack>

Props
Link to this heading

<Stack>

import { Stack } from '@strum/react';
name
type
default
alignItems
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "baseline" | "stretch")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
as
"a" | "article" | "div" | "form" | "header" | "label" | "li" | "main" | "section" | "span"
div
direction
OptionalResponsiveValue<Direction>
vertical
flex
ConditionalStyle<Values<{ 1: "1 1 0%"; auto: "1 1 auto"; initial: "0 1 auto"; none: "none"; }, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
gap
ConditionalStyle<Values<{ auto: CSSVarFunction; 0: CSSVarFunction; 1: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
4
justifyContent
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
wrap
OptionalResponsiveObject<boolean>
true

Space
Link to this heading

<Stack space="8">

  <Box backgroundColor="neutral9" height="8" width="8" />

  <Box backgroundColor="neutral9" height="8" width="8" />

  <Box backgroundColor="neutral9" height="8" width="8" />

</Stack>

Direction
Link to this heading

<Stack space="8">

  <Stack>

    <Text>Vertical</Text>

    <Stack>

      <Box backgroundColor="neutral9" height="8" width="8" />

      <Box backgroundColor="neutral9" height="8" width="8" />

    </Stack>

  </Stack>

  <Stack>

    <Text>Horizontal</Text>

    <Stack direction="horizontal">

      <Box backgroundColor="neutral9" height="8" width="8" />

      <Box backgroundColor="neutral9" height="8" width="8" />

    </Stack>

  </Stack>

</Stack>

Align
Link to this heading

<Stack alignItems="center" direction="horizontal">

  <Box backgroundColor="neutral9" height="8" width="8" />

  <Box backgroundColor="neutral9" height="12" width="12" />

  <Box backgroundColor="neutral9" height="8" width="8" />

</Stack>

Justify
Link to this heading

<Stack direction="horizontal" justifyContent="space-between">

  <Box backgroundColor="neutral9" height="8" width="8" />

  <Box backgroundColor="neutral9" height="8" width="8" />

  <Box backgroundColor="neutral9" height="8" width="8" />

</Stack>

Wrap
Link to this heading

Stacks wrap by default, but you can force them to nowrap.

<Stack direction="horizontal" wrap={false}>

  <Box backgroundColor="neutral9" height="8" width="8" />

  <Box backgroundColor="neutral9" height="8" width="12" />

  <Box backgroundColor="neutral9" height="8" width="8" />

  <Box backgroundColor="neutral9" height="8" width="12" />

  <Box backgroundColor="neutral9" height="8" width="8" />

  <Box backgroundColor="neutral9" height="8" width="12" />

  <Box backgroundColor="neutral9" height="8" width="8" />

</Stack>
Edit on GitHub