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.

Build Status

Documentation & Community

Evergreen v3 to v4 Migration guide

Evergreen v3 to v4 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 v4 supports theming partially. It is still complex to theme Evergreen. We have done exploratory work to make theming more powerful and accessible. The progress is available in the v4-create-theme branch.

How does Server Side Rendering (SSR) work?

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

Evergreen bundles 2 CSS-in-JS solutions, from glamor and ui-box. To make it super easy to do server side rendering and hydration, Evergreen exposes a extractStyles() function that will do SSR for both at once.

Contributing to Evergreen

⚙ Step 1. Configuring your editor

If you are using Atom, make sure to install the prettier-atom, linter and linter-xo packages.

All the configuration for prettier and xo is in the package.json. You shouldn't have to configure things separately, please file a issue if there's a problem.

📖 Step 2. Get storybook up and running

To actually start seeing the components you have to run React Storybook:

$ yarn dev

🤓 Scripts explained

Inside the package.json there are a bunch of scripts that this repo uses to run the project in development and to build the project.

Below you can read a description of each script.

For the following command:

yarn create-package utils

The following file tree will be generated:

/src/utils
├── /src/
└── index.js

You can pass one or more components to this command.

For the following command:

yarn create-package:components typography Text Heading

The following file tree will be generated:

/src/typography
├── /src/
|   │── Text.js
|   └── Heading.js
├── /stories/
│   └── index.stories.js
└── index.js

📖 Step 3. Run evergreen docs locally

Evergreen docs depends on main lib built.

Run the following commands to run it in your local:

$ yarn build
$ cd docs
$ yarn install
$ yarn dev

🎉 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 © 2017 Segment.io, Inc.