The Design Graph Framework
The Design Graph Framework
Β
Theme UI is a library for creating themeable user interfaces based on constraint-based
design principles. Build custom component libraries, design systems, web applications,
Gatsby themes, and more with a flexible API for best-in-class developer ergonomics.
stable docs: https://theme-ui.com
develop (prerelease) docs: https://dev.theme-ui.com
Built for design systems, white-labels, themes, and other applications where customizing colors, typography, and layout are treated as first-class citizens and based on a standard Theme Specification, Theme UI is intended to work in a variety of applications, libraries, and other UI components. Colors, typography, and layout styles derived from customizable theme-based design scales help you build UI rooted in constraint-based design principles.
sx propnpm install theme-ui @emotion/react @mdx-js/react@1
If you don't need color modes, components and MDX support, you can install @theme-ui/core.
Any 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.
// basic usage
import { ThemeProvider } from 'theme-ui'
import theme from './theme'
export default (props) => (
<ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)
The theme object follows the System UI
Theme Specification, which lets you define
custom color palettes, typographic scales, fonts, and more. Read more about
theming.
// example theme.js
export default {
fonts: {
body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
heading: '"Avenir Next", sans-serif',
monospace: 'Menlo, monospace',
},
colors: {
text: '#000',
background: '#fff',
primary: '#33e',
},
}
sx propThe sx prop works similarly to Emotion's css prop, accepting style objects
to add CSS directly to an element in JSX, but includes extra 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.
The sx prop only works in modules that have defined a custom pragma at the top
of the file, which replaces the default React JSX functions. This means you can
control which modules in your application opt into this feature without the need
for a Babel plugin or additional configuration.
/** @jsxImportSource theme-ui */
export default (props) => (
<div
sx={{
fontWeight: 'bold',
fontSize: 4, // picks up value from `theme.fontSizes[4]`
color: 'primary', // picks up value from `theme.colors.primary`
}}
>
Hello
</div>
)
Read more about how the custom pragma works.
The sx prop also supports using arrays as values to change properties
responsively with a mobile-first approach. This API originated in Styled
System and is intended as
a terser syntax for applying responsive styles
across a singular dimension.
/** @jsxImportSource theme-ui */
export default (props) => (
<div
sx={{
// applies width 100% to all viewport widths,
// width 50% above the first breakpoint,
// and 25% above the next breakpoint
width: ['100%', '50%', '25%'],
}}
/>
)
MIT License
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
The Design Graph Framework
The npm package theme-ui receives a total of 21,147 weekly downloads. As such, theme-ui popularity was classified as popular.
We found that theme-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
