Evergreen is the UI framework upon we build product experiences at Segment. It serves as a flexible framework, and a lot of its visual design is informed through plenty of iteration with our design team, and external contributors.

Evergreen is based off a set of principles that help guide its decision:

1. Flexibility - Evergreen should be as flexible and composable as possible, allowing its users to build many variations of UI. Evergreen is built off of ui-box to allow for endless flexibility.
2. Sensible Defaults - Evergreen should come with sensible defaults out-of-the-box, and let its developers and customize it via an expressive API.
3. Contributor-Friendly - Evergreen emphasizes robust documentation and a friendly tone in its writing so those internally and externally can feel empowered to contribute back to the framework and bring their perspectives.

Evergreen can be installed by either NPM or Yarn, using the following command(s). You should also have react@16.8.0 and react-dom@16.8.0 or higher versions.

$ npm install evergreen-ui
// OR
$ yarn add evergreen-ui

Once Evergreen is installed as a dependency in your project, you can import it as such:

import { Button, Pane, Text, majorScale } from 'evergreen-ui'

Then, you can use those components in your code like:

<Pane display="flex" alignItems="center" marginX={majorScale(2)}>
  <Button>Click me!</Button>
  <Text>This is a clickable Button</Text>
</Pane>

Evergreen also comes with a Codesandbox Template. You can use it as an interactive prototyping environment to validate your ideas and send them to other folks. You can start by opening up the CodeSandbox Template here