Layout primitives for React.

Build any layout quickly with well-designed composable components and convenient props.

npm install @christiankaindl/lyts
Get started

Stack

Vertically stacked elements, taking up the full width by default. Best nested within other Stacks.

Explore Stack

Row

Horizontally stacked components, with convenience wrap and expand props. By default, all children are vertically centered and horizontally start-aligned.

Explore Row

Clamp

Center-constrained component, supporting both horizontal and vertical clamping. Individual children can "opt out" of the clamping with the <Breakout> component.

Explore Clamp

Columns

Extrinsicly sized columns, filling the whole available space and wrapping all-at-once when the collapseAt value is reached. Space distribution can be customized with the ratio prop.

Explore Columns

Grid

Grid layout with with responsive defaults, but also fully customizable with standard CSS grid properties.

Explore Grid