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).

VStack

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

import { VStack } from 'layout-blocks'

prop	values	description	default
alignment	leading center trailing stretch	Controls the horizontal alignment of children	stretch

Screen

A special opinionated version of a vertical stack that assumes height and width of the viewport and also centers content both horizontally and vertically.

import { Screen } from 'layout-blocks'

HStack

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

import { HStack } from 'layout-blocks'

prop	values	description	default
alignment	top center bottom stretch	Controls the vertical alignment of children	stretch

Flex

Useful for controlling how much space an item takes up within a HStack, VStack, or Screen. Think of this as an abstraction over flex properties. Use it to control growing, shrinking, and initial size.

import { Flex } from 'layout-blocks'

prop	value	description	default
grow	string	Specifies the flex-grow property	1
shrink	string	Specifies the flex-shrink property	1
basis	string	Specifies the flex-basis property	0%

Spacer

Shorthand for <Flex /> with no props. Useful to insert space within stacks to push surrounding content away.

import { Spacer } from 'layout-blocks'

Breakout

Useful when you have a restricting container (maybe in width) and you need an element to stretch to the width of the viewport without flowing the element outside of the container (like a callout section).

import { Breakout } from 'layout-blocks'

Tiles

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 { Tiles } from 'layout-blocks'

prop	value	description	default
min	string	Minimum width of child before collapsing to one item per row	250px