evergreen

Evergreen is a React component library built and maintained by Segment. It provides a set of pre-built interface elements, such as buttons, dialogs, and form inputs, intended for enterprise-grade web products. You install a single package called evergreen-ui and import the components you need from it.

The library is designed with composability in mind. Components are built on top of a lower-level primitive called Box from a companion package called ui-box, which allows you to style and extend them without being locked into a fixed visual language. Styles are applied using a CSS-in-JS approach, meaning styles are generated in JavaScript at runtime rather than through separate stylesheet files.

Evergreen supports theming so you can adjust colors, fonts, and other visual properties across the whole component set. Server-side rendering is also supported for applications that generate HTML on the server before sending it to the browser. The library exposes an extractStyles() function to handle this, and the README links to examples for using it with Next.js and GatsbyJS.

The library is positioned as a design system for teams building products that will grow and change over time. The README states its guiding belief is that component systems should prepare for future requirements rather than lock in today's assumptions. Components are expected to work with sensible defaults while still allowing detailed customization when needed.

Documentation is available at evergreen.segment.com. Community discussion takes place through GitHub Discussions. The library is released under the MIT license and has been maintained by multiple contributors from the Segment team alongside open-source contributions.