### Install EUI with Essential Dependencies

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup

Installs EUI along with its critical peer dependencies, including the Borealis theme, datemath utilities, and Emotion for styling. Essential for a complete and functional EUI setup.

```bash
yarn add @elastic/eui @elastic/eui-theme-borealis @elastic/datemath @emotion/react @emotion/css moment
```

--------------------------------

### Install EUI with Essential Dependencies

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup/index

Installs EUI along with its critical peer dependencies, including the Borealis theme, datemath utilities, and Emotion for styling. Essential for a complete and functional EUI setup.

```bash
yarn add @elastic/eui @elastic/eui-theme-borealis @elastic/datemath @emotion/react @emotion/css moment
```

--------------------------------

### Install EUI and Dependencies with Yarn

Source: https://eui.elastic.co/docs/getting-started/setup/index

Installs EUI along with its essential theme and peer dependencies like `@elastic/datemath`, `@emotion/react`, `@emotion/css`, and `moment`. This ensures all necessary packages are present for EUI to function correctly.

```bash
yarn add @elastic/eui @elastic/eui-theme-borealis @elastic/datemath @emotion/react @emotion/css moment
```

--------------------------------

### Install EUI Package with Yarn

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup/index

Installs the core Elastic UI package using the Yarn package manager. This is the fundamental step to integrate EUI into your project.

```bash
yarn add @elastic/eui
```

--------------------------------

### Install EUI Package with Yarn

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup

Installs the core Elastic UI package using the Yarn package manager. This is the fundamental step to integrate EUI into your project.

```bash
yarn add @elastic/eui
```

--------------------------------

### Install EUI with Core Dependencies (Bash)

Source: https://eui.elastic.co/docs/getting-started/setup

Installs EUI along with its essential theme and utility dependencies. This command includes the core EUI package, the Borealis theme, datemath, Emotion for styling, and Moment.js for date handling.

```bash
yarn add @elastic/eui @elastic/eui-theme-borealis @elastic/datemath @emotion/react @emotion/css moment
```

--------------------------------

### Install EUI with Yarn

Source: https://eui.elastic.co/docs/getting-started/setup/index

Installs the core Elastic UI package using the Yarn package manager. This is the primary step to add EUI to your project.

```bash
yarn add @elastic/eui
```

--------------------------------

### Install EUI Core Package (Bash)

Source: https://eui.elastic.co/docs/getting-started/setup

Installs the core Elastic UI (EUI) package using Yarn. This is the primary step for adding EUI to your project. Ensure you are using Yarn as npm is not supported.

```bash
yarn add @elastic/eui
```

--------------------------------

### uiPlugin Example and Properties

Source: https://eui.elastic.co/docs/components/editors-and-syntax/markdown/plugins

Illustrates a concrete example of a uiPlugin object and details its properties like name, button configuration, helpText, editor, and formatting.

```tsx
const myPluginUI = {
  name: 'myPlugin',
  button: {
    label: 'Chart',
    iconType: 'visArea',
  },
  helpText: (<div>A node that explains how the syntax works</div>),
  editor: function editor({ node, onSave, onCancel }) { return ('something'); },
};

// Properties:
// name: string - The name of your plugin.
// button: object - Takes a label and an icon type for the toolbar button.
//   label: string - The display label for the button.
//   iconType: string - The EUI icon type for the button.
// helpText: ReactNode - Contains information and an example for syntax utilization.
// editor: function - Provides UI controls for building initial content. Must exist if formatting does not.
// formatting: object - Defines how the plugin's markdown tag is styled if no editor is provided.
```

--------------------------------

### Setup EUI Application with EuiProvider

Source: https://eui.elastic.co/docs/getting-started/setup/index

Demonstrates how to wrap your React application with `<EuiProvider>` to enable EUI's theming and UI features. It includes importing necessary components from `@elastic/eui`.

```tsx
import React from 'react';
import { EuiProvider, EuiText } from '@elastic/eui';

const MyApp = () => (
  <EuiProvider>
    <EuiText><p>Hello World!</p></EuiText>
  </EuiProvider>
);

export default MyApp;
```

--------------------------------

### Customize EUI Component Defaults with EuiProvider

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup

This example demonstrates how to use the EuiProvider component to set default configurations for various EUI components like EuiTable, EuiTablePagination, EuiFocusTrap, and EuiPortal. This is useful for applying consistent settings across your application without prop drilling.

```tsx
<EuiProvider
  componentDefaults={{
    EuiTable: { responsiveBreakpoint: 's' },
    EuiTablePagination: { itemsPerPage: 20 },
    EuiFocusTrap: { crossFrame: true },
    EuiPortal: { insert }
  }}
>
  <App />
</EuiProvider>
```

--------------------------------

### Basic EuiProvider Setup

Source: https://eui.elastic.co/docs/utilities/provider/index

Demonstrates the basic setup of EuiProvider at the root of a React application. This component is essential for EUI's functionality and styling, providing necessary context providers.

```jsx
import { EuiProvider } from '@elastic/eui';
const MyApp = () => (
  <EuiProvider>
    {/* Content */}
  </EuiProvider>
);
```

--------------------------------

### Customize EUI Component Defaults with EuiProvider

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup/index

This example demonstrates how to use the EuiProvider component to set default configurations for various EUI components like EuiTable, EuiTablePagination, EuiFocusTrap, and EuiPortal. This is useful for applying consistent settings across your application without prop drilling.

```tsx
<EuiProvider
  componentDefaults={{
    EuiTable: { responsiveBreakpoint: 's' },
    EuiTablePagination: { itemsPerPage: 20 },
    EuiFocusTrap: { crossFrame: true },
    EuiPortal: { insert }
  }}
>
  <App />
</EuiProvider>
```

--------------------------------

### Basic EuiProvider Setup

Source: https://eui.elastic.co/docs/utilities/provider

Demonstrates the basic setup of EuiProvider at the root of a React application. This component is essential for EUI's functionality and styling, providing necessary context providers.

```jsx
import { EuiProvider } from '@elastic/eui';
const MyApp = () => (
  <EuiProvider>
    {/* Content */}
  </EuiProvider>
);
```

--------------------------------

### EUI UI Plugin Example

Source: https://eui.elastic.co/docs/components/editors-and-syntax/markdown/plugins/index

A TypeScript/React example demonstrating the structure of a UI plugin for EUI's markdown editor, including name, button configuration, and an editor function.

```tsx
const myPluginUI = {
  name: 'myPlugin',
  button: {
    label: 'Chart',
    iconType: 'visArea',
  },
  helpText: (<div>A node that explains how the syntax works</div>),
  editor: function editor({ node, onSave, onCancel }) { return ('something'); },
};
```

--------------------------------

### Setup EuiProvider at App Root

Source: https://eui.elastic.co/v106.2.0/docs/utilities/provider

Demonstrates the basic setup of EuiProvider at the root of an application. This component is essential for EUI's full functionality and styling, providing necessary context providers.

```jsx
import { EuiProvider } from '@elastic/eui';
const MyApp = () => (
  <EuiProvider>
    {/* Content */}
  </EuiProvider>
);
```

--------------------------------

### Install npm Package - Bash

Source: https://eui.elastic.co/docs/components/navigation/steps

Installs npm packages using the npm command-line interface. This is a common step in front-end development workflows to add dependencies to a project.

```bash
npm install
```

--------------------------------

### Install npm Package - Bash

Source: https://eui.elastic.co/docs/components/navigation/steps/index

Installs npm packages using the npm command-line interface. This is a common step in front-end development workflows to add dependencies to a project.

```bash
npm install
```

--------------------------------

### Setup EuiProvider at App Root

Source: https://eui.elastic.co/v106.2.0/docs/utilities/provider/index

Demonstrates the basic setup of EuiProvider at the root of an application. This component is essential for EUI's full functionality and styling, providing necessary context providers.

```jsx
import { EuiProvider } from '@elastic/eui';
const MyApp = () => (
  <EuiProvider>
    {/* Content */}
  </EuiProvider>
);
```

--------------------------------

### Import EUI Services (TSX)

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup

Shows how to import EUI services, such as utility functions like 'keys' or specific services like 'Timer', from their respective directories within the EUI library.

```tsx
import { keys } from '@elastic/eui/lib/services';
import { Timer } from '@elastic/eui/lib/services/time';
```

