Stack
A stack is a container that holds a collection of items in a specific order.
Installation
Usage
direction
Defines the layout direction of the stack. It can be either "row" or "column". Supports responsive breakpoints.
gap
Defines the space between the child elements. Accepts numbers or responsive breakpoints.
align
Controls how child elements are aligned along the cross axis (vertical in a row layout, horizontal in a column layout).
justify
Determines how the elements are distributed along the main axis.
wrap
Allows child elements to wrap onto multiple lines.
padding
Defines the padding around the stack. Supports fixed and responsive values.
margin
Applies margin to the stack element. Supports fixed and responsive values.
grow
Determines how much the stack should grow relative to its siblings.
zIndex
Controls the stack's stacking order on the page.
visibility
Sets the visibility of the stack. Can be "visible", "hidden", or "collapse".
alignContent
Defines how multiple rows of content are aligned along the cross axis.
Example
Combining Multiple Props. Demonstrates the use of multiple props in a stack.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Elements to be rendered inside the Stack. | |
| direction | Responsive<"row" | "column"> | "row" | Defines the layout direction of the stack. |
| gap | Responsive<number> | 0 | Specifies the space between child elements. |
| align | Responsive<AlignItems> | "stretch" | Aligns children along the cross axis. |
| justify | Responsive<JustifyContent> | "start" | Distributes children along the main axis. |
| wrap | Responsive<Wrap> | "nowrap" | Controls whether child elements should wrap. |
| grow | number | Determines how much the stack should grow. | |
| padding | Responsive<Spacing> | 0 | Applies padding to the stack. |
| margin | Responsive<Spacing> | 0 | Applies margin to the stack. |
| width | Responsive<number | string> | "auto" | Sets the width of the stack. |
| height | Responsive<number | string> | "auto" | Sets the height of the stack. |
| border | string | Defines the border for the stack. | |
| borderRadius | string | number | Specifies the border radius of the stack. | |
| backgroundColor | string | Sets the background color of the stack. | |
| maxWidth | string | number | Defines the maximum width of the stack. | |
| maxHeight | string | number | Defines the maximum height of the stack. | |
| alignContent | Responsive<AlignContent> | "stretch" | Aligns rows of content along the cross axis. |
| zIndex | number | Controls the stack's stacking order on the page. | |
| visibility | Responsive<Visibility> | "visible" | Controls the visibility of the stack. |
| className | string | Additional CSS classes to apply to the stack. | |
| style | CSSProperties | Inline styles to be applied to the stack. |