Atoms

A light-weight React component library with light/dark mode support.

Features

• Simple and lightweight
• Pure, stateless components
• TypeScript support
• SCSS based styling
• Material Design Icons

Helper Classes

Components support these responsive helper classes:

• Margin: my, mx, mt, mb, ml, mr
• Padding: py, px, pt, pb, pl, pr
• Display: block, hidden, flex
• Flex: flex-row, flex-col, items-start, items-center, items-end, justify-start, justify-center, justify-end, justify-between
• Spacing: 1 (4px) through 8 (32px), auto

Responsive suffix example: sm:my-4, lg:hidden

Breakpoints

• initial: 0px
• xs: 540px
• sm: 768px
• md: 1025px
• lg: 1280px

Todo

• Component documentation
• Visual regression testing
• Additional components (Switch, Menu, Dropdown, File Upload, Table, Tooltip)