--------------------------------

### Import EUI Components (TSX)

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup

Demonstrates importing common EUI React components like EuiButton, EuiCallOut, and EuiPanel from the top-level EUI module.

```tsx
import {
  EuiButton,
  EuiCallOut,
  EuiPanel,
} from '@elastic/eui';
```

--------------------------------

### Elasticsearch Match All Query

Source: https://eui.elastic.co/v106.2.0/docs/components/forms/search-and-filter/search-bar/index

An example of a simple Elasticsearch query to match all documents, often used as a default or starting point.

```json
{
  "match_all": {}
}
```

--------------------------------

### Import EUI Components (TSX)

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup/index

Demonstrates importing common EUI React components like EuiButton, EuiCallOut, and EuiPanel from the top-level EUI module.

```tsx
import {
  EuiButton,
  EuiCallOut,
  EuiPanel,
} from '@elastic/eui';
```

--------------------------------

### Import EUI Services (TSX)

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup/index

Shows how to import EUI services, such as utility functions like 'keys' or specific services like 'Timer', from their respective directories within the EUI library.

```tsx
import { keys } from '@elastic/eui/lib/services';
import { Timer } from '@elastic/eui/lib/services/time';
```

--------------------------------

### Link Validation Examples

Source: https://eui.elastic.co/docs/components/editors-and-syntax/markdown/format

Demonstrates valid and invalid link protocols for EuiMarkdownRenderer, ensuring security by only rendering links starting with http:, https:, mailto:, or /. Other protocols are preserved as their markdown source.

```markdown
**Links starting with http:, https:, mailto:, and / are valid:**
* https://elastic.co
* http://elastic.co
* https link to [elastic.co](https://elastic.co)
* http link to [elastic.co](http://elastic.co)
* relative link to [eui doc's homepage](/)
* someone@elastic.co
* [email me!](mailto:someone@elastic.co)
**Other link protocols are kept as their markdown source:**
* ftp://elastic.co
* An [ftp link](ftp://elastic.co)

```

--------------------------------

### Link Validation Examples

Source: https://eui.elastic.co/docs/components/editors-and-syntax/markdown/format/index

Demonstrates valid and invalid link protocols for EuiMarkdownRenderer, ensuring security by only rendering links starting with http:, https:, mailto:, or /. Other protocols are preserved as their markdown source.

```markdown
**Links starting with http:, https:, mailto:, and / are valid:**
* https://elastic.co
* http://elastic.co
* https link to [elastic.co](https://elastic.co)
* http link to [elastic.co](http://elastic.co)
* relative link to [eui doc's homepage](/)
* someone@elastic.co
* [email me!](mailto:someone@elastic.co)
**Other link protocols are kept as their markdown source:**
* ftp://elastic.co
* An [ftp link](ftp://elastic.co)

```

--------------------------------

### Import EUI Services

Source: https://eui.elastic.co/docs/getting-started/setup/index

Shows how to import various services provided by EUI, such as utility functions from 'lib/services' or specific services like 'Timer'. These are often used for application logic and utilities.

```tsx
import { keys } from '@elastic/eui/lib/services';
import { Timer } from '@elastic/eui/lib/services/time';
```

--------------------------------

### Handling HTTP Error Codes in Elastic UI

Source: https://eui.elastic.co/v106.2.0/docs/patterns/error-messages/examples/index

This section details how to present specific HTTP error codes to users within the Elastic UI framework. It covers the meaning of each error, recommended UI patterns (like error pages or banners), and provides example user-facing messages to guide developers in creating clear and helpful error feedback.

