Stack

The Stack component arranges its children in a vertical or horizontal layout.

It supports customizable spacing and optional dividers between elements.

direction

spacing

divider

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

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

Custom direction

You can set the direction prop responsively based on breakpoints.
For example, use a column layout on xs and sm, and switch to a row layout on md and above.

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

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

Custom divider

The divider prop accepts either a boolean—to render the default divider—or a ReactNode for a custom divider element.

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

Snackbar Provider Switch