What it is
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.
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.
Installation
npm install evergreen-uiGetting started
The smallest useful thing you can do with it, and what each part means.
import { Button } from 'evergreen-ui';
<Button appearance="primary">Click Me</Button>import { TextInput } from 'evergreen-ui';
<TextInput placeholder="Enter your name" />Advanced usage
Where the library earns its place over a simpler alternative.
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>
</>
);
}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>Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- 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.
Background
Why it exists, and what it was reacting to.
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.