@elastic/eui
Advanced tools
@elastic/eui is a comprehensive library of UI components for building user interfaces in React applications. It is designed to provide a consistent and flexible design system, primarily used within the Elastic ecosystem, but it can be utilized in any React project. The library includes a wide range of components such as forms, tables, charts, and more, all designed to be accessible and customizable.
UI Components
EUI provides a variety of UI components like buttons, forms, and modals. The code sample demonstrates how to use the EuiButton component to create a button that shows an alert when clicked.
import { EuiButton } from '@elastic/eui';
function App() {
return <EuiButton onClick={() => alert('Button clicked!')}>Click me</EuiButton>;
}Data Visualization
EUI includes components for data visualization, such as charts and graphs. The code sample shows how to create a simple line chart using the EuiChart component.
import { EuiChart } from '@elastic/eui';
function ChartComponent() {
return <EuiChart type="line" data={[{ x: 1, y: 2 }, { x: 2, y: 3 }]} />;
}Theming and Customization
EUI allows for theming and customization of components to fit different design needs. The code sample demonstrates how to use the EuiProvider to apply a dark theme to an application.
import { EuiProvider } from '@elastic/eui';
function ThemedApp() {
return (
<EuiProvider colorMode="dark">
<YourAppComponents />
</EuiProvider>
);
}Material-UI (now MUI) is a popular React UI framework that implements Google's Material Design. It offers a wide range of components and customization options similar to EUI, but it is more widely used outside of the Elastic ecosystem and has a larger community and support base.
Ant Design is a React UI library with a comprehensive set of components and design guidelines. It is similar to EUI in terms of component variety and customization capabilities, but it follows a different design philosophy and is more popular in the Asian market.
Chakra UI is a modern React UI library that focuses on simplicity and accessibility. It offers a smaller set of components compared to EUI but emphasizes ease of use and flexibility, making it a good choice for projects that require a lightweight and customizable UI solution.
The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic.
Check out our full documentation site which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. Our FAQ below covers common usage questions ā for other general questions regarding EUI, check out the Discussions tab.
The Elastic UI Framework (EUI) is a design library in use at Elastic to build React applications that need to share our branding and aesthetics. It distributes typed UI React components and static assets for use in building web layouts. Alongside the React components, we ship theme & style utilities that can be used independently on their own.
The primary goal of this library is to provide reusable UI components that can be used throughout Elastic's web products. As React components, they remove CSS from the process of building UIs. As a single source of truth, the framework allows our designers to make changes to our aesthetic directly in the code. And unit test coverage for the UI components allows us to deliver a stable "API for user interfaces".
Please see Elastic's licensing FAQ: Iām using EUI or Elastic Charts in my application outside of Kibana, how does this affect me?
Many of Elastic's products are open source and rely upon this library to function. The Elastic UI Framework began as a folder of code in Kibana and we decided it could be used beyond that codebase. It exists as an independent library so that patterns can be shared across teams and design standards can be scaled across our organization. Since most of our products are open source, we treat this one similarly as far as public publishing and conversation even if its usage tends to focus more inward towards Elastic itself.
We use semver for versioning and use that to denote breaking changes in EUI upgrades. Traditionally we consider API changes in our prop names or existing component functionality to be a reason for a breaking change, but do not track the renaming of CSS selectors, mixins or other style changes under this same rigor.
Traditionally releases are made weekly against whatever is in the main branch and you can upgrade from NPM as you see fit.
Yes! We welcome community-contributed PRs, especially around feature requests that the EUI team may not have bandwidth to carry out alone. You can find documentation around creating and submitting new components in our wiki.
Bug reports and feature requests are most welcome, but our roadmap and prioritization are driven primarily by internal Elastic usage.
Please note that in order to keep our backlog manageable and focused on tasks we intend to complete, feature requests & tech debt issues that are inactive for a year will be auto-closed (bugs will remain open if determined to be reproducible and valid).
This activity counter can be soft reset by commenting on the issue directly, but please do so mindfully. We would ask that you proactively let the EUI team know why this request matters to you or how it impacts you or your users, in order to help us prioritize accordingly.
The EUI team, like everyone else, has a finite amount of time and resources, and it is not humanly possible for us to implement every task or feature requested of us. However, that's where the beauty of open source comes in - if your request is important to you, we strongly encourage you to contribute code directly to EUI that addresses your issue or request!
The EUI library was previously built upon Sass and is in the process of migrating to CSS-in-JS (specifically Emotion). While this work is in progress, we ask for your patience with our in-between state in areas such as documentation and setup.
If you're a Kibana developer with questions around CSS-in-JS usage in Kibana, please check out our FAQ discussion!
Our wiki docs contain instructions and guidelines on multiple areas of EUI usage and development that are too detailed for an initial README. For more information, see:
Dual-licensed under Elastic v2 and Server Side Public License, v1. See Elastic's licensing FAQ for details.
FAQs
Elastic UI Component Library
The npm package @elastic/eui receives a total of 127,419 weekly downloads. As such, @elastic/eui popularity was classified as popular.
We found that @elastic/eui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Ā It has 68 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."