layouts

Stack

Elements placing and spacing made easy

Features

Content placement made easy
Flex based
Fully controllable
Nestable

Links

Open in playground Open in Storybook View source

Anatomy

import { Stack } from "@wonderflow/react-components";

export default () => {
  return (
    <Stack
      columnGap={8}
      direction="row"
      hAlign="center"
      fill={false}
      wrap
    >
      <Select>...</Select>
      <Button>Confirm</Button>
    </Stack>
  );
};

tsx

API Reference

PROPERTY

TYPE

DEFAULT

rowGap

TokensTypes['space']

0

columnGap

TokensTypes['space']

0

inline

boolean

false

wrap

boolean

false

fill

boolean

true

vAlign

string

hAlign

string

hPadding

TokensTypes['space']

0

vPadding

TokensTypes['space']

0

direction

enum

"column"

maxWidth

string

as

enum

div