Stack | Qasa Design System

Stack is deprecated. It is to be replaced with html elements and Tailwind classes. For example <div className="flex flex-col gap-10"> would be equal to <Stack gap="10x">.

One

Two

Three

Examples

Dividers between child elements

Add a divider between child elements by passing a component to the divider prop.

Uno

Dos

Tres

API Reference

Prop	Default	Description
`direction?`	`'column'`	`ResponsiveProp<FlexDirection>` The direction of the stack.
`justifyContent?`	-	`ResponsiveProp<JustifyContent>` The CSS `justify-content` property. Controls the alignment of items on the main axis.
`alignItems?`	-	`ResponsiveProp<AlignItems>` The CSS `align-items` property. Controls the alignment of items on the cross axis.
`wrap?`	`'nowrap'`	`FlexWrap` The CSS `flex-wrap` property. Controls whether children can wrap onto multiple lines.
`gap?`	-	`ResponsiveProp<"0x" \| "1x" \| "2x" \| "3x" \| "4x" \| "5x" \| "6x" \| "8x" \| "10x" \| "12x" \| "14x" \| "16x" \| "20x" \| "24x">` The gap between each child element.
`divider?`	-	`ReactNode` A divider element to be rendered between each child element. Note: For the divider to be rendered, the child elements can't be loose strings or numbers. Wrap them in a `div` or other element.