Layout Blocks

Reusable layout components for your React project

npm i layout-blocks

Components

All layout components support an as prop to define the html element you want the block to render as (defaults to div).

Horizontally centers children up to a max width. Can also define side gutters for padding.

import { Center } from 'layout-blocks'

prop	values	description	default
max	string	Unit of space used to define the max width of the container. The container will have auto inline margin applied when this width is reached.	`0`
gutter	string	Controls the inline padding of the container	`0`
centerChildren	boolean	Specifies if the container should also center children if they do not meet the `max` width	`false`

Flex row container that wraps to flow items to the next line. Useful for button groups and pill boxes.

import { Cluster } from 'layout-blocks'

prop	values	description	default
align	`flex-start` `center` `flex-end`	Controls vertical axis alignment	`center`
justify	`flex-start` `center` `flex-end` `space-around` `space-between` `space-evenly`	Controls horizontal axis alignment	`flex-start`
spacing	string	Unit of space used to separate cluster items	`1rem`

Renders children in a vertical stack with a prop to control horizontal alignment.

import { VStack } from 'layout-blocks'

prop	values	description	default
spacing	string	Unit of space used to separate stack items	`0`
alignment	`leading` `center` `trailing`	Controls the horizontal alignment of children	`center`

Renders children in a horizontal stack with a prop to control vertical alignment.

import { HStack } from 'layout-blocks'

prop	values	description	default
spacing	string	Unit of space used to separate stack items	`0`
alignment	`top` `center` `bottom`	Controls the vertical alignment of children	`center`

Flex container abstraction used by both VStack and HStack

import { Flex } from 'layout-blocks'

prop	value	description	default
align	`flex-start` `center` `flex-end`	Controls cross axis alignment	`center`
justify	`flex-start` `center` `flex-end` `space-around` `space-between` `space-evenly`	Controls main axis alignment	`center`
direction	`row` `column`	Direction flow children	`row`

Useful to insert space within stacks to push surrounding content away.

import { Spacer } from 'layout-blocks'

Renders children in a grid with a prop to control the minimum width before rendering each child in a row of it's own.

import { Grid } from 'layout-blocks'

prop	value	description	default
spacing	string	Unit of space used to separate grid items	`1rem`
min	string	Minimum width of child before collapsing to one item per row	`250px`