- Works out of the box. Evergreen contains a set of polished 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.

Documentation & Community

- Documentation
- GitHub Discussions

Evergreen v7 Migration guide

Evergreen v7 migration guide

Install and use components

🌲 Evergreen is made up of multiple components and tools which you can import one by one. All you need to do is install the evergreen-ui package:

``sh
$ yarn add evergreen-ui


or

`js
import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'

ReactDOM.render(I am using 🌲 Evergreen!, document.getElementById('root'))
`

Core values of 🌲 Evergreen

- **Evergreen is built on the belief that you can never predict all future requirements,
only prepare for it.** Instead of creating fixed configurations that work today, Evergreen promotes building systems that anticipate new and changing design requirements.

- Evergreen is built on the belief that things should work out of the box with smart defaults, but also offer full control when needed. For example, Evergreen uses CSS-in-JS and builds on top of the Box component in ui-box.

- Evergreen is built on the belief that using Evergreen and contributing to Evergreen should be a pleasant experience. We prioritize documentation and all the tools for a solid developer experience. We advocate respect and inclusivity in our writings and interactions.

FAQ

$3

Evergreen supports a robust theming layer out of the box. You can check out these docs for more information regarding theming in Evergreen.

$3

Evergreen offers easy Server Side Rendering (SSR) and automatic hydration.

Evergreen bundles its own CSS-in-JS solution from ui-box. To make it super easy to do server side rendering and hydration, Evergreen exposes a extractStyles()` function.

- How to use it with Next.js in the ssr-next example app.
- How to use it with GatsbyJS

Contributing to Evergreen

Please see CONTRIBUTING.md for more information on how to contribute!

🎉 Contributors

We will add you to the list if you make any meaningful contribution!

- Jeroen Ransijn
- Roland Warmerdam
- Ben McMahon
- Matt Shwery
- Colin Lohner
- Allen Kleiner
- Chris Chuck
- Brandon Scott
- ... many other on the Segment team and open-source contributors

This project is maintained by Segment

Please take a look at the contributing guide to better understand what to work on.

👏 Respect earns Respect

Please respect our Code of Conduct, in short:

- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members

License

Evergreen is released under the MIT license.
The BlueprintJS icons are licensed under a custom Apache 2.0 license.

Copyright © 2021 Segment.io, Inc.