0.16.1 • Published 6 months ago

theme-ui v0.16.1

Weekly downloads
180,492
License
MIT
Repository
github
Last release
6 months ago

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

@pingux/astro@frago12/composition-portals@pil0t/gatsby-theme-novela@thirdwave-network/thirdwave-gatsby-theme@lucasbarcelos/gatsby-theme-mercadolibre-store-custom@stton/gatsby-theme-shopifyrandom-dummy-package-testshycat-theme-shopify@sachinjadhav/gatsby-theme-blog@nmataleadtech/ac-base-theme@smartassdesign/gatsby-theme-themifysous-vide-diaries@puzzledbytheweb/gatsby-theme-kel-theme-fudiduhgatsby-theme-cara-improved@puzzledbytheweb/kel-theme-fudiduh@4leb/gatsby-theme-events@pixelmord/prestyled@kyrelldixon/gatsby-theme-novela@ribeiroevandro/theme-basegatsby-theme-tablex@shycat/shycat-theme-shopifysia-streamstate-designer-docs@cangir/gatsby-theme-flex@trufala/ui@rubrik/docsgatsby-theme-kuworking-landing-onegatsby-theme-fierce-vanillalyketluandevtheme1gonation-site-generatorcustom-gatsby-theme-novelamdx-deck-simplestandalone-mdx-deck@carltonj2000/gatsby-theme-events@matt-shade/lekoartsforkedlekoartsforked@med40/teventsicomera-react-librarytheme-gatsby-shopify@meetup/build-meetup-header@meetup/build-meetup-web-componentsnavattic-flow@juancamiloqhz/gatsby-theme-affiliate-links@ekampf/gatsby-theme-networked-thoughtcs-openrole-frameworkopen-decision-builderor-library@mlapida/gatsby-theme-minimal-blog@priyank-vaghela/gatsby-custom-theme-instagram@ezeyaniv/gatsby-theme-events@paescuj/chat-widget@cuidas/ui@yvnk/gatsby-theme-events@stefantrinh1/gatsby-theme-eventsgatsby-theme-docbargatsby-theme-providence@damianrosewarne/linz-blog-gatsby-themegatsby-theme-portfolio-are.na@jacobherrington/gatsby-theme-eventsgatsby-theme-clean-docs@3200pro/theme-1gatsby-theme-serena-v2@hesburgh-wse/gatsby-theme-marble@rodriguesmyron/gatsby-theme-podcast@dowdiness/gatsby-theme-events@cheemswap/uikit@cheemswap/uikit-v2@codeshinobi-dk/or-monorepo@emotion-starter-template/atoms@infinitebrahmanuniverse/nolb-them@gratico/uikit@flareswap/uikit@nextbnb/animation@nextbnb/atoms-bullet@nextbnb/atoms-button@nextbnb/atoms-input@nextbnb/atoms-video@nextbnb/layout@nextbnb/molecules-card@nextbnb/organisms-bar@nextbnb/organisms-footer@nextbnb/organisms-header@nextbnb/organisms-modal@nextbnb/particles@nextbnb/prototype-auth@nextbnb/prototype-create@nextbnb/prototype-globe@nextbnb/prototype-homes@nextbnb/prototype-searchbar@nextbnb/weblawb-fegatsby-theme-monolithgatsby-theme-podcaster@everything-registry/sub-chunk-2935@gedesurya125/surya-uiljoliat-design-systemmonolith-ui-componentsnextjs-prismic-blog-starternextjs-mdx-blog-starter
0.16.2-develop.0

6 months ago

0.16.0-develop.4

10 months ago

0.16.0

10 months ago

0.16.1

8 months ago

0.16.1-develop.0

8 months ago

0.15.5

1 year ago

0.15.7

12 months ago

0.15.4

1 year ago

0.15.3

1 year ago

0.15.0

2 years ago

0.15.1

2 years ago

0.14.6

2 years ago

0.14.7

2 years ago

0.15.0-develop.8

2 years ago

0.15.0-develop.9

2 years ago

0.15.0-develop.6

2 years ago

0.15.0-develop.7

2 years ago

0.14.4-develop.1

2 years ago

0.14.5-develop.0

