Intro to Evergreen UI

Evergreen UI is another React framework that is geared towards web products. It consists of a set of components that work out of the box. Flexible & compostable. Evergreen components are built on top of a React UI Primitive for endless composability. It can also be used for enterprise-grade web apps. Evergreen’s design is light, simple, and intuitive. You can use it to get started building elegant user interfaces pretty quickly.

Installation

In your terminal:

npm install --save evergreen-ui

Usage

Example of an Evergreen UI button

Import the button in the app:

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'
ReactDOM.render(
  <Button>I am using 🌲 Evergreen!</Button>,
  document.getElementById('root')
)

export default App;  

Theming Examples

Wrapping in the ThemeProvider component is required for styling and in order to use the ThemeProvider component, the user must pass it a value prop that is a Theme object.

Here is an example of the ThemeProvider overriding the default styles:

const newTheme = {
  ...defaultTheme,
  spinnerColor: 'hotpink'
}

const ThemedApp = () => (
  <ThemeProvider value={newTheme}>
    <Spinner />
  </ThemeProvider>
)

render(<ThemedApp />)

An example of nested theming where it is possible to theme certain parts of the app differently by nesting the ThemeProvider components.

const parentTheme = {
  ...defaultTheme,
  spinnerColor: 'hotpink'
}

const childTheme = {
  ...defaultTheme,
  spinnerColor: 'blue'
}

const ThemedParent = ({ children }) => (
  <ThemeProvider value={parentTheme}>
    <Spinner />
    { children }
  </ThemeProvider>
)

const ThemedChild = () => (
  <ThemeProvider value={childTheme}>
    <Spinner />
  </ThemeProvider>
)

render(
  <ThemedParent>
    <ThemedChild />
  </ThemedParent>
)

withTheme allows you to easily pass the theme object down to your components.

const theme = {
  ...defaultTheme,
  myNewButtonStyles: {
    color: 'white',
    backgroundColor: 'hotpink',
    height: 30,
    borderRadius: '5px',
  }
}

const ThemedApp = ({ children }) => (
  <ThemeProvider value={theme}>
    { children }
  </ThemeProvider>
)

const MyNewButton = ({ theme }) => (
  <button style={theme.myNewButtonStyles}>
    Custom styled button
  </button>
)

const MyNewThemedButton = withTheme(MyNewButton)

render(
  <ThemedApp>
    <MyNewThemedButton />
  </ThemedApp>
)

This is just a brief overview of Evergreen UI and its theming features. On the official site, you can read more on how to customize components layouts, typography, colors, icons and more.

References

• https://evergreen.segment.com/
• https://github.com/segmentio/evergreen