Elastic EUI

Elastic EUI (Elastic UI Framework) is a design system and React component library built to power Kibana and Elastic’s other web products. It ships 90+ typed, accessible components — buttons, data grids, flyouts, forms, navigation, comment lists, and more — alongside shared style utilities, design tokens, and theme primitives that can be consumed independently of the components themselves.

The project lives in a Yarn workspaces monorepo: the core @elastic/eui package sits alongside @elastic/eui-theme-common and @elastic/eui-theme-borealis (which supply the token/theme layer), a Storybook-driven documentation site, an ESLint plugin, and internal test helpers. Styling is implemented with Emotion CSS-in-JS across the majority of components, giving consumers a fully typed, themeable, framework-consistent UI surface rather than a loose grab-bag of widgets.

What You Get

• 90+ production-grade React components covering layout, navigation, data display, forms, and feedback (data grids, flyouts, combo boxes, context menus, comment lists, and more)
• A themeable design-token system (@elastic/eui-theme-common + @elastic/eui-theme-borealis) that can restyle the entire component set without touching component code
• Emotion-based CSS-in-JS styling with typed style hooks (e.g. useEuiButtonColorCSS) instead of hand-maintained global stylesheets
• First-class TypeScript definitions generated from strict-mode source, so consumers get accurate prop typing and autocomplete out of the box
• A published Storybook instance and documentation site (eui.elastic.co) showing live, editable examples for every component
• Built-in accessibility behavior (focus management, ARIA wiring, keyboard navigation) baked into components like modals, flyouts, and combo boxes rather than left to the consumer

Common Use Cases

• Building internal admin dashboards or data-heavy tools that need a consistent, accessible component set without designing one from scratch
• Building Kibana plugins or Elastic Stack integrations that need to visually and behaviorally match the native Kibana UI
• Standing up a themeable design system for a product team by using EUI’s token layer as the base and overriding it with a custom theme
• Building data-dense interfaces (tables, data grids, filters, facets) where EUI’s EuiDataGrid and EuiBasicTable cover most of the heavy lifting
• Prototyping React UIs quickly with Storybook-documented components that already handle responsive layout and dark mode

Under The Hood

Architecture EUI lives in a Yarn workspaces monorepo (packages/*) with the installable @elastic/eui package under packages/eui re-exporting components, services, utils, and global_styling from a single src/index.ts barrel. Each of the 90+ components is isolated under src/components/<name>/ with its own implementation, Storybook stories, unit tests, and snapshots colocated — a clean modular structure rather than a monolithic component tree. Theming is deliberately decoupled from component logic: @elastic/eui-theme-common defines shared tokens and types, while @elastic/eui-theme-borealis supplies concrete theme values, both consumed by components through typed style hooks (e.g. useEuiButtonColorCSS, useEuiButtonFocusCSS in global_styling/mixins/_button.ts) rather than hardcoded styles — so swapping the token package restyles the whole library without touching component code.

Tech Stack The library targets React 18 with strict TypeScript 5.8 (strict: true, noUnusedLocals), compiled via a custom Babel pipeline (scripts/compile-eui.js) rather than a bundler like Rollup or Webpack directly, and packaged with both CommonJS (lib) and ESM (es) outputs plus a generated eui.d.ts. Styling runs almost entirely through Emotion (@emotion/react, @emotion/cache), used in roughly 300 of the component/style files, layered on top of a smaller residual SCSS surface. Storybook 10 (@storybook/react-vite) is the primary documentation and visual-development environment, backed by @storybook/test-runner for interaction tests. CI runs on Buildkite (.buildkite/pipeline.yml).

Code Quality Testing is extensive: 765+ test files using Jest (test-runner-jest.config.js) with snapshot testing colocated per component, plus Cypress for end-to-end and visual-regression coverage (test-cypress.js, test-visual-regression.js). Linting combines ESLint (with an in-repo custom eslint-plugin), Stylelint for both CSS-in-JS and Sass, and a full tsc --noEmit type-check as part of yarn lint. Naming and file layout are consistent across all 90+ component directories, and a pre-push hook runs the staged-test suite before commits reach CI.

API Design Component props are extensively documented inline via TSDoc comments that surface directly in the generated type definitions and Storybook controls, giving consumers accurate autocomplete and inline guidance without leaving their editor. Common cross-cutting concerns — disabled state, common HTML props, exclusive prop unions — are factored into shared helper types (CommonProps, ExclusiveUnion, EuiDisabledProps) reused across components, keeping the public API consistent rather than each component reinventing prop conventions. Getting started requires only importing a component and, for full theming, wrapping the app in an EUI theme provider — a small amount of required boilerplate for the amount of design-system power it unlocks.