https://github.com/react-earth/react-atom
Build application atomic with you design.
https://github.com/react-earth/react-atom
atomic design emotion react styled-components ui
Last synced: 7 months ago
JSON representation
Build application atomic with you design.
- Host: GitHub
- URL: https://github.com/react-earth/react-atom
- Owner: react-earth
- License: mit
- Created: 2022-03-27T08:23:41.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-07T10:42:58.000Z (over 1 year ago)
- Last Synced: 2025-10-05T15:33:26.174Z (7 months ago)
- Topics: atomic, design, emotion, react, styled-components, ui
- Language: TypeScript
- Homepage:
- Size: 1.1 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## Packages 📦
- [react-atom-core](https://www.npmjs.com/package/react-atom-core): convert react atomically props to styles.
- [react-atom-emotion](https://www.npmjs.com/package/react-atom-emotion): react atom for [emotion](https://github.com/emotion-js/emotion).
- [react-atom-styled](https://www.npmjs.com/package/react-atom-styled): react atom for [styled-components](https://github.com/styled-components/styled-components).
- [react-atom-tokens](https://www.npmjs.com/package/react-atom-tokens): react atom design tokens, such as MUI, Chakra UI, Ant Design, etc.
## Quick Features 🥳
- Build application atomically with your design tokens.
- Supported emotion and styled-components.
- Built with typescript, provide type protection, code autocompletion, make your app robust.
## How to use 📖
### Install package
```sh
# use emotion
npm install @emotion/react @emotion/styled react-atom-emotion
# use styled-components
npm install styled-components react-atom-styled
```
### Define your design tokens
Create a file named `designTokens.ts` in your project.
```typescript
export const designTokens = {
spacing: {
'1x': '8px',
'2x': '16px',
'4x': '32px',
full: '100%',
fullW: '100vw',
fullH: '100vh',
},
color: {
primary: '#4CB074',
background: '#ECF5F0',
},
fontSize: {
xxl: '32px',
xl: '38px',
lg: '24px',
md: '16px',
sm: '14px',
xs: '12px',
},
};
```
### Create Atom component
Create a file named `Atom.tsx` in your project.
```tsx
// You also can use react-atom-styled here
import atom from 'react-atom-emotion';
import { designTokens } from './designTokens';
export const Atom = atom(designTokens);
```
### Build application atomically with your design tokens
```tsx
import { Atom } from './Atom';
export default function App() {
return (
Hello, React Atom!
Build application atomically with your design!
);
}
```
Click [here](https://codesandbox.io/s/react-atom-demo-xj9dt7?file=/src/App.tsx) to try it by yourself.