-
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
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
-
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
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.
- How to use it with Next.js in the ssr-next example app.
- How to use it with GatsbyJS
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.
-
yarn dev
: Starts the development React Storybook. -
yarn test
: Lints the JavaScript files using XO and then runs the unit tests using AVA. -
yarn build
: Builds all of the JavaScript files using Babel. -
yarn clean
: removes all untracked files (git clean -Xdf
). -
yarn release
: Releases new version of Evergreen (requiresnp
to be installed globally). -
yarn create-package
: This command scaffolds a package with no specific boilerplate. It's useful for creating utilities.
For the following command:
yarn create-package utils
The following file tree will be generated:
/src/utils
โโโ /src/
โโโ index.js
yarn create-package:components
: This command scaffolds a package with React component(s) boilerplate.
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
๐ Contributors
We will add you to the list if you make any meaningful contribution!
- Jeroen Ransijn
- Roland Warmerdam
- Ben McMahon
- Matt Shwery
- ... 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 ยฉ 2017 Segment.io, Inc.