What is this?
Evergreen is Segment's React UI framework — a set of polished, enterprise-grade React components for web apps that work out of the box.
Evergreen is Segment's React UI framework — a set of polished, enterprise-grade React components for web apps that work out of the box.Is it a framework I build my whole app on, or a set of components I pick from?It's a component library: multiple components and tools you import one by one, all built on top of the ui-box React UI primitive for composability.
It's a component library: multiple components and tools you import one by one, all built on top of the ui-box React UI primitive for composability.How do I add it to my React app?Install the evergreen-ui package (npm install evergreen-ui), then import the components you need — it works in standard React setups like Create React App.
Install the evergreen-ui package (npm install evergreen-ui), then import the components you need — it works in standard React setups like Create React App.Do I need anything besides React to use it?Nothing beyond React and npm — the package pulls its own dependencies (downshift, lodash helpers); building the repo from source needs Node 14+.
Nothing beyond React and npm — the package pulls its own dependencies (downshift, lodash helpers); building the repo from source needs Node 14+.Does it force its own styling system on me?It uses CSS-in-JS — Evergreen bundles its own solution from ui-box — so styles live in your JavaScript rather than separate CSS files.
It uses CSS-in-JS — Evergreen bundles its own solution from ui-box — so styles live in your JavaScript rather than separate CSS files.Is it meant only for enterprise apps?The design language targets enterprise-grade web applications, but the components are general-purpose and work out of the box in any React app.
The design language targets enterprise-grade web applications, but the components are general-purpose and work out of the box in any React app.Can I use it in commercial projects for free?Yes — MIT, free even commercially. One caveat: the bundled BlueprintJS icons are licensed under a custom Apache 2.0 license.
Yes — MIT, free even commercially. One caveat: the bundled BlueprintJS icons are licensed under a custom Apache 2.0 license.Can I customize the look with my own theme?Yes — Evergreen supports a robust theming layer out of the box, and the documentation covers theming in detail.
Yes — Evergreen supports a robust theming layer out of the box, and the documentation covers theming in detail.Does it work with server-side rendering?Yes — it offers easy SSR with automatic hydration through an extractStyles() function, and the repo includes example setups for Next.js and GatsbyJS.
Yes — it offers easy SSR with automatic hydration through an extractStyles() function, and the repo includes example setups for Next.js and GatsbyJS.Why did Segment build its own UI kit?Its core beliefs: you can never predict all future requirements, so build systems that anticipate change; give smart defaults with full control when needed; and keep using and contributing to the library pleasant — hence the emphasis on documentation and developer experience.
Its core beliefs: you can never predict all future requirements, so build systems that anticipate change; give smart defaults with full control when needed; and keep using and contributing to the library pleasant — hence the emphasis on documentation and developer experience.How rough are major version upgrades?Breaking changes come with a migration guide — the repo publishes one for the jump to v7 — so you get a documented upgrade path rather than guesswork.
Breaking changes come with a migration guide — the repo publishes one for the jump to v7 — so you get a documented upgrade path rather than guesswork.What are similar projects?primitives, ant-design, chakra-ui, tamagui, styled-components, naive-ui, vuetify, primeng
primitives, ant-design, chakra-ui, tamagui, styled-components, naive-ui, vuetify, primengWhich topics is it in?css-in-js, design-systems, ui-kit, ssr, themes, enterprise, component-library, ui-components, customization, ui, web-development, react
css-in-js, design-systems, ui-kit, ssr, themes, enterprise, component-library, ui-components, customization, ui, web-development, react