2 years ago

0.14.5

2 years ago

0.14.4

2 years ago

0.15.0-develop.4

2 years ago

0.15.0-develop.5

2 years ago

0.15.0-develop.2

2 years ago

0.15.0-develop.3

2 years ago

0.15.0-develop.0

2 years ago

0.15.0-develop.1

2 years ago

0.14.4-develop.0

2 years ago

0.14.3-develop.1

2 years ago

0.14.3-develop.0

2 years ago

0.14.2-develop.1

2 years ago

0.14.2-develop.2

2 years ago

0.14.2-develop.0

2 years ago

0.14.0

2 years ago

0.14.1

2 years ago

0.14.2

2 years ago

0.14.3

2 years ago

0.14.1-develop.0

2 years ago

0.13.1-develop.9

2 years ago

0.13.1-develop.8

2 years ago

0.13.1-develop.7

2 years ago

0.13.1-develop.6

2 years ago

0.13.1-develop.5

2 years ago

0.13.1-develop.4

2 years ago

0.13.1-develop.3

2 years ago

0.13.1-develop.2

2 years ago

0.13.1-develop.1

2 years ago

0.13.1-develop.0

2 years ago

0.13.0

2 years ago

0.13.1

2 years ago

0.12.2-develop.7

2 years ago

0.12.2-develop.8

2 years ago

0.12.2-develop.5

2 years ago

0.12.2-develop.6

2 years ago

0.12.2-develop.4

2 years ago

0.14.0-develop.0

2 years ago

0.14.0-develop.2

2 years ago

0.14.0-develop.1

2 years ago

0.14.0-develop.4

2 years ago

0.14.0-develop.3

2 years ago

0.14.0-develop.6

2 years ago

0.14.0-develop.5

2 years ago

0.14.0-develop.8

2 years ago

0.14.0-develop.7

2 years ago

0.14.0-develop.9

2 years ago

0.12.2-develop.3

2 years ago

0.12.2-develop.1

2 years ago

0.12.2-develop.2

2 years ago

0.12.2-develop.0

2 years ago

0.12.1

2 years ago

0.13.0-develop.0

2 years ago

0.13.0-develop.1

2 years ago

0.12.1-develop.2

2 years ago

0.12.1-develop.3

2 years ago

0.12.1-develop.0

2 years ago

0.12.1-develop.1

2 years ago

0.12.1-develop.6

2 years ago

0.12.1-develop.4

2 years ago

0.12.1-develop.5

2 years ago

0.12.0

2 years ago

0.12.0-develop.0

2 years ago

0.11.4-develop.9

2 years ago

0.11.4-develop.8

2 years ago

0.11.4-develop.7

2 years ago

0.11.4-develop.6

2 years ago

0.11.4-develop.5

2 years ago

0.11.4-develop.4

2 years ago

0.11.4-develop.3

2 years ago

0.11.4-develop.1

2 years ago

0.11.4-develop.0

2 years ago

0.11.4-develop.2

2 years ago

0.11.3

3 years ago

0.11.3-develop.3

3 years ago

0.11.3-develop.4

3 years ago

0.11.3-develop.5

3 years ago

0.11.3-develop.0

3 years ago

0.11.3-develop.1

3 years ago

0.11.3-develop.2

3 years ago

0.11.2

3 years ago

0.11.2-develop.3

3 years ago

0.11.2-develop.4

3 years ago

0.11.2-develop.2

3 years ago

0.11.2-develop.1

3 years ago

0.11.2-develop.0

3 years ago

0.11.0

3 years ago

0.11.1

3 years ago

0.11.0-develop.1

3 years ago

0.11.0-develop.2

3 years ago

0.11.0-develop.0

3 years ago

0.10.0

3 years ago

0.9.2-develop.6

3 years ago

0.10.1-develop.0

3 years ago

0.9.2-develop.4

3 years ago

0.9.2-develop.5

3 years ago

0.9.2-develop.0

3 years ago

0.9.2-develop.1

3 years ago

0.9.1-develop.0

3 years ago

0.9.0

3 years ago

0.9.1

3 years ago

0.8.4

3 years ago

0.7.3-develop.0

3 years ago

