The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics. It distributes UI React components and static assets for use in building web layouts. Alongside the React components is a SASS/CSS layer that can be used independently on its own. If this is your first time using EUI you might want to read up on how to consume EUI and Kibana plugin development in general.
Our SVG icon library gives you full control over size and color
Buttons for every usage you might need
Create layouts by using flex groups, grids, and items
Build tables from individual components or high level wrappers
Cards like these help you make repeatable content more presentable
Input tags, layouts, and validation for your forms
Design goals
EUI has the following primary goals...
- EUI is accessible to everyone.
- Use high contrast, color-blind safe palettes and proper aria labels.
- EUI is themable.
- Theming should involve changing fewer than a dozen lines of code. This means strict variable usage.
- EUI is responsive.
- Currently we target mobile, laptop, desktop, and wide desktop breakpoints.
- EUI is playful.
- Consistent use of animation can bring life to our design.
- EUI is documented and has tests.
- Make sure the code is friendly to the novice and expert alike.