Getting started

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 .
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 className prop and styled function.

import { ChevronRight } from '@atom-learning/icons'
import { Heading, Icon, Text } from '@atom-learning/components'

const Component = () => (
  <article>
    <Heading className="mb-3">
      <Icon is={ChevronRight} className="mr-2" />
      This is a heading
    </Heading>
    <Text>This is a paragraph of text</Text>
  </article>
)

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.