{"id":13393858,"url":"https://github.com/sammdec/theme-ui-native","last_synced_at":"2025-06-20T19:38:37.271Z","repository":{"id":38915876,"uuid":"244707374","full_name":"sammdec/theme-ui-native","owner":"sammdec","description":"Build consistent, themeable React Native apps based on constraint-based design principles ","archived":false,"fork":false,"pushed_at":"2023-01-05T09:03:15.000Z","size":907,"stargazers_count":68,"open_issues_count":20,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-19T00:51:38.543Z","etag":null,"topics":["color","design-system","design-tokens","layout","react","react-native","style","theme","typography","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/sammdec.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-03T18:08:46.000Z","updated_at":"2024-04-06T06:48:38.000Z","dependencies_parsed_at":"2022-08-30T05:31:14.956Z","dependency_job_id":null,"html_url":"https://github.com/sammdec/theme-ui-native","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/sammdec/theme-ui-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammdec%2Ftheme-ui-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammdec%2Ftheme-ui-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammdec%2Ftheme-ui-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammdec%2Ftheme-ui-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sammdec","download_url":"https://codeload.github.com/sammdec/theme-ui-native/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammdec%2Ftheme-ui-native/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261006110,"owners_count":23095983,"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":["color","design-system","design-tokens","layout","react","react-native","style","theme","typography","ui"],"created_at":"2024-07-30T17:01:01.475Z","updated_at":"2025-06-20T19:38:32.259Z","avatar_url":"https://github.com/sammdec.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cimg\n  src=\"https://contrast.now.sh/fff/000?size=200\u0026fontSize=2\u0026baseline=2\u0026fontWeight=900\u0026radius=32\u0026text=UIN\"\n  width=\"96\"\n  heigh=\"96\"\n/\u003e\n\n# Theme UI Native\n\nTheme UI for React Native allows you to build consistent, theme-able React Native apps based on constraint-based design principles\n\n[![GitHub][github-badge]][github]\n[![Build Status][github-actions-badge]][github-actions]\n[![Version][version]][npm]\n![MIT License][license]\n[![system-ui/theme][system-ui-badge]](https://system-ui.com/theme)\n![][size]\n\n[github]: https://github.com/samjbmason/theme-ui-native\n[github-badge]: https://badgen.net/badge/-/github?icon=github\u0026label\n[github-actions]: https://github.com/samjbmason/theme-ui-native/actions\n[github-actions-badge]: https://github.com/samjbmason/theme-ui-native/workflows/Run%20CI/badge.svg\n[version]: https://badgen.net/npm/v/theme-ui-native\n[npm]: https://npmjs.com/package/theme-ui-native\n[license]: https://badgen.net/badge/license/MIT/blue\n[system-ui-badge]: https://badgen.net/badge/system-ui/theme/black\n[size]: https://badgen.net/bundlephobia/minzip/theme-ui-native\n\nBuilt for React Native applications where customising colours, typography, and layout are treated as first-class citizens and based on a standard [Theme Specification](https://system-ui.com/theme), Theme UI For React Native is intended to work in a variety of applications and UI components. Colors, typography, and layout styles derived from customizable theme-based design scales help you build UI rooted in constraint-based design principles.\n\n- [Getting started](#getting-started)\n- [Usage](#usage)\n- [Differences between Theme UI for Web \u0026 Theme UI for React Native](#differences-between-theme-ui-for-web-and-theme-ui-for-react-native)\n- [API](#api)\n\n## Getting started\n\n```bash\nnpm install theme-ui-native\n```\n\nAny styles in your app can reference values from the global theme object. To provide the theme in context, wrap your application with the ThemeProvider component and pass in a custom theme object.\n\n```jsx\n// basic usage\nimport React from \"react\"\nimport { ThemeProvider } from \"theme-ui-native\"\nimport theme from \"./theme\"\n\nexport default props =\u003e (\n  \u003cThemeProvider theme={theme}\u003e{props.children}\u003c/ThemeProvider\u003e\n)\n```\n\nThe theme object follows the System UI [Theme Specification](https://system-ui.com/theme), which lets you define custom color palettes, typographic scales, fonts, and more. Read more about [theming](https://theme-ui.com/theming/).\n\n```jsx\n// example theme.js\nexport default {\n  fonts: {\n    body: \"Avenir Next\",\n    monospace: \"Menlo, monospace\"\n  },\n  colors: {\n    text: \"#000\",\n    background: \"#fff\",\n    primary: \"#33e\"\n  }\n}\n```\n\n## Usage\n\n### `sx` prop\n\nThe `sx` prop works similarly to Theme UI's `sx` prop, accepting style objects to add styles directly to an element in JSX, with theme-aware functionality. Using the `sx` prop for styles means that certain properties can reference values defined in your theme object. This is intended to make keeping styles consistent throughout your app the easy thing to do.\n\nThe `sx` prop only works in modules that have defined a custom pragma at the top of the file, which replaces the default `React.createElement` function. This means you can control which modules in your application opt into this feature without the need for a Babel plugin or additional configuration.\n\n```jsx\n/** @jsx jsx */\nimport { jsx } from \"theme-ui-native\"\nimport { Text } from \"react-native\"\n\nexport default props =\u003e (\n  \u003cText\n    sx={{\n      fontWeight: \"bold\",\n      fontSize: 4, // picks up value from `theme.fontSizes[4]`\n      color: \"primary\" // picks up value from `theme.colors.primary`\n    }}\n  \u003e\n    Hello\n  \u003c/Text\u003e\n)\n```\n\n### `styled` function\n\nThe `styled` function works similarly to Emotion's `styled` function, the first argument accepts a React component and the second argument accepts a style object that adds theme aware style properties to the `style` prop. The function returns a React component that can be used as normal within your application.\n\n```jsx\nimport React from \"react\"\nimport { Text } from \"react-native\"\nimport { styled } from \"theme-ui-native\"\n\nconst Headline = styled(Text, {\n  marginY: 2, // picks up value from `theme.space[2]`\n  color: \"primary\" // picks up value from `theme.color.primary`\n})\n\nexport default () =\u003e \u003cHeadline\u003eHello\u003c/Headline\u003e\n```\n\nComponents that are created with the styled function get the added ability of being able to use the `sx` prop. This allows you to set default styles and then override at each call site with theme aware values.\n\n```jsx\nimport React from \"react\"\nimport { Text } from \"react-native\"\nimport { styled } from \"theme-ui-native\"\n\nconst Headline = styled(Text, {\n  marginY: 2,\n  color: \"primary\"\n})\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cHeadline\u003eHello\u003c/Headline\u003e {/* output will use color `primary` */}\n    \u003cHeadline\n      sx={{\n        color: \"secondary\" // output will use color `secondary`\n      }}\n    \u003e\n      Hello\n    \u003c/Headline\u003e\n  \u003c/\u003e\n)\n```\n\nYou can use a function as the second argument in `styled`, this function has access to all the props of the component and the theme object. This enables you to change values dynamically based on props.\n\n```jsx\nimport React from \"react\"\nimport { Text } from \"react-native\"\nimport { styled } from \"theme-ui-native\"\n\nconst Headline = styled(Text, ({ isEnabled, theme }) =\u003e ({\n  color: isEnabled ? \"primary\" : \"secondary\"\n}))\n\nexport default () =\u003e \u003cHeadline isEnabled={true}\u003eHello\u003c/Headline\u003e\n```\n\n### Raw values\n\nIf you would like to not use a theme value and instead use a literal value, you can pass the value as a string. The raw value is converted into a number so that it is compatible with React Natives style API.\n\n```jsx\n/** @jsx jsx */\nimport { jsx } from \"theme-ui-native\"\nimport { Text } from \"react-native\"\n\nexport default props =\u003e (\n  \u003cText\n    sx={{\n      marginY: \"2\", // uses the raw value `2`\n      marginX: 2 // picks up value from `theme.space[2]`\n    }}\n  \u003e\n    Hello\n  \u003c/Text\u003e\n)\n```\n\nYou can also use raw values by using the `style` prop as usual. These styles will take precedence over any styles created with the `sx` prop.\n\n```jsx\n/** @jsx jsx */\nimport { jsx } from \"theme-ui-native\"\nimport { Text } from \"react-native\"\n\nexport default props =\u003e (\n  \u003cText\n    sx={{\n      color: 'primary'\n      marginX: 2 // picks up value from `theme.space[2]`\n    }}\n    style={{color: '#000'}}\n  \u003e\n    Hello\n  \u003c/Text\u003e\n)\n// Final output will be\n// {color: '#000', marginX: 2}\n```\n\n### `sx` function\n\nThe `sx` function provides another option for adding theme aware style properties to your React components without the need for using the `styled` function or the `jsx` pragma.\n\n```jsx\n\nimport { useTheme } from \"theme-ui-native\"\nimport { Text } from \"react-native\"\n\nexport default props =\u003e {\n  const { sx } = useTheme()\n\n  return (\n    \u003cText\n      style={sx({\n        color: 'primary' // picks up value from `theme.colors.primary`\n        marginX: 2 // picks up value from `theme.space[2]`\n      })}\n    \u003e\n      Hello\n    \u003c/Text\u003e\n  )\n}\n// Final output will be\n// {color: '#000', marginX: 2}\n```\n\n## Differences between Theme UI for Web and Theme UI for React Native\n\n### Responsive styles\n\nIf you are coming from using Theme UI for web applications you are probably familiar with using arrays as values to change properties responsively based on breakpoints. This API isn't included Theme UI Native as there is currently no concept of responsive breakpoints within the React Native ecosystem.\n\n### Body styles\n\nThere is no concept of the global styles within React Native and so this functionality is not available within Theme UI Native.\n\n### MDX content\n\nWe haven't ported over MDX styling at this time as it seems unlikely to be used within the React Native context\n\n### Color modes\n\nWe currently don't support color modes but are very open to the integrating them in future versions, feel free to raise a issue or PR if you have ideas on how to implement this.\n\n## API\n\n### `jsx`\n\nThe `jsx` export is a React create element function intended for use with a custom pragma comment. It adds support for the `sx` prop, which parses style objects with the Theme UI Native `css` utility.\n\n```jsx\n/** @jsx jsx */\nimport { jsx } from \"theme-ui-native\"\nimport { Text } from \"react-native\"\n\nexport default props =\u003e (\n  \u003cText\n    {...props}\n    sx={{\n      color: \"primary\"\n    }}\n  \u003e\u003c/Text\u003e\n)\n```\n\n### `ThemeProvider`\n\nThe `ThemeProvider` provides context to components that use the `sx` prop.\n\n| Prop       | Type   | Description            |\n| ---------- | ------ | ---------------------- |\n| `theme`    | Object | Theming context object |\n| `children` | Node   | React children         |\n\n### `styled`\n\nThe `styled` function allows you to create components that can be styled using theme aware styles. The newly created components also have access to the `sx` prop, which allows for per call site theme aware style overrides.\n\nThe first argument expects a react component, the second argument expects either a object containing styles or a function that returns a style object. If a function is used the props and theme are passed as the functions argument as an object.\n\n```js\nimport { Text } from \"react-native\"\n\nconst Heading = styled(Text, { color: \"primary\" })\n\nconst Box = styled(View, ({ theme, ...props }) =\u003e ({\n  color: theme.colors.primary\n}))\n```\n\n### `useTheme`\n\nThe `useTheme` hook returns an object that contains full Theme UI Native context object, which includes the `theme` and the `sx` function.\n\n```js\nconst { theme, sx } = useTheme()\n```\n\n### `sx`\n\nThe `sx` function is returned from the `useTheme` hook, you can use it to style your components with theme aware styles. You should use it within the `style` prop and it will return a style object with the theme values mapped to it. This works in a similar way to how the `sx` prop from the `jsx` pragma works under the hood.\n\n```jsx\nimport React from \"react\"\nimport { View } from \"react-native\"\nimport { useTheme } from \"theme-ui-native\"\n\nexport default () =\u003e {\n  const { sx } = useTheme()\n\n  return \u003cView style={sx({ mx: 2, color: \"primary\" })}\u003eHello world\u003c/View\u003e\n}\n```\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsammdec%2Ftheme-ui-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsammdec%2Ftheme-ui-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsammdec%2Ftheme-ui-native/lists"}