No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Stack

The Stack component is a simple wrapper around the flexbox layout model that allows to easily create responsive and flexible layouts. It provides a simple and intuitive way to align and distribute items within a container either horizontally or vertically.

Usage

When to use

  • For creating responsive and flexible layouts that can adapt to different screen sizes and orientations.
  • When needing a simple and intuitive way to align and distribute items within a container either horizontally or vertically.
  • To easily reorder and rearrange elements without changing the HTML structure.
  • When aiming to create equal height columns.
  • To create a grid-like structure with automatic wrapping and sizing of items based on the available space.

When not to use

  • For complex multi-dimensional layouts with intricate requirements that are better suited for CSS frameworks or grid systems.
  • When precise control over spacing and positioning of elements is necessary.

Props

NameDescriptionDefault
gap
ResponsiveProp<ThemeSpacingTokens>
-
alignItems
ResponsiveProp<AlignItems>
-
justifyContent
ResponsiveProp<JustifyContent>
-
direction
ResponsiveProp<Direction>
-
wrap
ResponsiveProp<Wrap>
-
grow
Sets the property flex-grow
ResponsiveProp<number>
-
shrink
Sets the property flex-shrink
ResponsiveProp<number>
-
basis
Sets the property flex-basis
ResponsiveProp<FlexBasis>
-
flex
Sets the property flex
ResponsiveProp<Flex>
-
minWidth
ResponsiveProp<MinWidth<number>>
-
maxWidth
ResponsiveProp<MaxWidth<number>>
-
width
ResponsiveProp<Width<number>>
-
minHeight
ResponsiveProp<MinHeight<number>>
-
maxHeight
ResponsiveProp<MaxHeight<number>>
-
height
ResponsiveProp<Height<number>>
-