Guide · Open source
How to use Evergreen: install evergreen-ui in React
Updated · written with AI from the project's own documentation and checked against our catalogue data
Evergreen is a set of ready-made React user interface components, such as buttons, built on the ui-box styling base and a theming layer. This guide is for React developers who want to add prebuilt components to a web application. By the end you will know what to install, how to render a first component, where theming and server-side rendering fit, and what to check before upgrading.
Evergreensegmentio/evergreen · ★ 12.4k · MIT Install options & downloads Quick start
- 1Check prerequisites. Confirm you have Node.js, yarn or npm, and a React project.
- 2Install evergreen-ui. Run yarn add evergreen-ui or npm install --save evergreen-ui in your project folder.
- 3Import a component. Import Button or another component from evergreen-ui in your React file.
- 4Render it. Place the component in your render tree and check it appears in the browser.
- 5Set up theming. Follow the theming documentation to adjust the look of components.
- 6Add SSR if needed. For Next.js, use the ssr-next example in the repository and the extractStyles() function.
- 7Read the migration guide. Review the v7 migration guide before upgrading or starting a long-term project.
What you need before you install Evergreen
Evergreen is a React library, so the project needs React. The README lists Node.js, yarn or npm, and React as the prerequisites. Evergreen is not meant for people who are not writing React code, and it is not a option for projects built on Vue or Angular.
- Node.js
- yarn or npm
- React
Install the evergreen-ui package
Evergreen is made up of multiple components and tools that you can import one by one. All you need to install is the evergreen-ui package, using either yarn or npm.
$ yarn add evergreen-ui
# or
$ npm install --save evergreen-uiRender your first Evergreen component
The README shows a working example that assumes a setup like Create React App. Import a component such as Button from evergreen-ui and render it into your root element.
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'))Customize the look with theming
Evergreen supports a theming layer out of the box, so you can change the look of components without rebuilding them. The project documentation at evergreen.segment.com has a theming page with the details.
- Read the theming docs before writing custom styles
- Components are built on the Box component in ui-box, which allows full control when you need it
Use server-side rendering with Next.js or similar frameworks
Evergreen offers server-side rendering (SSR) and automatic hydration. It bundles its own CSS-in-JS solution from ui-box and exposes an extractStyles() function to make SSR and hydration easier.
The README points to an ssr-next example app in the repository for Next.js, and to a GitHub issue for GatsbyJS.
Check the v7 migration guide before you commit
The README links to an Evergreen v7 migration guide. If you are starting a project that needs a stable API, read that guide first, because the README points to a major version migration.
What people use it for
- Building the interface of an internal or enterprise web product with consistent components
- Adding buttons and other prebuilt React components to a web application
- Rendering a React web app on the server with Next.js or a similar framework
- Customizing component appearance through the theming layer
Frequently asked questions
How do I install Evergreen?
Install the evergreen-ui package in a React project. Use yarn add evergreen-ui or npm install --save evergreen-ui, then import components such as Button from that package.
Is Evergreen free to use?
Evergreen is released under the MIT license, according to its README. The BlueprintJS icons it uses are licensed under a custom Apache 2.0 license.
Does Evergreen work with Vue or Angular?
No. Evergreen is a React UI framework, and its components are React-specific. Projects that need Vue or Angular should choose a library built for those frameworks.
Does Evergreen support server-side rendering?
Yes. Evergreen offers SSR and automatic hydration, and exposes an extractStyles() function. The repository includes an ssr-next example app for Next.js.
How does Evergreen compare to Material UI or Chakra UI?
The README lists Material UI, Chakra UI, Ant Design and Blueprint as comparable projects. It does not compare them on features, so review each one's documentation against your design and API needs.
Where do I find help if something breaks?
The README links to the Evergreen documentation at evergreen.segment.com and to GitHub Discussions for the project. Check the v7 migration guide first if you are on an older version.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Evergreen suits React developers who want prebuilt, themeable components and SSR support for a consistent web product. Teams that do not use React, or that need a long-term stable API without reading the v7 migration guide, should look at other options such as Material UI or Chakra UI.
Install options & downloads