Atoms

A super light-weight component library for React, featuring basic component blocks (atoms) with support for light/dark mode.

Motivation

• Simplicity and Lightweight: Designed for proof-of-concept projects and demos.
• Starter Point for Custom Systems: Easily refactorable and extendable for more specific needs and design systems.
• Component Purity: Components are pure, stateless, and effect-less, providing only the skin and variants.
• TypeScript Integration: Types extend native HTML element interfaces with minimal adjustments and custom props.

Inspiration

• MUI: Best experience but limited performance due to CSS-in-JS (Emotion).
• Radix UI: Great performance with CSS modules, but specific look & feel and less customizable.
• Bootstrap: Uses Sass mixins for consistency and maintainability, and a class names methodology inspired by modifier classes, but it is an overkill for simple projects and not originally designed for React.

Technologies

• TypeScript
• SCSS
• Material Design Icons

Helper Classes (Responsive)

All components use helper classes for the following properties:

• Margin: my, mx, mt, mb, ml, mr
• Padding: py, px, pt, pb, pl, pr
• Display: d-block, d-none, d-flex
• Flex Direction: dir-row, dir-col
• Flex Align: align-start, align-center, align-end
• Flex Justify: justify-start, justify-center, justify-end, justify-between
• Space: 1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 7 = 28px, 8 = 32px

And all helper classes can be suffixed with a responsive class:

• my-sm-4
• py-sm-4
• d-sm-none
• etc ...

Breakpoints

All breakpoints are min-width based.

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

Points for Further Improvement

• Component Documentation: Provide more detailed documentation for each component, including code and usage examples and customization options.
• Unit Testing: Add unit tests and visual regression tests using Cypress.
• Expand Library: Add more components, for example Drop-down, Menu, File Upload.