Stack
A layout component for arranging elements vertically or horizontally, based on Flexbox. It supports responsive layouts and global theme configuration via BrConfigProvider.
Basic Usage
Vertical Stack
By default, BrStack arranges elements vertically (flex-col).
Item 1
Item 2
Item 3
Example
Horizontal Stack & Alignment
Use direction="horizontal" for horizontal arrangement, and control alignment with align and justify.
1
2
3
Example
Responsive & Custom Styles
BrStack supports responsive properties (object syntax) and style customization (radius, shadow, padding).
Item 1
Item 2
Item 3
Example
Polymorphic Rendering
Use the as prop to change the underlying HTML element of the Stack, such as ul, li, or section for semantic markup.
- Item 1 (rendered as li)
- Item 2 (rendered as li)
- Item 3 (rendered as li)
Section Title
This entire stack is rendered as a <section> element.
Example
Theming
Global base styles for Stack (like border radius) can be controlled via BrConfigProvider.
Default Theme (Radius: 0.5rem)
Custom Theme (Radius: 1.0rem)
Example
API
| Prop | Description | Type | Default |
|---|---|---|---|
| as | HTML tag to render | string | div |
| direction | Layout direction | 'vertical' | 'horizontal' | ResponsiveProp | 'vertical' |
| gap | Spacing between items | string | number | ResponsiveProp | - |
| align | Cross-axis alignment | 'start' | 'end' | 'center' | 'baseline' | 'stretch' | ResponsiveProp | 'stretch' |
| justify | Main-axis alignment | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | ResponsiveProp | 'start' |
| wrap | Wrap behavior | 'nowrap' | 'wrap' | 'wrap-reverse' | ResponsiveProp | 'nowrap' |
| padding | Inner padding | string | number | ResponsiveProp | - |
| radius | Border radius | string | number | ResponsiveProp | - |
| shadow | Box shadow | string | ResponsiveProp | - |