{"id":25875620,"url":"https://github.com/react-earth/react-atom","last_synced_at":"2025-10-14T10:02:07.629Z","repository":{"id":41039680,"uuid":"474577162","full_name":"react-earth/react-atom","owner":"react-earth","description":"Build application atomic with you design.","archived":false,"fork":false,"pushed_at":"2024-09-07T10:42:58.000Z","size":1156,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T15:33:26.174Z","etag":null,"topics":["atomic","design","emotion","react","styled-components","ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-earth.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-27T08:23:41.000Z","updated_at":"2024-09-07T10:43:02.000Z","dependencies_parsed_at":"2022-09-05T16:41:22.817Z","dependency_job_id":"5800ea97-a43c-482e-98d9-983323750b9b","html_url":"https://github.com/react-earth/react-atom","commit_stats":{"total_commits":139,"total_committers":2,"mean_commits":69.5,"dds":0.2517985611510791,"last_synced_commit":"daae49f31cd20ae6ca28cb857271918abf820f47"},"previous_names":["react-atom/react-atom"],"tags_count":146,"template":false,"template_full_name":null,"purl":"pkg:github/react-earth/react-atom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-earth%2Freact-atom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-earth%2Freact-atom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-earth%2Freact-atom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-earth%2Freact-atom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-earth","download_url":"https://codeload.github.com/react-earth/react-atom/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-earth%2Freact-atom/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017151,"owners_count":26085983,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic","design","emotion","react","styled-components","ui"],"created_at":"2025-03-02T10:18:40.734Z","updated_at":"2025-10-14T10:02:07.591Z","avatar_url":"https://github.com/react-earth.png","language":"TypeScript","readme":"![title](media/repo-header.svg)\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/react-earth/react-atom\"\u003e\u003cimg alt=\"star\" src=\"https://img.shields.io/github/stars/react-earth/react-atom.svg?style=social\u0026label=Star\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-atom-core\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-atom-core\" alt=\"version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-atom-core\"\u003e\u003cimg alt=\"minzip\" src=\"https://img.badgesize.io/https:/unpkg.com/react-atom-core@latest/dist/index.esm.js?compression=gzip\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-atom-core\"\u003e\u003cimg alt=\"downloads\" src=\"https://img.shields.io/npm/dm/react-atom.svg\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/react-earth/react-atom\"\u003e\u003cimg alt=\"license\" src=\"https://img.shields.io/npm/l/react-atom-core\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Packages 📦\n\n- [react-atom-core](https://www.npmjs.com/package/react-atom-core): convert react atomically props to styles.\n- [react-atom-emotion](https://www.npmjs.com/package/react-atom-emotion): react atom for [emotion](https://github.com/emotion-js/emotion).\n- [react-atom-styled](https://www.npmjs.com/package/react-atom-styled): react atom for [styled-components](https://github.com/styled-components/styled-components).\n- [react-atom-tokens](https://www.npmjs.com/package/react-atom-tokens): react atom design tokens, such as MUI, Chakra UI, Ant Design, etc.\n\n## Quick Features 🥳\n\n- Build application atomically with your design tokens.\n- Supported emotion and styled-components.\n- Built with typescript, provide type protection, code autocompletion, make your app robust.\n\n## How to use 📖\n\n### Install package\n\n```sh\n# use emotion\nnpm install @emotion/react @emotion/styled react-atom-emotion\n\n# use styled-components\nnpm install styled-components react-atom-styled\n```\n\n### Define your design tokens\n\nCreate a file named `designTokens.ts` in your project.\n\n```typescript\nexport const designTokens = {\n  spacing: {\n    '1x': '8px',\n    '2x': '16px',\n    '4x': '32px',\n    full: '100%',\n    fullW: '100vw',\n    fullH: '100vh',\n  },\n  color: {\n    primary: '#4CB074',\n    background: '#ECF5F0',\n  },\n  fontSize: {\n    xxl: '32px',\n    xl: '38px',\n    lg: '24px',\n    md: '16px',\n    sm: '14px',\n    xs: '12px',\n  },\n};\n```\n\n### Create Atom component\n\nCreate a file named `Atom.tsx` in your project.\n\n```tsx\n// You also can use react-atom-styled here\nimport atom from 'react-atom-emotion';\nimport { designTokens } from './designTokens';\n\nexport const Atom = atom(designTokens);\n```\n\n### Build application atomically with your design tokens\n\n```tsx\nimport { Atom } from './Atom';\n\nexport default function App() {\n  return (\n    \u003cAtom\n      w=\"fullW\"\n      h=\"fullH\"\n      flex\n      flexDirection=\"column\"\n      flexJustify=\"center\"\n      flexAlign=\"center\"\n      gap=\"1x\"\n      c=\"primary\"\n      bg=\"background\"\n    \u003e\n      \u003cAtom fontSize=\"xxl\" fontWeight=\"bold\"\u003e\n        Hello, React Atom!\n      \u003c/Atom\u003e\n      \u003cAtom fontSize=\"md\"\u003eBuild application atomically with your design!\u003c/Atom\u003e\n    \u003c/Atom\u003e\n  );\n}\n```\n\nClick [here](https://codesandbox.io/s/react-atom-demo-xj9dt7?file=/src/App.tsx) to try it by yourself.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-earth%2Freact-atom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-earth%2Freact-atom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-earth%2Freact-atom/lists"}