SKILLEX

This guide covers how to use the zen component library in your React applications.

Components

Layout

#### Box

Universal container with styling props:

<Box padding="4" margin="2" backgroundColor="surface-raised" borderRadius="lg">
  Content
</Box>

#### Flexbox, Row, Column

Flex layouts with gap, alignment, and justification:

<Row gap="4" justifyContent="space-between" alignItems="center">
  <Text>Left</Text>
  <Text>Right</Text>
</Row>

<Column gap="2">
  <Text>First</Text>
  <Text>Second</Text>
</Column>

<Flexbox direction="row" wrap="wrap" gap="2">
  {items.map(item => <Item key={item.id} />)}
</Flexbox>

#### Grid

CSS Grid layout:

<Grid columns="3" gap="4">
  <Box>1</Box>
  <Box>2</Box>
  <Box>3</Box>
</Grid>

Responsive Props

All layout props support responsive values:

<Box
  padding={{ base: '2', md: '4', lg: '6' }}
  display={{ base: 'none', md: 'block' }}
  width={{ base: 'full', md: '1/2', lg: '1/3' }}
>
  Responsive content
</Box>

Breakpoints: base, sm, md, lg, xl, 2xl

Buttons