Stack

Versatile utility for seamlessly handling flexbox layouts ensures smooth alignment and responsiveness.

Code Editor

Features

Flexible layout options for responsiveness.

Easy alignment and justification of items.

Precise sizing control.

Internal spacing and negative margin options.

Text alignment, background, border, and overflow control.

Flexible positioning options within parent container.

Customizes HTML tag for better accessibility and semantics.

Reference Links

A Complete Guide to Flexbox

Anatomy

Import all parts and combine them together.

import { Stack } from '@umrel/umrel';
import type { StackProps, StackItemProps } from '@umrel/umrel';

<Stack padding={6} borderColor="default">
        {children}
</Stack>

Flex Properties

The Stack component offers customizable flex properties like

direction

gap

, and

wrap

for creating responsive layouts.

Code Editor

Additionally, items within the Stack can be aligned vertically using the

align

property and horizontally using the

justify

property.

Code Editor

Dimension Properties

Control the size of the Stack component with properties like

width

height

minWidth

minHeight

maxWidth

, and

maxHeight

Code Editor

Moreover, you can maintain a specific aspect ratio for the Stack using the

aspectRatio

property, ensuring consistent width-to-height proportions.

Code Editor

Layout Properties

Customize spacing and negative margin using

padding

paddingTop

paddingBottom

paddingStart

paddingEnd

paddingInline

paddingBlock

, and

bleed

Code Editor

Adjust text alignment within the Stack using the

textAlign

property.

Code Editor

Styling Properties

Control background color, border color, and border radius properties using

backgroundColor

borderColor

, and

borderRadius

Code Editor

Position Properties

Position elements within parent containers using

position

inset

insetStart

insetEnd

insetTop

, and

insetBottom

properties.

Code Editor

Manage the stacking order of elements within the Stack using the

zIndex

property.

Code Editor

Column Layout

Stack allows for creating layouts with up to 12 columns. You can control the number of columns using the

columns

property within the

Stack.Item

component.

Code Editor

Responsive Properties

All properties within the Stack component can be customized for responsive layouts using the

xs

sm

md

lg

, and

xl

breakpoints if you pass an object within the property.

Code Editor

Accessibility

Key	Description
!	Customize the HTML tag using the `as` prop to ensure better accessibility and semantics.