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.

Tenet of Evergreen

• Works out of the box: Evergreen contains React components that work 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 [email protected] or higher is installed in your system.
• React DOM version [email protected] 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:

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:

ReactJS Evergreen

Features of Evergreen

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