# Evergreen — React UI Framework by Segment

> A pragmatic React component library for enterprise web applications, built and maintained by Segment for building polished admin interfaces and dashboards.

## Install

Save as a script file and run:

# Evergreen — React UI Framework by Segment

## Quick Use
```bash
npm install evergreen-ui
# In your component:
import { Button, Pane, Heading } from 'evergreen-ui'
<Pane padding={16}>
  <Heading>Hello Evergreen</Heading>
  <Button appearance="primary">Click Me</Button>
</Pane>
```

## 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/

---
Source: https://tokrepo.com/en/workflows/evergreen-react-ui-framework-segment-ddcffb44
Author: Script Depot