When to use each

	Stack	Group	SimpleGrid	Flexible
Direction	vertical	horizontal	grid (2-D)	configurable
Equal-width children	❌	✅ (grow)	✅	❌
flex-wrap support	❌	✅	—	✅
Responsive props	❌	❌	✅ (cols)	✅ (all props)

Stack

Stack lines things up top-to-bottom. Use it any time you're building a form, a list, a set of cards, or any other vertical flow. It's the simplest of the four: one direction, no wrapping, just gap for spacing between items.

Group

Group lines things up left-to-right. It's a good fit for toolbars, header rows, and button clusters. Items wrap onto a new line by default. Use grow if you want every item to take up equal space, or justify="space-between" to push items to opposite ends of the row.

SimpleGrid

SimpleGrid arranges items into equal-width columns and reflows the column count at different screen sizes. This is great for card grids, stat panels, and thumbnail galleries. Set cols to a responsive object and the component handles the rest.

Flexible

Flexible is for anything Stack or Group can't do on their own, like switching between a stacked layout on mobile and a side-by-side layout on desktop, or reversing the order of items. Every prop (direction, gap, align, justify, wrap) can change per breakpoint.

Making layouts responsive

Stack and Group always keep the same direction; they don't change based on screen size.

SimpleGrid and Flexible can change based on screen size. Pass an object with the xs, sm, md, and lg keys instead of a single value and each size kicks in once the screen is at least that wide.

Here, SimpleGrid shows fewer columns on a narrow screen and more as it grows:

And here, Flexible switches direction and spacing as the screen widens:

Putting it all together

Most real pages combine several of these at once. This example nests a Flexible header (which stacks on mobile and lines up on desktop) with a Group of buttons, a SimpleGrid of cards, and a Stack inside each card.

Responsive visibility props

The hiddenFrom and visibleFrom props, available on all Abyss components, allow you to control the visibility of elements based on the screen size. Use hiddenFrom to hide an element starting from a specific breakpoint, and visibleFrom to show an element starting from a specific breakpoint.

As with the responsive props on the above components, the breakpoint values for hiddenFrom and visibleFrom follow the same pattern: xs, sm, md, and lg. Any breakpoint your theme defines works as well, including ones you add through createTheme. A value your theme does not define has no effect, and logs a warning in development.