@elastic/eui

What is @elastic/eui?

@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.

What are @elastic/eui's main functionalities?

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>
  );
}

Other packages similar to @elastic/eui

material-ui

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

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

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.

README

🚨 WARNING While open source, the intended consumers of this repository are Elastic products. Read the FAQ for details.

Elastic UI Framework

The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React? No problem! You can still use the CSS behind each component.

You should check out our living style guide, which contains many examples on how components in the EUI framework look and feel, and how to use them in your products.

Installation

To install the Elastic UI Framework, use the npm CLI.

npm install @elastic/eui

Running Locally

Node

We depend upon the version of node defined in .nvmrc.

You will probably want to install a node version manager. nvm is recommended.

To install and use the correct node version with nvm:

nvm install

Documentation

You can run the documentation locally at http://localhost:8030/ by running.

yarn
yarn start

Goals

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 look-and-feel directly in the code. And unit test coverage for the UI components allows us to deliver a stable "API for user interfaces".

Contributing

You can find documentation around creating and submitting new components in CONTRIBUTING.md.

Wiki

Consumption

• Consuming EUI

Maintenance

• Component design
• Component development
  • Creating components manually
  • Creating components with Yeoman
  • Testing
• Theming
• Releasing versions

License

Apache Licensed. Read the FAQ for details.