DOCSEARCHbyAlgolia
Submit Docs

Elastic UI Framework (EUI)

repository·main·Indexed 27 days ago

https://github.com/elastic/eui

A collection of React UI components and theme utilities used to build consistent, branded user interfaces across Elastic's web products. The repository includes the core design system, a Docusaurus preset and theme (@elastic/eui-docusaurus-preset, @elastic/eui-docusaurus-theme) for documentation, an ESLint plugin (@elastic/eslint-plugin-eui) to enforce accessibility and design tokens, and a documentation generator (@elastic/eui-docgen) for component prop tables.

Tokens
254.7K
Snippets
489
Records
1.8K
Agent score
91%

What's inside elastic-eui

  1. Overview of the Elastic UI Framework

    main
    The Elastic UI Framework (EUI) is a design library consisting of typed React UI components and static assets designed to build web layouts that share Elastic's branding and aesthetics. It provides reusable components that abstract away CSS, and includes theme and style utilities that can be used independently. EUI is used to maintain a single source of truth for design standards across Elastic's web products.

  2. Overview of Elastic Charts

    main
    Elastic Charts is a system of independent chart components designed to work cohesively within the Elastic UI (EUI) ecosystem. Rather than a simple library, it is treated as a design system where components share common rules for style, behavior, and interaction to ensure a consistent user experience across products.

  3. Use EuiDataGrid for large tabular datasets

    main

    EuiDataGrid is designed for displaying large amounts of tabular data. It is the preferred choice over standard EUI tables when your use case involves:

    • A high number of columns.
    • Uniform data types across columns.
    • A need for strict schemas and sorting to facilitate data comparison.

    Note that while it shares similarities with spreadsheet software, its primary strength lies in high-performance rendering rather than content creation.

  4. Understand the difference between EUI Guidelines and Patterns

    main

    When building interfaces with EUI, distinguish between using Guidelines and Patterns to determine your implementation approach:

    • Guidelines: Use these to learn how to use individual EUI components correctly. They provide usage instructions, accessibility requirements, and 'do's and don'ts' for specific components.
    • Patterns: Use these when you need to solve a specific design problem or user flow. Patterns are reusable solutions that combine multiple components to address frequent design issues, providing layout, interaction, and code examples for complex user needs.

  5. Use EuiBanner for announcements

    main

    EuiBanner is a full-width announcement component used to surface promotional or informational messages.

    When to use EuiBanner vs EuiCallOut:

    • Use EuiBanner for broad, product-level announcements (e.g., new features, promotions, or onboarding nudges).
    • Use EuiCallOut for inline, contextual feedback (e.g., warnings, errors, or confirmation messages).

  6. Use EuiSearchBar for Elasticsearch Query DSL

    main

    The EuiSearchBar is a specialized toolbar designed for creating search queries using syntax compatible with Elasticsearch's Query DSL. It supports free-text terms, phrases, field/value searches (e.g., tag:bug), range queries (e.g., followers>=10), boolean is clauses, and or group clauses.

    Note: For generic search use cases that do not require Elasticsearch-specific syntax, use the EuiFieldSearch component instead.

  7. Understand EuiIcon code-splitting and icon loading

    main
    The EuiIcon component uses dynamic imports to load icon assets lazily at runtime. This prevents icon SVGs from being included in your main JavaScript bundle. Instead, icons are fetched as separate chunks only when they are rendered. Note that the mapping object (which links icon names to their chunk references) is always included in your bundle when EuiIcon is used.

  8. Get started with the Elastic UI Framework

    main

    The Elastic UI Framework (EUI) is a collection of React UI components designed for building user interfaces that follow the Elastic aesthetic.

    To use EUI in your projects, refer to the following resources:

    • Full Documentation: Visit eui.elastic.co for component examples, usage guidelines, and implementation details.
    • FAQ: For common usage questions, check the EUI FAQ.
    • Technical Guidelines: For detailed instructions on usage and development, refer to the EUI Wiki.
    • Community Support: For general questions, use the GitHub Discussions tab.

  9. Core concepts of EuiDataGrid

    main

    The EuiDataGrid component provides a high-performance way to display large datasets with several key features:

    • In-memory management: You can define an inMemory level (e.g., level: 'sorting') to allow the grid to automatically handle updates like sorting or filtering. Note that depending on the level, you may need to manage content order separately.
    • Schemas: Use schemas to tailor how specific columns are rendered or sorted. The component includes automatic detection, but custom schemas can be provided.
    • Truncation & Popovers: Unlike standard tables, the data grid forces content truncation. To show more information or actions, use popovers.
    • Control Columns: You can add repeatable actions, such as checkboxes or buttons, using trailingControlColumns.
    • Toolbar: Provides users with ways to manipulate data display and order.
    • Styling: Grid styling can be controlled by the developer and can be augmented by user preferences based on enabled features.

  12. Explore Elastic UI (EUI) components by topic

    main

    EUI provides a comprehensive library of components organized into functional categories. You can find specific components, live examples, usage guidelines, and prop definitions under the following topical sections:

    • Layout: Flexbox and layout utilities.
    • Containers: Components like Accordion for grouping content.
    • Navigation: Elements like Breadcrumbs for site navigation.
    • Display: Visual indicators like Badges.
    • Forms: Layouts and elements for user input.
    • Data grid: Advanced data grid components.
    • Tables: Basic table structures.
    • Templates: High-level structures like Page Templates.
    • Editors and syntax: Specialized components for Markdown and syntax formatting.