Evergreen — React UI Framework by Segment

Introduction

Evergreen is a React UI framework created by Segment for building ambitious web applications. It provides a complete set of polished, accessible components with a design language that works well for data-heavy interfaces, admin panels, and developer tools.

What Evergreen Does

• Provides 30+ composable React components for enterprise UIs
• Ships a built-in theming system with sensible defaults
• Implements accessible patterns with keyboard navigation and ARIA attributes
• Offers layout primitives like Pane, Box, and Stack for flexible composition
• Includes specialized components for tables, dialogs, toasters, and file uploads

Architecture Overview

Evergreen uses a Box primitive model where every component extends a base Box that accepts layout, spacing, and styling props directly. The theming layer generates CSS-in-JS styles via a token-based system. Components are designed to be composable rather than monolithic, so a Dialog is built from Pane, Heading, and Button pieces that you can rearrange. State management is kept internal to each component with controlled and uncontrolled modes.

Self-Hosting & Configuration

• Install via npm and import components directly with tree shaking
• Customize the theme by wrapping your app in a ThemeProvider with overrides
• Use the defaultTheme object as a reference for available design tokens
• Components accept standard React props plus layout utilities from the Box primitive
• No global CSS required; styles are scoped to each component

Key Features

• Box-based composition model for flexible and predictable layouts
• Built-in theming with design tokens for colors, typography, and spacing
• Accessible by default with focus management and screen reader support
• Lightweight with no dependency on heavy CSS frameworks
• Polished component defaults that look good without customization

Comparison with Similar Tools

• Chakra UI — Similar composable approach, larger community, more components
• Ant Design — Enterprise-focused with heavier bundle and opinionated patterns
• Material UI (MUI) — Material Design based, larger ecosystem
• Mantine — Modern and feature-rich, hooks-first design
• shadcn/ui — Copy-paste components using Tailwind, not a traditional library

FAQ

Q: Does Evergreen support dark mode? A: Yes. Evergreen v7 introduced theme support for dark mode via the ThemeProvider component.

Q: Can I use Evergreen with Next.js? A: Yes. Evergreen works with Next.js including server-side rendering with proper configuration.

Q: Is Evergreen still actively maintained? A: Evergreen receives updates from the Segment team. Check the GitHub repository for the latest release activity.

Q: How does the Box primitive work? A: Every Evergreen component extends Box, which accepts CSS properties as props (e.g., padding, margin, display) and renders a div by default. You can change the element with the is prop.

Sources

• https://github.com/segmentio/evergreen
• https://evergreen.segment.com/