https://github.com/dimslaev/atoms

lightweight ui library for react
https://github.com/dimslaev/atoms

atomic css-variables dark-mode light-mode react scss typescript ui

Last synced: 6 days ago
JSON representation

lightweight ui library for react

• Host: GitHub
• URL: https://github.com/dimslaev/atoms
• Owner: dimslaev
• License: other
• Created: 2024-05-26T13:46:37.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-12-16T12:18:33.000Z (18 days ago)
• Last Synced: 2024-12-16T13:29:06.987Z (18 days ago)
• Topics: atomic, css-variables, dark-mode, light-mode, react, scss, typescript, ui
• Language: TypeScript
• Homepage: https://ds-atoms.netlify.app/
• Size: 782 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://pictogrammers.com/library/mdi)

## 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)