Library / SDK
segmentio/evergreen avatar
segmentio/evergreen

Evergreen builds every component on Box, and the newest release is still 7.1.9

🌲 Evergreen React UI Framework by Segment

12,427 stars801 forksJavaScriptMIT

At a glance

What is it?
Evergreen is Segment's MIT licensed React UI kit published as evergreen-ui, with individually importable components, commonjs, esm, umd, and codemod outputs. Composition runs through the Box component in ui-box with CSS-in-JS styling, and the newest release is 7.1.9 from June 2023 even though master received a push on June 25, 2026.
Who is it for?
Evergreen suits a team that wants polished, composable components with a theming layer and an SSR escape hatch already worked out, and that is content to track a major version with codemods and a migration guide. It does not suit a team that needs new releases: the newest published version is 7.1.9 from June 21, 2023, so anything committed to master since then, including the push of June 25, 2026, is not in a tagged release.
Can I use it commercially?
Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
Is it still maintained?
Yes. The repository last received commits 142 days ago.
What is it written in?
Mainly JavaScript, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on November 14, 2026, and from our analysis. They are not legal advice.

From daily snapshots

Star history

  • segmentio/evergreen12,427 ★ · +5
Star history
Repository2026-09-222026-11-14
segmentio/evergreen12.4k12.4k

5 Stars in the last 53 days, measured from the daily GitHub snapshot. Compare with other projects

Editorial analysis

You install one package, but the tarball carries five build outputs

Evergreen is made up of multiple components and tools which you can import one by one, and installation is a single package:

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

The package is named evergreen-ui at version 7.1.9, and its manifest exposes four entry points: main points at commonjs/index.js, module at esm/index.js, unpkg at umd/evergreen.min.js, and types at index.d.ts. The files array ships commonjs, esm, umd, index.d.ts, codemods/dist, and types, and sideEffects is set to false so a bundler can drop unused imports. That layout has a practical consequence. You get tree shaking through the esm field, a prebuilt browser bundle for script tags through the unpkg field, and migration tooling inside the same download. The cost is package weight that includes tooling you will only touch during a v7 upgrade.

The usage sample still mounts with ReactDOM.render

The README's first example is deliberately short, and it assumes a Create React App style project:

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

Two details matter more than the sample itself. The import is named, so a project takes only the components it names rather than the whole kit. The mount call is ReactDOM.render against a root element, which belongs to the 7.1.9 era rather than to the newest React rendering APIs, so a team on a newer mount pattern edits the first line it copies. Note also where the rest of the guidance lives: the documentation is hosted at evergreen.segment.com, so the sample and the live documentation age on different clocks.

Seven releases stopped in 2023 while master kept taking commits

The published history is v7.1.9 on June 21, 2023, v7.1.8 on May 5, 2023, and v7.1.7 on April 26, 2023, and package.json agrees with the newest of them at 7.1.9. The branch itself is a different story: the last push to the default branch, master, landed on June 25, 2026, so work has continued long after the last tag shipped. The gap is the fact to plan around. Anything committed since the last release exists on master but not in a tagged release. Pin 7.1.9 deliberately, and treat the date as a decision rather than a footnote.

extractStyles() is the entire server side rendering contract

Evergreen bundles its own CSS-in-JS solution from ui-box, and that choice dictates how server rendering has to be wired. Because styles are produced by the component tree rather than by a shipped stylesheet, the framework needs a way to collect them before the browser takes over, so the package exposes an extractStyles() function alongside automatic hydration. Two paths are documented: an ssr-next example app inside examples/ssr-next, and GatsbyJS guidance, which lives in issue 154 rather than in the docs site. The consequence is narrow but real. Next.js and Gatsby have written answers, and for any other framework or router you are the one who has to work out where extractStyles() runs, when it runs, and how the result reaches the client without a flash of unstyled content.

Theming lives on the documentation site, not in a token file you can diff

Theming is one of two questions the project's own FAQ answers, and the answer is a link to the theming section of the documentation site rather than a file in the repository. The top-level listing has no theme directory or token file.

