Introduction

Atom Learning’s component library is a collection of generic React components built using stitches, including components that cover layout, content, data collection, media and a host of other UI concerns

Getting started

Install the three packages to gain access to the components, icons and design tokens.

yarn add @atom-learning/components @atom-learning/icons @atom-learning/theme

All components are available as named exports from @atom-learning/components, and icons as named exports from @atom-learning/icons. The theme is consumed automatically by @atom-learning/components to provide the relevant token references for the css prop and styled function.

import { ChevronRight } from '@atom-learning/icons'
import { Box, Heading, Icon, Text } from '@atom-learning/components'
const Component = () => (
<Box as="article">
<Heading css={{ mb: '$3' }}>
<Icon is={ChevronRight} css={{ mr: '$2' }} />
This is a heading
</Heading>
<Text>This is a paragraph of text</Text>
</Box>
)

Refer to the individual component documentation for recommended usage and API references for each component, as well as the theme documentation to understand the design token usage.