Layout primitives for React.

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

npm install @christiankaindl/lyts
Get started


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

Explore Stack


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

Explore Row


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

Explore Clamp


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 layout with with responsive defaults, but also fully customizable with standard CSS grid properties.

Explore Grid