react-earth/react-atom

Build application atomic with you design.

Packages 📦

• react-atom-core: convert react atomically props to styles.
• react-atom-emotion: react atom for emotion.
• react-atom-styled: react atom for styled-components.
• 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

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

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.

// 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

import { Atom } from './Atom';

export default function App() {
  return (
    <Atom
      w="fullW"
      h="fullH"
      flex
      flexDirection="column"
      flexJustify="center"
      flexAlign="center"
      gap="1x"
      c="primary"
      bg="background"
    >
      <Atom fontSize="xxl" fontWeight="bold">
        Hello, React Atom!
      </Atom>
      <Atom fontSize="md">Build application atomically with your design!</Atom>
    </Atom>
  );
}

Click here to try it by yourself.