0.7.2

3 years ago

0.7.1

3 years ago

0.7.4

3 years ago

0.7.3

3 years ago

0.7.4-develop.0

3 years ago

0.7.4-develop.2

3 years ago

0.7.4-develop.1

3 years ago

0.8.1

3 years ago

0.8.0

3 years ago

0.8.3

3 years ago

0.8.2

3 years ago

0.8.2-develop.0

3 years ago

0.8.2-develop.1

3 years ago

0.8.2-develop.2

3 years ago

0.7.1-develop.0

3 years ago

0.7.5

3 years ago

0.9.0-develop.0

3 years ago

0.9.0-develop.1

3 years ago

0.8.0-develop.0

3 years ago

0.8.3-develop.0

3 years ago

0.8.4-develop.0

3 years ago

0.8.5-develop.0

3 years ago

0.7.5-develop.0

3 years ago

0.7.0

3 years ago

0.7.0-develop.0

3 years ago

0.6.2

3 years ago

0.6.1

3 years ago

0.6.0-alpha.8

3 years ago

0.6.0

3 years ago

0.6.0-alpha.7

3 years ago

0.6.0-alpha.6

3 years ago

0.6.0-alpha.5

3 years ago

0.3.5

3 years ago

0.6.0-alpha.4

3 years ago

0.6.0-alpha.3

3 years ago

0.6.0-alpha.2

3 years ago

0.6.0-alpha.1

3 years ago

0.6.0-alpha.0

3 years ago

0.5.0-alpha.2

3 years ago

0.5.0-alpha.1

3 years ago

0.4.0-rc.13

3 years ago

0.4.0-rc.14

3 years ago

0.3.4

3 years ago

0.5.0-alpha.0

3 years ago

0.4.0-rc.11

3 years ago

0.4.0-rc.12

3 years ago

0.4.0-rc.9

3 years ago

0.4.0-rc.8

3 years ago

0.4.0-rc.7

3 years ago

0.3.2

3 years ago

0.3.3

3 years ago

0.3.2-alpha.10

3 years ago

0.4.0-rc.5

4 years ago

0.4.0-rc.3

4 years ago

0.4.0-rc.1

4 years ago

0.4.0-alpha.3

4 years ago

0.4.0-alpha.2

4 years ago

0.4.0-alpha.1

4 years ago

0.4.0-alpha.0

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.3.0-alpha.6

4 years ago

0.3.0-alpha.5

4 years ago

0.3.0-alpha.4

4 years ago

0.3.0-alpha.3

4 years ago

0.3.0-alpha.2

4 years ago

0.3.0-alpha.1

4 years ago

0.3.0-alpha.0

4 years ago

0.2.52

4 years ago

0.2.49

4 years ago

0.2.46

4 years ago

0.2.44

4 years ago

0.2.43

5 years ago

0.2.42

5 years ago

0.2.41

5 years ago

0.2.40

5 years ago

0.2.38

5 years ago

0.2.36

5 years ago

0.2.35

5 years ago

0.2.33

5 years ago

0.2.31

5 years ago

0.2.29

5 years ago

0.2.26

5 years ago

0.2.25

5 years ago

0.2.23

5 years ago

0.2.21

5 years ago

0.2.20

5 years ago

0.2.18

5 years ago

0.2.16

5 years ago

0.2.15

5 years ago

0.2.14

5 years ago

0.2.13

5 years ago

0.2.12

5 years ago

0.2.11

5 years ago

0.2.10

5 years ago

0.2.9

5 years ago

0.2.6

5 years ago

0.2.5

5 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.2.0-alpha.0

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.3-0.0

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago

0.0.17

5 years ago

0.0.17-alpha.1

5 years ago

0.0.17-alpha.0

5 years ago

0.0.16

5 years ago

0.0.15

5 years ago

0.0.14

5 years ago

0.0.13

5 years ago

0.0.12

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.5-0

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2-0

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago

0.0.0-6

5 years ago

0.0.0-5

5 years ago

0.0.0-4

5 years ago

0.0.0-3

5 years ago

0.0.0-2

5 years ago

0.0.0-1

5 years ago

0.0.0-0

5 years ago