DEV Community

Leo Kalshteyn
Leo Kalshteyn

Posted on

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;  
Enter fullscreen mode Exit fullscreen mode

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 />)
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)