segmentio/evergreen

★ 12,427JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((Evergreen))
    What It Is
      React component library
      Enterprise UI kit
      By Segment
    Components
      Buttons
      Dialogs
      Form inputs
    Features
      CSS-in-JS styles
      Theming support
      Server-side render
    Tech
      React
      ui-box primitive
      npm package
    Audience
      React developers
      Product teams

mindmap root((Evergreen)) What It Is React component library Enterprise UI kit By Segment Components Buttons Dialogs Form inputs Features CSS-in-JS styles Theming support Server-side render Tech React ui-box primitive npm package Audience React developers Product teams

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build an enterprise dashboard with ready-made buttons, dialogs, and form inputs from a single npm package

USE CASE 2

Apply a custom brand theme across all components by adjusting the Evergreen theme tokens

USE CASE 3

Use server-side rendering with Next.js by calling extractStyles to avoid flash of unstyled content

USE CASE 4

Extend or restyle components at a low level using the ui-box primitive without fighting the library defaults

Tech stack

JavaScriptReactCSS-in-JSui-boxnpm

Getting it running

Difficulty · easy Time to first run · 30min

MIT license, use freely in any project, including commercial, with no restrictions beyond keeping the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1

Show me how to install evergreen-ui and render a Button and a Dialog in a React app with the default Evergreen theme

Prompt 2

How do I customize the Evergreen theme to use my own brand colors and fonts across all components?

Prompt 3

Help me set up Evergreen with Next.js server-side rendering using the extractStyles function

Prompt 4

I want to build a data table with sortable columns using Evergreen, which components should I use and how do I combine them?

Prompt 5

How do I extend an Evergreen component using ui-box to add custom styles without overriding the whole component?

Open on GitHub → Explain another repo

← segmentio on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.