Home

Awesome

<div align="center"> <a href="https://evergreen.segment.com/"> <img src="https://raw.githubusercontent.com/segmentio/evergreen/master/evergreen-github-hero.png" alt="Evergreen, A Design System for the Web. Evergreen is a React UI Framework for building ambitious products on the web. Brought to you by Segment."> </a> <br> <br> <a href="https://github.com/segmentio/evergreen/actions"> <img src="https://github.com/segmentio/evergreen/actions/workflows/ci.yml/badge.svg"> </a> <br> <br> </div>

Documentation & Community

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:

$ yarn add evergreen-ui
# or
$ npm install --save evergreen-ui

A working version, assuming you are using something like Create React App, might look like this:

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'))

Core values of 🌲 Evergreen

FAQ

Theming support?

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

How does Server Side Rendering (SSR) work?

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.

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!

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:

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.