Skip to content
Foundation / Layout

Group

server23.75 kB
@stellaria/nebula-webGroupProps

Preview

Props

8
PropTypeDefault

children

ReactNode

—

className

Composes with the classes `Box` computes instead of replacing them.

string

—

component

The element it paints.

(ElementType & C)"div"

gap

Gap between children, horizontal and vertical once they wrap.

SpacingValue"md"

grow

Makes every child take the same share of the width, whatever its content.

booleanfalse

preventGrowOverflow

With `grow`, caps each child so a long one cannot push the row past its container. Turn it off only when you want the row to overflow on purpose. Does nothing without `grow`.

booleantrue

reveal

Animates the element in when it first scrolls into view. `true` takes the catalogue entrance; an object tunes it — `preset`, `distance`, `spring`, `duration`, `once`, `amount`, `rootMargin` and `index` for a stagger. It lives here rather than on each surface so that `Card`, `Paper`, `GradientBorder`, `Section` and anything else built on `Box` inherit one implementation. Without it `Box` stays a server component; with it the root swaps for a client shell and the children keep rendering on the server. The entrance is a CSS transition, not a JavaScript animation: it is the only motion in the catalogue that fires WHILE the user scrolls, and the compositor should own it.

boolean | UseRevealOptions

—

wrap

Wraps children that do not fit onto the next line instead of shrinking them.

booleantrue

Also accepts

On top of its own props, this component forwards these groups.

Style props · 125