theme-ui
**WIP** Themeable UI components for themes
Last updated 6 years ago by jxnblk .
MIT · Original npm · Tarball · package.json 
$ npm install theme-ui
SYNC missed versions from official npm registry.

theme-ui

WIP Themeable UI components for themes

npm i theme-ui

// basic usage
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'

export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>

css prop

The css utility is from @styled-system/css. This could potentially be handled with something like Emotion plugins.

import React from 'react'
import { css } from 'theme-ui'

export default () =>
  <div
    css={css({
      fontSize: 4,
      fontWeight: 'bold',
      color: 'primary', // picks up values from theme
    })}>
    Hello
  </div>

MDX Components

Use the components prop to add components to MDX scope. The ThemeProvider (name TBD) is a combination of MDXProvider and Emotion's ThemeProvider.

// with mdx components
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import mdxComponents from './mdx-components'
import theme from './theme'

export default props =>
  <ThemeProvider
    components={mdxComponents}
    theme={theme}>
    {props.children}
  </ThemeProvider>

This will render child MDX documents with the components provided via context. For use outside of MDX (e.g. Remark Markdown) the styles could be applied with a wrapper component.

Styled components

These components can also be consumed outside of an MDX doc with the Styled component.

import React from 'react'
import { Styled } from 'theme-ui'

export default props =>
  <Styled.wrapper>
    <Styled.h1>
      Hello
    </Styled.h1>
  </Styled.wrapper>

theme.styles

The MDX components can also be styled via the theme.styles object. This can be used as a mechanism to pass Typography.js-like styles to MDX content.

// example theme
export default {
  colors: {
    primary: '#33e',
  },
  styles: {
    // this styles child MDX `<h1>` components
    h1: {
      fontSize: 32,
      // this value comes from the `color` object
      color: 'primary',
    },
  }
}

Layout Components

Page layout components are included in the theme-ui/layout module.

import React from 'react'
import {
  Layout,
  Header,
  Main,
  Container,
  Footer
} from 'theme-ui/layout'

export default props =>
  <Layout>
    <Header>
      Hello
    </Header>
    <Main>
      <Container>
        {props.children}
      </Container>
    </Main>
    <Footer>
      © 2019
    </Footer>
  </Layout>

Experimental

MIT License

Current Tags

  • 0.1.3-0.0                                ...           alpha (6 years ago)
  • 0.16.2-scale-tuples.0                                ...           canary (a year ago)
  • 0.17.2-develop.0                                ...           develop (7 days ago)
  • 0.4.0-highlight.0                                ...           highlight (5 years ago)
  • 0.17.1                                ...           latest (2 months ago)
  • 0.6.0-alpha.8                                ...           next (4 years ago)

501 Versions

Maintainers (1)
jxnblk
Downloads
Total 231
Today 1
This Week 1
This Month 228
Last Day 0
Last Week 0
Last Month 0
Dependencies (7)
Dev Dependencies (11)
Dependents (7)

© 2010 - cnpmjs.org x YWFE | Home | YWFE