ReactJS Evergreen

  • Last Updated : 23 May, 2022

Evergreen is the React UI framework. Evergreen is a design system for building awesome products on the web. It contains a set of React components that works out of the box, built on top of React UI primitive for endless composability. It provides a flexible framework and lots of visual design. Evergreen is an open-source tool with 11.5k GitHub stars and 760 GitHub forks.

Evergreen Tutorial

Tenet of Evergreen:

  • Works out of the box: Evergreen contains a set of React components that works out of the box.
  • Flexible & composable: Evergreen components are built on top of a React UI Primitive for endless composability.
  • Enterprise-grade: Evergreen features a UI design language for enterprise-grade web applications.

Prerequisites: 

  • React version react@16.8.0 or higher is installed in your system.
  • React DOM version  react-dom@16.8.0 or higher is installed in your system.

Using Evergreen:

Step 1: Primarily, we have to create a React app by following command:

npx create-react-app appname

Step 2: Change folder to appname by command:

cd appname

Project Structure: The folder structure now looks like this:

 

Installation: Evergreen is made up of multiple components and tools, which you can import one by one. It can be installed with NPM or Yarn using the following command.

npm i evergreen-ui
// or
yarn add evergreen-ui

Once Evergreen is installed as a dependency in your project, you can import it as:

import { Button } from 'evergreen-ui'

Then you can use these components like:

App.js

import { Button } from 'evergreen-ui'

function App() {
    return (
      <>
         <Button marginLeft={10} marginRight={10}>Default</Button>
        <Button marginRight={10} appearance="primary">
          Primary
        </Button>
        <Button marginRight={10} appearance="minimal">
          Minimal
        </Button>
      </>
    )
  }

 export default App

Step to run the application: Run the app by command :

npm start

Output:

 

Features:

  • Theming: Evergreen supports a robust theming layer out of the box. Evergreen ships with an all new, extensible theming architecture that lets users customize the look of the page and feel of the components in Evergreen as you want. You can target arbitrary styles and states of each component to achieve maximum flexibility and alignment with your brand. This page goes over some options and background of the theming architecture, and how you can leverage it in your apps.
  • Server Side Rendering (SSR):  Evergreen provides server-side rendering and automatic hydration. For the sake of easiness server-side rendering and hydration, Evergreen exposes a extractStyles() function that will do SSR for both at once.
  • SSR with Gatsby: It is easily compatible with gatsby.

Please write comments if you find anything incorrect, or if you want to share more information about the topic discussed above

My Personal Notes arrow_drop_up