What Is ReactJS Evergreen ?

In this article, we will learn what is a ReactJs Evergreen.

• 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.

Tenet of Evergreen:

1. Working out of the box: Evergreen includes a collection of React components.
2. Evergreen components are created on top of a React UI Primitive for unlimited composability, making them flexible and composable.
3. Enterprise-grade web apps are supported by Evergreen’s UI design language.

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.

Features:

1. Theming: Evergreen has a strong theming layer by default. Evergreen comes features a brand-new, extensible theming framework that enables users to alter the components’ appearance and feel anyway they see fit. Each component’s styles and states can be targeted in any combination for maximum flexibility and brand consistency.
2. Evergreen offers automatic hydration in addition to server-side rendering (SSR). Evergreen includes an extractStyles() function that will perform SSR for both hydration and server-side rendering simultaneously.
3. SSR with Gatsby: It is easily compatible with gatsby.

First of all, we have to create a react application.

npx create-react-app appname

And then, Install Evergreen package.

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

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

Now open your file and add the code given below :

import { Button } from 'evergreen-ui'
import './App.css';

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;

Output: