Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • High contrast mode
    • Borders
    • Breakpoints
    • Colors
    • Sizing
    • Typography
  • Templates
    • Page template
    • Sitewide search
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Buttons
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tabs
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Form controls
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Tabular content
    • Tables
    • Data grid
  • Editors & Syntax
    • Code
    • Markdown
  • Utilities
    • Accessibility
    • Auto sizer
    • Beacon
    • Color palettes
    • Copy
    • CSS utility classes
    • Delay
    • Error boundary
    • Focus trap
    • Highlight and mark
    • HTML ID generator
    • I18n
    • Inner text
    • Mutation observer
    • Outside click detector
    • Overlay mask
    • Portal
    • Pretty duration
    • Provider
    • Resize observer
    • Scroll
    • Text diff
    • Text truncation
    • Window events
  • EUI
  • Guidelines
  • Getting started

Getting started


Installation

EUI is published through NPM as a dependency. To install EUI into an existing project, use the

yarn CLI (npm is not supported).

โœ„๐˜—
bash code block:
โœ„๐˜—yarn add @elastic/eui

Note that EUI has several peerDependencies requirements that will also need to be installed when starting with a blank project.

โœ„๐˜—
bash code block:
โœ„๐˜—yarn add @elastic/eui @elastic/eui-theme-borealis @elastic/datemath @emotion/react @emotion/css moment

You can read more about other ways to consume EUI in our wiki.

Setting up your application

EUI uses CSS-in-JS (specifically Emotion) for its styles and theming. As such, we require an <EuiProvider> wrapper around your application in order for various theme-related UI & UX (such as dark/light mode switching) to work as expected.

โœ„๐˜—
tsx code block:
โœ„๐˜—import React from 'react'; import { EuiProvider, EuiText } from '@elastic/eui'; const MyApp = () => ( <EuiProvider> <EuiText><p>Hello World!</p></EuiText> </EuiProvider> ); export default MyApp;

For more configuration options of the provider, see the

EuiProvider documentation.

Styling your application

You can build custom components using EUI's theme tokens, consumed via useEuiTheme(). The below example uses Emotion's css prop, but any CSS-in-JS library should be able to interpolate the JS variables.

For more ways to consume EUI's theme, see the EuiThemeProvider documentation.

โœ„๐˜—
tsx code block:
โœ„๐˜—import React from 'react'; import { EuiIcon, EuiCode, EuiText, useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; export default () => { const { euiTheme } = useEuiTheme(); return ( <EuiText> <p> <EuiIcon type="stopFilled" size="xxl" css={{ color: euiTheme.colors.primary }} />{' '} This primary color will adjust based on the light or dark theme value </p> <p css={css` background: ${euiTheme.colors.lightShade}; padding: calc(${euiTheme.size.base} * 2); `} > The padding of this box is created using <EuiCode>calc()</EuiCode>{' '} because EUI&apos;s theme sizes are string pixel values that are calculated off the theme&apos;s <EuiCode>base</EuiCode> </p> </EuiText> ); };

Customizing with classes

For consumers using vanilla or preprocessed CSS, all components allow you to pass a custom className prop, which will be appended onto the component.

Avoid overwriting .eui class names

EUI's class names are not a guaranteed API and are prone to change, which will risk breaking your theme. Target your custom classNames instead.

While EUI's styles are generally low in specificity due to our usage of CSS-in-JS, you may need to ensure that your CSS is defined after ours in your <head>. See EuiProvider's cache customization for more style injection options.

โœ„๐˜—
tsx code block:
โœ„๐˜—import React from 'react'; import { EuiButton } from '@elastic/eui'; const myCustomCSS = ` .myCustomButton { background-color: pink; } `; export default () => ( <> <style>{myCustomCSS}</style> <EuiButton className="myCustomButton">Hello world!</EuiButton> </> );

Customizing the style tokens

EUI can be slightly customized to fit your branding needs by altering the base tokens like color and typography. You can pass a full or partial list of override tokens to the EuiProvider's modify prop.

Touch the least amount of variables possible

By nature, EUI is very rigid. You shouldn't need much to make drastic changes to color. Most themes are less then a dozen variable overwrites in total.

For more examples of the modify prop, see the EuiThemeProvider docs.

โœ„๐˜—
tsx code block:
โœ„๐˜—import React, { FunctionComponent, ReactNode } from 'react'; import { EuiCode, EuiText, EuiThemeProvider, useEuiTheme } from '@elastic/eui'; const Box: FunctionComponent<{ children: ReactNode }> = ({ children }) => { const { euiTheme } = useEuiTheme(); return ( <EuiText css={{ background: euiTheme.colors.lightShade, padding: euiTheme.size.xl, }} > <p>{children}</p> </EuiText> ); }; export default () => { const overrides = { colors: { LIGHT: { lightShade: '#d3e6df' }, DARK: { lightShade: '#394c4b' }, }, }; return ( <div> <EuiThemeProvider modify={overrides}> <Box> The background of this box is using the locally overridden value of{' '} <EuiCode>euiTheme.colors.lightShade</EuiCode> </Box> </EuiThemeProvider> </div> ); };

Fonts

By default, EUI ships with a font stack that includes some outside, open source fonts. If your system is internet available you can include these by adding the following imports to your SCSS/CSS files, otherwise you'll need to bundle the physical fonts in your build. EUI will drop to System Fonts (which you may prefer) in their absence.

โœ„๐˜—
html code block:
โœ„๐˜—<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />

Or grab all weights, including italics, between 400 and 700 as a variable font.

โœ„๐˜—
html code block:
โœ„๐˜—<link href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet" />

Embedding with @font-face

If your application doesn't allow grabbing the font assets from a CDN, you'll need to download and locally provide the font files. You can download the files directly from their source site rsms.me/inter/, then follow the instructions in the provided CSS file for importing. We recommend using the single variable font file and importing with the following settings:

โœ„๐˜—
css code block:
โœ„๐˜—@font-face { font-family: 'Inter'; font-weight: 300 900; font-display: swap; font-style: oblique 0deg 10deg; src: url("Inter.var.woff2") format("woff2"); }

Components, Services and Testing imports

You can import React components from the top-level EUI module.

โœ„๐˜—
tsx code block:
โœ„๐˜—import { EuiButton, EuiCallOut, EuiPanel, } from '@elastic/eui';

Most services are published from the lib/services directory. Some are published from their module directories in this directory.

โœ„๐˜—
tsx code block:
โœ„๐˜—import { keys } from '@elastic/eui/lib/services'; import { Timer } from '@elastic/eui/lib/services/time';

Test utilities are published from the lib/test directory.

โœ„๐˜—
tsx code block:
โœ„๐˜—import { findTestSubject } from '@elastic/eui/lib/test'; // Enzyme import { findByTestSubject, render, screen } from '@elastic/eui/lib/test/rtl'; // React Testing Library

Customizing component defaults

While all props can be individually customized via props, some components can have their default props customized globally via EuiProvider's componentDefaults API. Read more in EuiProvider's documentation.

โœ„๐˜—
tsx code block:
โœ„๐˜—<EuiProvider componentDefaults={{ EuiTable: { responsiveBreakpoint: 's', }, EuiTablePagination: { itemsPerPage: 20, }, EuiFocusTrap: { crossFrame: true }, EuiPortal: { insert }, }} > <App /> </EuiProvider>
Edit this page

Next
Accessibility
  • Installation
  • Setting up your application
  • Styling your application
    • Customizing with classes
    • Customizing the style tokens
  • Fonts
    • Embedding with @font-face
  • Components, Services and Testing imports
  • Customizing component defaults
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with โค by Elastic