Plastic Design System

Getting started

GitHub

npm

Layout

Box

Stack

Inline

Space

Center

Row

Levee

Card

Content

Text

Span

Icon

Tag

Chip

Controls

Link

TextLink

TextField

Button

Select

Providers

PlasticProvider

LightOnDark

TextProvider

Hooks

useTheme

Inline

For horizontal layouts that should wrap when necessary:

<Inline>
  <Box w="lg" h="lg" bg="red200" />
  <Box w="lg" h="lg" bg="orange200" />
  <Box w="lg" h="lg" bg="yellow200" />
  <Box w="lg" h="lg" bg="green200" />
</Inline>
<Inline w="3xl" bg="gray600">
  <Box w="lg" h="lg" bg="red200" />
  <Box w="lg" h="lg" bg="orange200" />
  <Box w="lg" h="lg" bg="yellow200" />
  <Box w="lg" h="lg" bg="green200" />
</Inline>