{"id":27944769,"url":"https://github.com/react-figma/react-primitives-box","last_synced_at":"2025-05-07T12:54:28.204Z","repository":{"id":40756817,"uuid":"289744532","full_name":"react-figma/react-primitives-box","owner":"react-figma","description":"📦 Ergonomic, responsive React layout and grid system","archived":false,"fork":false,"pushed_at":"2024-08-28T09:35:39.000Z","size":1188,"stargazers_count":12,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T16:01:25.815Z","etag":null,"topics":["react","styled-components","styled-system","theme-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-figma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2020-08-23T18:30:20.000Z","updated_at":"2024-08-12T18:13:27.000Z","dependencies_parsed_at":"2023-02-15T07:00:55.810Z","dependency_job_id":"f90dd4e8-f83b-4200-9d08-55a4b4b890dc","html_url":"https://github.com/react-figma/react-primitives-box","commit_stats":{"total_commits":46,"total_committers":2,"mean_commits":23.0,"dds":"0.34782608695652173","last_synced_commit":"47700551cfb2a4e44eccfc15dad387f4826e3bf6"},"previous_names":["react-figma/reflexbox"],"tags_count":1,"template":false,"template_full_name":"react-figma/react-figma-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-figma%2Freact-primitives-box","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-figma%2Freact-primitives-box/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-figma%2Freact-primitives-box/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-figma%2Freact-primitives-box/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-figma","download_url":"https://codeload.github.com/react-figma/react-primitives-box/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250515297,"owners_count":21443365,"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":["react","styled-components","styled-system","theme-ui"],"created_at":"2025-05-07T12:54:27.180Z","updated_at":"2025-05-07T12:54:28.189Z","avatar_url":"https://github.com/react-figma.png","language":"TypeScript","readme":"# React Primitives Box\n\n📦 Ergonomic, responsive React layout and grid system built on [Styled System][], [Theme Specification][], [React Primitives](https://github.com/lelandrichardson/react-primitives) and [styled-components](https://styled-components.com/).\n\n[![Build Status][badge]][circleci]\n[![Version][version-badge]][npm]\n[![MIT License][license-badge]](LICENSE.md)\n[![system-ui/theme](https://flat.badgen.net/badge/system-ui/theme/black)](https://system-ui.com/theme)\n\n[badge]: https://flat.badgen.net/github/status/react-figma/react-primitives-box/master/ci/circleci\n[circleci]: https://circleci.com/gh/react-figma/react-primitives-box\n[version-badge]: https://flat.badgen.net/npm/v/react-primitives-box\n[license-badge]: https://flat.badgen.net/badge/license/MIT/blue\n[npm]: https://npmjs.com/package/react-primitives-box\n\n- Primitive styled components for all your layout needs\n- Customize styles inline with the `sx` prop\n- Ergonomic responsive array-based values\n- Support for component variants\n- [Styled System][] props\n- Themeable and compatible with the [Theme Specification][]\n- Built with [Styled System][]\n- Works with [Theme UI][]\n- Built with Styled Components\n\n## Getting Started\n\n```sh\nnpm i react-primitives-box\n```\n\n```jsx\nimport React from 'react'\nimport { Flex, Box, Text } from 'react-primitives-box'\n\nexport default props =\u003e\n  \u003cFlex flexWrap='wrap'\u003e\n    \u003cBox\n      width={[ 1, 1/2 ]}\n      p={3}\u003e\n      \u003cText\u003e\n       React Primitives\n      \u003c/Text\u003e  \n    \u003c/Box\u003e\n    \u003cBox\n      width={[ 1, 1/2 ]}\n      p={3}\u003e\n      \u003cText\u003e\n        Box\n      \u003c/Text\u003e\n    \u003c/Box\u003e\n  \u003c/Flex\u003e\n```\n\n### `sx` Prop\n\nThe `Box` and `Flex` components both accept a `sx` prop that works with no additional setup required.\nThe `sx` prop is similar to Emotion's `css` prop, but allows you to use values derived from the theme object.\n\nReact Primitives Box follows the [Theme Specification][], which means that any theme created for use with [Theme UI][], [Styled System][], or other similar libraries will work out-of-the-box.\nThis allows you to share design constraints for typography, color, and layout throughout your application using a theming context.\n\n```jsx\n\u003cBox\n  sx={{\n    p: 4,\n    color: 'primary',\n  }}\n/\u003e\n```\n\nNote: to opt-out of theme-based styles, use the `css` prop instead, which will not transform values.\n\n## Theming\n\nBecause React Primitives Box follows the [Theme Specification][], all themes built for use with [Styled System][], [Theme UI][], or other related libraries are compatible with React Primitives Box.\n\nTo add a theme to an application, import the `ThemeProvider` component and pass a custom theme object in.\n\n```jsx\nimport React from 'react'\nimport { Flex, Box, Text, ThemeProvider } from 'react-primitives-box'\n\nconst theme = {\n  breakpoints: [\n    '40em', '52em', '64em',\n  ],\n  colors: {\n    text: '#000',\n    background: '#fff',\n    primary: '#07c',\n  },\n  space: [\n    0, 4, 8, 16, 32, 64, 128, 256,\n  ],\n}\n\nexport default props =\u003e\n  \u003cThemeProvider theme={theme}\u003e\n    \u003cBox\n      sx={{\n        p: 4,\n        bg: 'primary',\n      }}\u003e\n      \u003cText\u003e\n        Hello\n      \u003c/Text\u003e\n    \u003c/Box\u003e\n  \u003c/ThemeProvider\u003e\n```\n\nFor use with [Theme UI][], use `gatsby-plugin-theme-ui` or import the Theme UI `ThemeProvider` instead.\n\n```js\nimport { ThemeProvider } from 'theme-ui'\n```\n\n## Variants\n\nReact Primitives Box components also accept a `variant` prop, which allows you to define commonly used styles,\nsuch as cards, badges, and CSS grid layouts, in your theme object for reuse.\n\nAdd a `variants` object to your theme and include any variants as style objects. These styles can reference other values in your theme such as colors, typographic styles, and more.\n\n```js\n// example theme\nexport default {\n  colors: {\n    text: '#000',\n    background: '#fff',\n    primary: '#07c',\n  },\n  radii: {\n    default: 4,\n  },\n  shadows: {\n    card: '0 0 4px rgba(0, 0, 0, .125)',\n  },\n  variants: {\n    card: {\n      p: 3,\n      borderRadius: 'default',\n      bg: 'white',\n      boxShadow: 'card',\n    },\n    badge: {\n      color: 'white',\n      bg: 'primary',\n      p: 1,\n      borderRadius: 'default',\n    },\n  },\n}\n```\n\nTo apply a variant to your component, pass the name to the `variant` prop.\n\n```jsx\n\u003cBox variant='card'\u003eCard\u003c/Box\u003e\n\u003cBox variant='badge'\u003eBadge\u003c/Box\u003e\n```\n\n## Responsive Styles\n\nUse array values to quickly and ergonomically add mobile-first responsive styles to specific properties.\nThis works on all style props and the `sx` prop.\nSee the [Styled System][] docs for more.\n\n```jsx\n// 100% width at the smallest viewport width\n// 50% width at the next breakpoint\n// 25% width at the next breakpoint\n\u003cBox width={[ '100%', '50%', '25%' ]} /\u003e\n```\n\nYou can customize the widths used for each breakpoint by defining a `theme.breakpoints` array in your theme.\n\n## Styled System Props\n\nReact Primitives Box conforms to the [Theme Specification][] and includes many common [Styled System][] props.\nThe `Box` and `Flex` components accept the following props:\n\n### Space Props\n\nProp | Theme Key\n---|---\n`margin`, `m`         | `space`\n`marginTop`, `mt`     | `space`\n`marginRight`, `mr`   | `space`\n`marginBottom`, `mb`  | `space`\n`marginLeft`, `ml`  | `space`\n`marginX`, `mx`  | `space`\n`marginY`, `my`  | `space`\n`padding`, `p`         | `space`\n`paddingTop`, `pt`     | `space`\n`paddingRight`, `pr`   | `space`\n`paddingBottom`, `pb`  | `space`\n`paddingLeft`, `pl`    | `space`\n`paddingX`, `px`  | `space`\n`paddingY`, `py`  | `space`\n\n### Layout Props\n\nProp | Theme Key\n---|---\n`width` | `sizes`\n`height` | `sizes`\n`minWidth` | `sizes`\n`maxWidth` | `sizes`\n`minHeight` | `sizes`\n`maxHeight` | `sizes`\n\n### Typography Props\n\nProp | Theme Key\n---|---\n`fontFamily` | `fonts`\n`fontSize` | `fontSizes`\n`fontWeight` | `fontWeights`\n`lineHeight` | `lineHeights`\n`letterSpacing` | `letterSpacings`\n`fontStyle` | N/A\n`textAlign` | N/A\n\n### Color Props\n\nProp | Theme Key\n---|---\n`color` | `colors`\n`backgroundColor`, `bg` | `colors`\n`opacity` | N/A\n\n### Flexbox Props\n\nProp | Theme Key\n---|---\n`alignItems` | N/A\n`alignContent` | N/A\n`justifyItems` | N/A\n`justifyContent` | N/A\n`flexWrap` | N/A\n`flexDirection` | N/A\n`flex` | N/A\n`flexGrow` | N/A\n`flexShrink` | N/A\n`flexBasis` | N/A\n`justifySelf` | N/A\n`alignSelf` | N/A\n`order` | N/A\n\n## Examples\n\n- [react-figma](/examples/react-figma) — Using with [react-figma](https://github.com/react-figma/react-figma) example.\n\n## About\n\nThis library is an implementation of [reflexbox](https://rebassjs.org/reflexbox) on [React Primitives](https://github.com/lelandrichardson/react-primitives) and [styled-components](https://styled-components.com/).\n\n[MIT License](LICENSE.md)\n\n[theme specification]: https://github.com/system-ui/theme-specification\n[styled system]: https://styled-system.com\n[theme ui]: https://theme-ui.com\n[styled components]: https://styled-components.com\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-figma%2Freact-primitives-box","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-figma%2Freact-primitives-box","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-figma%2Freact-primitives-box/lists"}