Stack

A Stack component allows the organization of its children in a vertical or horizontal layout. It also allows the specification of the spacing between the stack elements and the addition of a divider between the elements.

Source Code

uikit-react-core

direction

spacing

divider

<HvStack 
  direction="row"
  spacing="sm"
  divider={false}
>
  <No Display Name className="bg-atmo2">
    1
  </No Display Name>
  <No Display Name className="bg-atmo2">
    2
  </No Display Name>
  <No Display Name className="bg-atmo2">
    3
  </No Display Name>
  <No Display Name className="bg-atmo2">
    4
  </No Display Name>
</HvStack>

<HvStack 
  direction="row"
  spacing="sm"
  divider={false}
>
  <No Display Name className="bg-atmo2">
    1
  </No Display Name>
  <No Display Name className="bg-atmo2">
    2
  </No Display Name>
  <No Display Name className="bg-atmo2">
    3
  </No Display Name>
  <No Display Name className="bg-atmo2">
    4
  </No Display Name>
</HvStack>

Custom direction

You can set the direction prop to different values depending on the breakpoint you’re currently on. The example below shows a stack in a column format for breakpoints xs and sm, and in a row format for breakpoints md and above.

<HvStack direction={{ xs: "column", md: "row" }} spacing="xs" divider={false}>
  {[...Array(4).keys()].map((index) => (
    <HvPanel className="bg-atmo2">{index + 1}</HvPanel>
  ))}
</HvStack>

<HvStack direction={{ xs: "column", md: "row" }} spacing="xs" divider={false}>
  {[...Array(4).keys()].map((index) => (
    <HvPanel className="bg-atmo2">{index + 1}</HvPanel>
  ))}
</HvStack>

Custom divider

The divider property can be a boolean (rendering the default divider), or a ReactNode to use as a custom divider.

<HvStack direction="row" className="flex items-center" divider={<DropRight />}>
  {[...Array(4).keys()].map((index) => (
    <HvPanel className="rounded-full size-48px grid place-content-center bg-atmo2">
      {index + 1}
    </HvPanel>
  ))}
</HvStack>

<HvStack direction="row" className="flex items-center" divider={<DropRight />}>
  {[...Array(4).keys()].map((index) => (
    <HvPanel className="rounded-full size-48px grid place-content-center bg-atmo2">
      {index + 1}
    </HvPanel>
  ))}
</HvStack>

Snackbar Switch