Stack

Docs

Stack

A container component for arranging elements vertically or horizontally.

Installation

pnpm dlx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/stack.json"

import { Stack } from "<path-to-ui-components>/stack";

<Stack>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Stack>

Name	Type	Description
justifyContent	`start`, `center`, `end`, `between`, `evenly`, `around` or `stretch`	Determines the alignment of flex items along the container's main axis. For more details on Tailwind utilities for each value, refer to the doc.
alignItems	`start`, `center`, `end`, `baseline` or `stretch`	Defines the alignment of flex items along the container's cross axis. For more details on Tailwind utilities for each value, refer to the doc.
direction	`row`, `rowReverse`, `column` or `columnReverse`	Determines the direction of flex items. For more details on Tailwind utilities for each value, refer to the doc.
divider	`boolean`	Add borders between items. For detailed information about the associated Tailwind utilities, please refer to the doc.

The default value of direction is column.

On This Page