Composition bottoms out in Box and a CSS-in-JS runtime

The framework's stated design position is that you can never predict all future requirements, only prepare for it, which is why it avoids fixed configurations and instead promotes systems that absorb new requirements. The mechanism behind that position is that components are built on top of the Box component in ui-box, combined with CSS-in-JS, so spacing and layout are props rather than class names you have to match up. Smart defaults come with full control, which is the same tradeoff read from the other side: a Button renders correctly with no configuration, and the escape hatch is a prop.

The build compiles one source tree three ways and ships the codemods with it

The build script starts with icon generation and then runs five targets concurrently under the names commonjs, esm, umd, codemods, and types. Commonjs comes from tsc through tsconfig.commonjs.json, esm comes from babel with stories, test, __tests__, and types excluded, types come from a separate tsc project, and the UMD bundle comes from rollup. Codemods have their own build that runs inside the codemods directory. Two consequences follow for anyone tracking this codebase. Version migration tooling is a published part of the package rather than a separate install, and adding a component is a scaffolded act driven by tools/create-package.js and tools/create-package-components.js rather than a hand-created directory, so a new component inherits whatever that generator emits. Local development runs start-storybook on port 6006.

Contributors are listed by name, and the copyright line is still 2021

Maintenance is attributed to Segment, and the front page carries a named contributor list of eight people plus acknowledgements of others on the Segment team, with the promise that you are added for any meaningful contribution. Contributions are routed through .github/CONTRIBUTING.md, and conduct is governed by .github/CODE_OF_CONDUCT.md, which the README summarizes in five points. Two details deserve attention. The copyright line still reads Segment.io, Inc. 2021 while the branch has been pushed as recently as June 25, 2026, which is a fair signal that the front page is not kept in step with the code. And the licensing is not one piece: the code is MIT, but the BlueprintJS icons ship under a custom Apache 2.0 license, so a license review has to cover two artifacts with different terms.

Editorial conclusion

Evergreen suits a team that wants polished, composable components with a theming layer and an SSR escape hatch already worked out, and that is content to track a major version with codemods and a migration guide. It does not suit a team that needs new releases: the newest published version is 7.1.9 from June 21, 2023, so anything committed to master since then, including the push of June 25, 2026, is not in a tagged release. Before adopting it, check which of your framework's SSR hooks line up with extractStyles(), read the v7 migration guide, and confirm you can live with an icon set licensed separately from the code.

Frequently asked questions

How do I install Evergreen?

The package is evergreen-ui, added with yarn add evergreen-ui or npm install --save evergreen-ui, and components are imported individually, for example import { Button } from 'evergreen-ui'. The published files are commonjs, esm, umd, index.d.ts, codemods/dist, and types.

Does Evergreen support server side rendering?

It offers server side rendering with automatic hydration and exposes an extractStyles() function for it, because it bundles its own CSS-in-JS solution from ui-box. A Next.js answer exists in the ssr-next example app under examples/ssr-next, and the GatsbyJS answer lives in GitHub issue 154.

What is the current version of Evergreen?

package.json and the newest GitHub release both report 7.1.9, published June 21, 2023, after 7.1.8 and 7.1.7 earlier in 2023. The master branch last received a push on June 25, 2026.

How does Evergreen handle theming?

A theming layer is provided and covered in the theming documentation on the project's own site, which is what the FAQ in the README links to. The repository root itself carries no theme directory or token file.

What license is Evergreen released under?

Evergreen is released under the MIT license, while the BlueprintJS icons it uses are licensed separately under a custom Apache 2.0 license. Copyright is held by Segment.io, Inc.

Official sources

  1. License: MIT
  2. Project website
  3. README
  4. Releases
  5. segmentio/evergreen on GitHub
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/segmentio-evergreen.svg)](https://hysenlabs.com/projects/segmentio-evergreen)

Star history chart for your README

markdown
[![Star history](https://hysenlabs.com/chart/segmentio-evergreen.svg)](https://hysenlabs.com/projects/segmentio-evergreen)

Was this useful?