Stack

Quickly layout components through Flexbox, support vertical and horizontal stacking, support custom spacing and wrap.

Import

MainIndividual
import { Stack, HStack, VStack } from 'rsuite';
  • Stack Use to stack elements horizontally or vertically.
  • HStack Use to stack elements horizontally. Version 5.65.0 or above
  • VStack Use to stack elements vertically. Version 5.65.0 or above

Examples

Horizontal

Vertical

Dividers

Spacing

Wrap

Interactive

Align Self

Grow

Responsive

Props

<Stack>

Extends the Box component.

Property Type(default) Description
as React.ElementType Custom component for the root element
classPrefix string ('stack') The prefix of the component CSS class
direction ResponsiveCSSProperty<'flexDirection'> The direction of the children in the stack
divider ReactNode Add an element between each child
wrap boolean Define whether the children are forced onto a single line

<HStack>

Extends the Stack component.

Property Type(default) Description
align ResponsiveCSSProperty<'alignItems'> ('center') Align items on the cross axis
reverse boolean Reverse the order of children

<VStack>

Extends the Stack component.

Property Type(default) Description
align ResponsiveCSSProperty<'alignItems'> ('flex-start') Align items on the cross axis
divider ReactNode Add an element between each child
reverse boolean Reverse the order of children

<Stack.Item>

Extends the Box component.

Type Definitions

ResponsiveCSSProperty 

import { CSSProperties } from 'react';

type ResponsiveValue<T> = {
  xs?: T; // Extra small devices (portrait phones, <576px)
  sm?: T; // Small devices (landscape phones, ≥576px)
  md?: T; // Medium devices (tablets, ≥768px)
  lg?: T; // Large devices (desktops, ≥992px)
  xl?: T; // Extra large devices (large desktops, ≥1200px)
  xxl?: T; // Extra extra large devices (larger desktops, ≥1400px)
};

type WithResponsive<T> = T | ResponsiveValue<T>;

type ResponsiveCSSProperty<T> = WithResponsive<CSSProperties[T]>;