```APIDOC
HTTP Error Code Handling:

400: Bad request
  - Description: The server cannot process the information because it’s not complete or is in the wrong format.
  - Recommended Pattern: Use the [error page pattern](https://eui.elastic.co/v106.2.0/docs/patterns/error-messages/error-page).
  - Example Message: "You must fix the following: Your email must contain an @ character. The date you registered must be in the past."

401: Unauthorized
  - Description: Authentication errors.
  - Recommended Pattern: Do not use error pages. Actively redirect users to the login page and explain why they were logged out using the [error banner pattern](https://eui.elastic.co/v106.2.0/docs/patterns/error-messages/error-banners).

403: Forbidden
  - Description: The user doesn’t have permissions to perform the requested action.
  - Recommended Pattern: Use the [error page pattern](https://eui.elastic.co/v106.2.0/docs/patterns/error-messages/error-page).
  - Example Message: "You can’t access this page. You don’t have permission. If you think this is a mistake, contact your administrator: [admin@example.co](mailto:admin@example.co)."

404: Not found
  - Description: The requested page is missing. This occurs when a user types a bad URL or clicks a broken link. It differs from `410 Gone` where a page is known to be deleted.
  - Recommended Pattern: Use the [error page pattern](https://eui.elastic.co/v106.2.0/docs/patterns/error-messages/error-page).
  - Example Message: "We can’t find the page you’re looking for. If you typed in the URL, check it’s correct. If you clicked a link, contact your administrator and tell them it’s broken: [admin@example.co](mailto:admin@example.co)."
```

--------------------------------

### EuiTour Component Props

Source: https://eui.elastic.co/docs/components/display/tour

Defines the core properties for the EuiTour component, which is used to create guided user tours. Key properties include `steps` for defining the tour sequence and `initialState` for managing the tour's starting condition.

```APIDOC
EuiTour:
  Props:
    steps: EuiStatelessTourSteps
      Description: Defines the sequence and content of tour steps.
      Type: EuiStatelessTourSteps
      Required: true

    initialState: EuiTourState
      Description: Sets the initial state of the tour, such as the current step.
      Type: EuiTourState
      Required: true

  Usage:
    - Wrap target element
    - Anchor to DOM element
    - Guided tour
    - Standalone steps
    - useEuiTour hook
    - EuiTour render prop component

  Guidelines:
    - When to use tours
    - Provide concise yet valuable information
    - Explain why actions are useful
    - Keep tone conversational and friendly
    - Allow users to end and restart
    - Keep tours short
    - Be careful with action-driven tours
    - Adjust based on UX research
    - Consider using animation gifs
```

--------------------------------

### Customizing EUI Components with Custom Classes

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup

Shows how to apply custom CSS classes to EUI components for styling. It's recommended to target your own class names rather than EUI's internal ones, as EUI class names are not a stable API. This example injects custom CSS directly.

```tsx
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>
  </>
);
```

--------------------------------

### Import EUI Services

Source: https://eui.elastic.co/docs/getting-started/setup

Shows how to import various services provided by EUI, such as utility functions from 'lib/services' or specific services like 'Timer'. These are often used for application logic and utilities.

```tsx
import { keys } from '@elastic/eui/lib/services';
import { Timer } from '@elastic/eui/lib/services/time';
```

--------------------------------

### Customizing EUI Components with Custom Classes

Source: https://eui.elastic.co/v106.2.0/docs/getting-started/setup/index

Shows how to apply custom CSS classes to EUI components for styling. It's recommended to target your own class names rather than EUI's internal ones, as EUI class names are not a stable API. This example injects custom CSS directly.

```tsx
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 Components with className Prop

Source: https://eui.elastic.co/docs/getting-started/setup

Shows how to apply custom CSS to EUI components by passing a `className` prop. It's recommended to target custom class names rather than EUI's internal ones, which are not a stable API. This example uses inline styles via a `<style>` tag.

```tsx
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>
  </>
);
```

--------------------------------

### Import EUI Test Utilities

Source: https://eui.elastic.co/docs/getting-started/setup

Illustrates importing testing utilities for both Enzyme and React Testing Library from EUI's test directory. These helpers facilitate writing unit and integration tests for EUI components.

```tsx
import { findTestSubject } from '@elastic/eui/lib/test'; // Enzyme
import { findByTestSubject, render, screen } from '@elastic/eui/lib/test/rtl'; // React Testing Library
```

--------------------------------

### Customizing Components with className Prop

Source: https://eui.elastic.co/docs/getting-started/setup/index

Shows how to apply custom CSS to EUI components by passing a `className` prop. It's recommended to target custom class names rather than EUI's internal ones, which are not a stable API. This example uses inline styles via a `<style>` tag.

```tsx
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>
  </>
);
```

--------------------------------

### Setup EuiProvider for Application (TypeScript/React)

Source: https://eui.elastic.co/docs/getting-started/setup

Demonstrates how to wrap your React application with `EuiProvider`. This component is crucial for enabling EUI's theming capabilities, such as dark/light mode switching. It requires importing `EuiProvider` and `EuiText` from `@elastic/eui`.

```tsx
import React from 'react';
import { EuiProvider, EuiText } from '@elastic/eui';

const MyApp = () => (
  <EuiProvider>
    <EuiText><p>Hello World!</p></EuiText>
  </EuiProvider>
);

export default MyApp;
```

--------------------------------

### Prioritize Accessible Selectors with React Testing Library, Cypress, Selenium

Source: https://eui.elastic.co/docs/getting-started/testing/recommendations

Follow guiding principles and query priorities when choosing selectors. Prioritize accessible and semantic queries (e.g., `[role="dialog"]`) or `data-test-subj` attributes over complex CSS selectors. Examples are provided for React Testing Library, Cypress, and Selenium.

```tsx
screen.getByRole('dialog'); // react-testing-library
```

```cypress
cy.get('[role="dialog"]'); // cypress
```

```selenium
driver.findElement(By.cssSelector('[role="dialog"]')); // selenium
```

--------------------------------

### Import EUI Test Utilities

Source: https://eui.elastic.co/docs/getting-started/setup/index

Illustrates importing testing utilities for both Enzyme and React Testing Library from EUI's test directory. These helpers facilitate writing unit and integration tests for EUI components.

```tsx
import { findTestSubject } from '@elastic/eui/lib/test'; // Enzyme
import { findByTestSubject, render, screen } from '@elastic/eui/lib/test/rtl'; // React Testing Library
```

--------------------------------

### Prioritize Accessible Selectors with React Testing Library, Cypress, Selenium

Source: https://eui.elastic.co/docs/getting-started/testing/recommendations/index

Follow guiding principles and query priorities when choosing selectors. Prioritize accessible and semantic queries (e.g., `[role="dialog"]`) or `data-test-subj` attributes over complex CSS selectors. Examples are provided for React Testing Library, Cypress, and Selenium.

```tsx
screen.getByRole('dialog'); // react-testing-library
```

```cypress
cy.get('[role="dialog"]'); // cypress
```

```selenium
driver.findElement(By.cssSelector('[role="dialog"]')); // selenium
```

--------------------------------

### EUI Content Guidelines Navigation

Source: https://eui.elastic.co/docs/content

Provides links to detailed content guidelines for Elastic UI (EUI), covering key aspects of product copy.

```APIDOC
EUI Content Guidelines:
  - Voice and writing style: https://eui.elastic.co/docs/content/style
  - Tone: https://eui.elastic.co/docs/content/adapt-tone
  - Language: https://eui.elastic.co/docs/content/language
  - Accessibility: https://eui.elastic.co/docs/content/accessibility
  - Inclusivity: https://eui.elastic.co/docs/content/inclusivity
  - Word choice: https://eui.elastic.co/docs/content/word-choice
```

--------------------------------

### Elasticsearch Query DSL Example

Source: https://eui.elastic.co/docs/components/forms/search-and-filter/search-bar/index

An example of a basic Elasticsearch Query DSL structure used for searching.

```json
{
  "match_all": {}
}
```

--------------------------------

### Basic renderCellValue Example

Source: https://eui.elastic.co/docs/components/data-grid

A basic example of a renderCellValue function for EuiDataGrid, demonstrating how to access row and column information.

```tsx
renderCellValue={({ rowIndex, columnId }) => {
  // Custom rendering logic here
}}
```

--------------------------------

### Use @emotion/styled for Styled-Components Migration

Source: https://eui.elastic.co/docs/getting-started/working-with-emotion/introduction/index

As a first step in transitioning from styled-components to Emotion, utilize `@emotion/styled`. This approach allows you to maintain familiar styling syntax while integrating with the broader Emotion ecosystem, facilitating a smoother migration process.

```tsx
<SomeComponent
  css={({ euiTheme }) => ({
    color: euiTheme.colors.primaryText,
    padding: euiTheme.size.l,
  })}
/>
```