Evergreen

Language: JavaScript

UI Framework

Evergreen was created by Segment to provide a modern React UI framework with a focus on design consistency, accessibility, and developer productivity. Unlike utility-first or unstyled libraries, Evergreen ships with a design system out-of-the-box while remaining customizable.

Evergreen is a React UI framework developed by Segment. It provides a set of polished, flexible, and accessible components designed for enterprise-grade web applications.

Installation

npm: npm install evergreen-ui

yarn: yarn add evergreen-ui

cdn: Evergreen does not provide an official CDN build; install via npm or yarn.

manual: Install via npm/yarn and import components directly from the package.

Usage

Evergreen provides ready-to-use UI components such as buttons, dialogs, tables, forms, and layouts. It also offers a theming system and accessibility support by default.

Button usage

import { Button } from 'evergreen-ui';

<Button appearance="primary">Click Me</Button>

Creates a primary button using Evergreen’s built-in styling.

Text Input

import { TextInput } from 'evergreen-ui';

<TextInput placeholder="Enter your name" />

Renders a styled text input field with a placeholder.

Dialog (Modal)

import { useState } from 'react';
import { Dialog, Button } from 'evergreen-ui';

function Demo() {
  const [isShown, setIsShown] = useState(false);
  return (
    <>
      <Dialog
        isShown={isShown}
        title="Evergreen Dialog"
        onCloseComplete={() => setIsShown(false)}
      >
        Modal content goes here
      </Dialog>
      <Button onClick={() => setIsShown(true)}>Show Dialog</Button>
    </>
  );
}

Demonstrates how to use Evergreen’s Dialog component with state management.

Table component

import { Table } from 'evergreen-ui';

<Table>
  <Table.Head>
    <Table.TextHeaderCell>Name</Table.TextHeaderCell>
    <Table.TextHeaderCell>Age</Table.TextHeaderCell>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.TextCell>John</Table.TextCell>
      <Table.TextCell>30</Table.TextCell>
    </Table.Row>
    <Table.Row>
      <Table.TextCell>Jane</Table.TextCell>
      <Table.TextCell>25</Table.TextCell>
    </Table.Row>
  </Table.Body>
</Table>

Implements a table with headers and rows using Evergreen’s table components.

Error Handling

Components not styled correctly: Ensure Evergreen’s default theme is applied by wrapping your app with ThemeProvider if needed.

Dialog not opening: Verify that state is being updated correctly when toggling the Dialog component.

Build issues with Evergreen: Check compatibility with your React version (Evergreen officially supports React 16+).

Best Practices

Use Evergreen components for building enterprise-grade dashboards and internal tools.

Leverage the theming API to customize the design system to match your brand.

Keep layouts consistent using Evergreen’s Pane and major layout primitives.

Combine Evergreen with styled-components or CSS-in-JS if further customization is required.

Always utilize built-in accessibility props and roles instead of overriding them manually.

Official Docs Github