Docs
Stack
Stack
A container component for arranging elements vertically or horizontally.
01
02
03
04
Installation
pnpm dlx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/stack.json"
Usage
import { Stack } from "<path-to-ui-components>/stack";<Stack>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack>Props
| 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.
Examples
Align Items
01
02
03
Direction
01
02
03
Divider
01
02
03
Justify Content
01
02
03