Primer

Cross-platform Primer React components. Render Primer components to React web, React Native, React Sketch.app and React Figma using react-primitives. Near pixel-perfect parity with the specification.

API inspired by Rebass and built on styled-system and styled-components.

Supported platforms (with Elemental React and react-primitives):

• react-dom – (web: SSR and Gatsby supported with styled-components)
• react-native – (React Native – Android and iOS)
• react-sketchapp – (React Sketch.app – Code acts as the source-of-truth for your design component library.
• react-figma – (since the renderer is in alpha, this may be unstable for UI composition/flexbox)
• react-* – more platforms to come in the future, e.g. React 360 (VR), React PDF, etc.

Getting Started

npm i elemental-react @elemental-react/primer

Refer to https://github.com/elemental-react/primer/tree/master/examples/sketch and https://github.com/elemental-design/elemental-react to find examples. Web usage in a Gatsby project: https://github.com/elemental-design/site/blob/master/src/pages/index.js

Demo