{"id":21816635,"url":"https://github.com/elemental-design/elemental-react","last_synced_at":"2025-04-14T01:15:25.186Z","repository":{"id":38914045,"uuid":"176829502","full_name":"elemental-design/elemental-react","owner":"elemental-design","description":"Build UI components once, render to any platform: web, React Native and Sketch.","archived":false,"fork":false,"pushed_at":"2023-03-04T04:29:57.000Z","size":2795,"stargazers_count":22,"open_issues_count":34,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T01:15:17.404Z","etag":null,"topics":["cross-platform","react","react-native","react-primitives","react-sketchapp","sketch-app","styled-system","ui-components","ui-design"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elemental-design.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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":"2019-03-20T22:56:19.000Z","updated_at":"2023-11-06T02:20:37.000Z","dependencies_parsed_at":"2024-06-21T04:10:47.787Z","dependency_job_id":null,"html_url":"https://github.com/elemental-design/elemental-react","commit_stats":{"total_commits":61,"total_committers":2,"mean_commits":30.5,"dds":"0.19672131147540983","last_synced_commit":"3502bafd5708d52224ee26552a7e4671ae3887d2"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elemental-design%2Felemental-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elemental-design%2Felemental-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elemental-design%2Felemental-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elemental-design%2Felemental-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elemental-design","download_url":"https://codeload.github.com/elemental-design/elemental-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804824,"owners_count":21164135,"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","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":["cross-platform","react","react-native","react-primitives","react-sketchapp","sketch-app","styled-system","ui-components","ui-design"],"created_at":"2024-11-27T15:35:41.206Z","updated_at":"2025-04-14T01:15:25.160Z","avatar_url":"https://github.com/elemental-design.png","language":"TypeScript","readme":"# Elemental React\n\n\u003e Build UI components once, render to any platform using `react-primitives`. This library abstracts away common UI patterns for you.\n\n[![npm](https://img.shields.io/npm/v/elemental-react.svg)](https://www.npmjs.com/package/elemental-react)\n[![npm](https://img.shields.io/npm/dt/elemental-react.svg)](https://www.npmjs.com/package/elemental-react)\n\n\nAbstraction for app presentation to speed up cross-platform UI design and development with code using React/Sketch as a design function. This is an underlying cross-platform abstraction wrapper that allows you to build your own design language\n\n\u003e Based off [`styled-system`]() and [`styled-components`](). API is similar to [`rebass`](https://github.com/rebassjs/rebass), but using React Native style components.\n\nThis is an **alpha/preview** release. Please **test** comprehensively before using in **production**.\n\n**Supported React Renderers:**\n\n- `react` - React web\n- `react-native` - React Native (WIP)\n- `react-sketchapp` - React Sketch.app\n- **more** - Post an issue to suggest more! Ideally an API should exist that lets you override the primitives\n\n## Getting Started\n\n```sh\nnpm install elemental-react\n```\n\n```jsx\nimport React from 'react';\nimport {\n  Box, Text, Button,\n} from 'elemental-react';\n\n// ...\nreturn (\n  \u003cBox mt={3} bg=\"dark-blue\"\u003e\n    \u003cText color=\"white\"\u003e\n      Hello World\n    \u003c/Text\u003e\n  \u003c/Box\u003e\n);\n```\n\n## Example UI\n\nQuick example of a design created by a coder (me :slightly_smiling_face:), developed with live rendering to `react-sketchapp`:\n![Example Blog UI](https://user-images.githubusercontent.com/6757532/63878429-7e849500-c9c1-11e9-915f-33bd0e82a3be.png)\n\n## Related Reading\n\n- https://daneden.me/2018/01/05/subatomic-design-systems/\n- https://medium.com/styled-components/build-better-component-libraries-with-styled-system-4951653d54ee\n- https://medium.com/@_alanbsmith/layered-components-6f18996073a8\n- https://medium.com/@_alanbsmith/component-api-design-3ff378458511\n\n## Design Properties\n\n### Line\nThemed colour (primary)\n- Weight\n- Color\n- Texture\n- Style\n\n\n### Shape\nFoundational element.\n- Depth\n  - Light, shadow and depth (illusion)\n\n### Texture\nPhysical quality of a surface.\n\n### Balance\nEqual distribution of visual weight – spacing.\n- Symmetry (each side is the same)\n- Asymmetry – evenly distribute weight\n- Rule of thirds – grid divided into thirds\n\n\n### Color\n\n**Properties**\n- Hue\n- Saturation\n  - Monochromatic\n- Value\n\n**Analagous Colour Scheme**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felemental-design%2Felemental-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felemental-design%2Felemental-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felemental-design%2Felemental-react/lists"}