Elastic UI Framework 🙌

Overview

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 of components in the EUI framework aesthetic, and how to use them in your products. We also have a FAQ that covers common usage questions.

Installation

To install the Elastic UI Framework into an existing project, use the yarn CLI (npm is not supported).

yarn add @elastic/eui

Note that EUI has several peerDependencies requirements that will also need to be installed if starting with a blank project. You can read more about other ways to consume EUI.

yarn add @elastic/eui @elastic/datemath moment prop-types

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 the following.

yarn
yarn start

If another process is already listening on port 8030, the next free port will be used. Alternatively, you can specify a port:

yarn start --port 9000

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

Wiki

Consumption

Maintenance / Contributing

CONTRIBUTING.md

License

Apache Licensed. Read the FAQ for details.

Comments
  • [GSOC] Automatic Documentation System for TypeScript Components

    [GSOC] Automatic Documentation System for TypeScript Components

    Summary

    Fixes #3056

    • Replaced react-docgen with react-docgen-typescript
    • Custom babel plugin to inject doc info to components

    Checklist

    ~~- [ ] Check against all themes for compatibility in both light and dark modes~~ ~~- [ ] Checked in mobile~~ ~~- [ ] Checked in IE11 and Firefox~~ ~~- [ ] Props have proper autodocs~~ ~~- [ ] Added documentation examples~~ ~~- [ ] Added or updated jest tests~~ ~~- [ ] Checked for breaking changes and labeled appropriately~~ ~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~ ~~- [ ] A changelog entry exists and is marked appropriately~~

    Verifying Props

    • [x] Accordion
    • [x] Bottom Bar
    • [x] Flex
    • [x] Flyout
    • [x] Header
    • [x] Horizontal Rule
    • [x] Modal
    • [x] Nav Drawer
    • [x] Page
    • [x] Panel
    • [x] Popover
    • [x] Resizable container
    • [x] Spacer
    • [x] Breadcrumbs
    • [x] Button
    • [x] Collapsible nav
    • [x] Context Menu
    • [x] Control Bar
    • [x] Facet
    • [x] Key Pad Menu
    • [x] Link
    • [x] Pagination
    • [x] Tree View
    • [x] Side Nav
    • [x] Steps
    • [x] Tabs
    • [x] Data grid
    • [x] Tables
    • [x] In-memory tables
    • [x] Aspect ratio
    • [x] Avatar
    • [x] Badge
    • [x] Callout
    • [x] Card
    • [x] Code
    • [x] Comment list
    • [x] Description List
    • [x] Drag And Drop
    • [x] EmptyPrompt
    • [x] Health
    • [x] Icons
    • [x] Image
    • [x] List Group
    • [x] Loading
    • [x] Progress
    • [x] Stat
    • [x] Text
    • [x] Title
    • [x] Toast
    • [x] ToolTip
    • [x] Tour
    • [x] Form controls
    • [x] Form layouts
    • [x] Compressed forms
    • [x] Form validation
    • [x] SuperSelect
    • [x] Combo Box
    • [x] Color Selection
    • [x] Code Editor
    • [x] Date Picker
    • [x] Expression
    • [x] Filter Group
    • [x] EuiRange
    • [x] EuiDualRange
    • [x] EuiDualRange
    • [x] EuiRangeTicks
    • [x] EuiRangeLevels
    • [x] EuiRangeLevels
    • [x] Search Bar
    • [x] Selectable
    • [x] Suggest
    • [x] Super Date Picker
    • [x] Accessibility
    • [x] Beacon
    • [x] Color
    • [x] Color Palettes
    • [x] Context
    • [x] Copy
    • [x] CSS utility classes
    • [x] Delay Hide
    • [x] Delay Render
    • [x] Error Boundary
    • [x] Focus Trap
    • [x] Highlight and mark
    • [x] I18n
    • [x] Outside Click Detector
    • [x] Overlay Mask
    • [x] Portal
    • [x] ResizeObserver
    • [x] Responsive
    • [x] Toggle
    • [x] Window Events
    opened by ashikmeerankutty 102
  • [EuiSuggest] Use `EuiSelectable`

    [EuiSuggest] Use `EuiSelectable`

    Summary

    Resolves #3733 by converting the list element in EuiSuggest to use EuiSelectable, which now implements the ARIA 1.2 combobox pattern.

    Other changes:

    • Completes keyboard remediation (#2404)
      • EuiSelectable does the heavy lifting
      • Filtering and Enter selection behavior is left to consumers, so it intentionally appears incomplete
    • ⚠️ Breaking changes
      • Removes EuiSuggestInput
      • Requires either aria-label or aria-labelledby
      • Renames sendValue prop to onSearchChange

    Closes #5336, closes #2404, closes #4419, closes #4345, closes #4342

    Checklist

    • [x] Check against all themes for compatibility in both light and dark modes

    ~- [ ] Checked in mobile~

    • [x] Checked in Chrome, Safari, Edge, and Firefox
    • [x] Props have proper autodocs and playground toggles
    • [x] Added documentation
    • [x] Checked Code Sandbox works for any docs examples
    • [x] Added or updated jest tests
    • [x] Checked for breaking changes and labeled appropriately
    • [x] Checked for accessibility including keyboard-only and screenreader modes
    • [x] A changelog entry exists and is marked appropriately
    breaking change 
    opened by thompsongl 95
  • [EuiResizableContainer] Allow collapsible panels

    [EuiResizableContainer] Allow collapsible panels

    Summary

    Adds the ability for EuiResizablePanel components to be collapsible—shrinking the panel itself and hiding its content either via an out-of-the-box toggle button or through coordinated actions hooks provided to the parent component.

    image

    Features:

    • New mode prop specifies an EuiResizablePanel as collapsible or main, indicating the ability to collapse or the preference to gain space from collapsed panels.
    • Incorporated EuiPanel as the base element, allowing for more panel style options
    • Rewrote registry and interaction logic to use a React reducer pattern, making evening more reliable and providing more flexibility in exposing action hooks to consumers.

    Breaking change: Removed the size prop on EuiResizableButton. This was originally added as something of a spacing mechanism, but is less effective than the newly added panelProp.paddingSize prop.

    Checklist

    • [x] Check against all themes for compatibility in both light and dark modes
    • [x] Checked in mobile
    • [x] Checked in Chrome, Safari, Edge, and Firefox
    • [x] Props have proper autodocs
    • [x] Added documentation
    • [x] Checked Code Sandbox works for the any docs examples
    • [x] Added or updated jest tests
    • [x] Checked for breaking changes and labeled appropriately
    • [x] Checked for accessibility including keyboard-only and screenreader modes
    • [x] A changelog entry exists and is marked appropriately
    breaking change 
    opened by andreadelrio 79
  • [Data Grid] Allow adding custom actions to DataGridCells and cell popover

    [Data Grid] Allow adding custom actions to DataGridCells and cell popover

    Summary

    This PR allows to specify custom actions for data grid cell by column. These actions are displayed when the mouse hovers the cell and clickable, and also displayed when the cell gains keyboard focus and can be triggered by keyboard actions in the popover.

    Action triggered by mouse click

    image

    Action triggered by keyboard enter

    image

    Checklist

    • [x] Check against all themes for compatibility in both light and dark modes
    • [x] Checked in mobile
    • [x] Checked in Firefox and Safari
    • [x] Props have proper autodocs
    • [x] Added documentation ~- [ ] Checked Code Sandbox works for the any docs examples~
    • [x] Added or updated jest tests
    • [x] Checked for breaking changes and labeled appropriately
    • [x] Checked for accessibility including keyboard-only and screenreader modes~
    • [x] A changelog entry exists and is marked appropriately
    data grid 
    opened by kertal 72
  • [Beta] Add EuiTour component

    [Beta] Add EuiTour component

    Closes #505

    ⬆️ Requirements and other considerations are listed in this issue.


    Summary

    The EuiTour component will lead users through a UI in a guided fashion. This Canvas tour prototype demonstrates one possible use case, though it should not be taken too literally.

    What you'll see when you run this PR

    euitour

    Checklist

    • [x] Check against all themes for compatibility in both light and dark modes
    • [x] Checked in mobile
    • [x] Checked in IE11 and Firefox
    • [x] Props have proper autodocs
    • [x] Added documentation examples
    • [x] Added or updated jest tests
    • [x] Checked for breaking changes and labeled appropriately ~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~ (follow-up PR)
    • [x] A changelog entry exists and is marked appropriately
    feature request 
    opened by ryankeairns 60
  • Created Playground utility

    Created Playground utility

    Summary

    Creates playground as required by #3057

    Screenshot 2020-07-02 at 1 32 42 AM

    Checklist

    • [ ] Check against all themes for compatibility in both light and dark modes
    • [ ] Checked in mobile
    • [ ] Checked in IE11 and Firefox
    • [ ] Props have proper autodocs
    • [ ] Added documentation
    • [ ] Checked Code Sandbox works for the any docs examples
    • [ ] Added or updated jest tests
    • [ ] Checked for breaking changes and labeled appropriately
    • [ ] Checked for accessibility including keyboard-only and screenreader modes
    • [ ] A changelog entry exists and is marked appropriately
    opened by anishagg17 53
  • [EuiEmptyPrompt] Add more guidelines

    [EuiEmptyPrompt] Add more guidelines

    Summary

    This PR adds more usages guidelines for the EuiEmptyPrompt. You can find the page for reviewing here: https://eui.elastic.co/pr_5409/#/display/empty-prompt/guidelines.

    Guidelines

    There were some discussions that can be found on this google doc that lead to some decisions.

    Panel color picker

    The panel color picker is a component where based on the selection of a use case and a page template a panel color is recommended.

    I used to have an example for "completed tasks" but I removed it. I couldn't think of a good example. But if anyone has a good example, I'm happy to add it. @gchaps do you have a good example of this use case?

    Initially, alternatives were also shown but I simplified to only show one recommendation.

    The "Default with multiple panels" page template option gets disabled for:

    • No permission
    • Page not found
    • Loading
    Screenshot 2021-12-17 at 15 22 21

    Guide Section component

    The guide section component was improved so it can receive JS strings. We could only pass RAW js files that were imported like require('!!raw-loader!..). This way I can use the guide section to preview the result of the panel color picker.

    Screenshot 2021-12-16 at 20 21 32

    I'm using a component react-element-to-jsx-string to transform generated react components to a JSX string and this is passed to the demo js tab.

    But... I found a weird issue. It doesn't work well when deployed. As we can see the deployed version gets some weird tags. 😬

    plugin@2x

    It was recommended to use react-view but I found it difficult to achieve what I was achieving with react-element-to-jsx-string. @thompsongl can you help me with this task?

    Checklist

    • [x] Check against all themes for compatibility in both light and dark modes
    • ~[ ] Checked in mobile~
    • [x] Checked in Chrome, Safari, Edge, and Firefox
    • ~[ ] Props have proper autodocs and playground toggles~
    • [x] Added documentation
    • ~[ ] Checked Code Sandbox works for any docs examples~
    • ~[ ] Added or updated jest and cypress tests~
    • ~[ ] Checked for breaking changes and labeled appropriately~
    • [x] Checked for accessibility including keyboard-only and screenreader modes
    • ~[ ] A changelog entry exists and is marked appropriately~
    documentation skip-changelog 
    opened by miukimiu 51
  • Added option to display the number of selected options in the filters

    Added option to display the number of selected options in the filters

    Summary

    Fixe issue #4304

    Checklist

    • [x] Check against all themes for compatibility in both light and dark modes
    • [x] Checked in mobile
    • [x] Checked in Chrome, Safari, Edge, and Firefox
    • [ ] ~Props have proper autodocs and [playground toggles]~(https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)~
    • [ ] ~Added documentation~
    • [ ] ~Checked Code Sandbox works for the any docs examples~
    • [ ] ~Added or updated jest tests~
    • [x] Checked for breaking changes and labeled appropriately
    • [ ] ~Checked for accessibility including keyboard-only and screenreader modes~
    • [x] A changelog entry exists and is marked appropriately
    opened by hetanthakkar1 50
  • [GSoC] Automatic Documentation System for TypeScript Components

    [GSoC] Automatic Documentation System for TypeScript Components

    A better automatic system for documenting EUI TypeScript components. Specifically, we're looking for a better method to extract the acceptable values for each prop on the API. This would be done through automatic transversal of the EUI components itself, combined with the type values from TS and our own inline comments.

    Outcome More accurate, robust prop documentation within the existing "Props" tab for each example section in component documentation. As the EUI team is nearing completion of complete TypeScript conversion, it is possible that the current type and prop traversal system can be entirely replaced.

    Related Discussion

    • #1688; sometimes manual documentation will still be needed/helpful

    Interested in working on EUI for Google Summer of Code? See more details here: https://github.com/elastic/gsoc

    GSoC 
    opened by thompsongl 50
  • [DATA GRID] Column header menu

    [DATA GRID] Column header menu

    Summary

    Add column header menu with actions providing direct access to the following functionality:

    • Hide column
    • Sort schema asc
    • Sort schema desc
    • Move left
    • Move right

    Furthermore it allows you add custom actions Fixes https://github.com/elastic/eui/issues/2461

    image

    Checklist

    • [x] Check against all themes for compatibility in both light and dark modes
    • [x] Checked in mobile
    • [x] Checked in IE11 and Firefox
    • [x] Props have proper autodocs
    • [x] Added documentation examples
    • [x] Added or updated jest tests
    • [x] Checked for breaking changes and labeled appropriately
    • [x] Checked for accessibility including keyboard-only and screenreader modes
    • [x] A changelog entry exists and is marked appropriately
    feature request data grid 
    opened by snide 49
  • [GSoC] Playground / Toggle System for Live Documentation

    [GSoC] Playground / Toggle System for Live Documentation

    A better playground / toggle system for EUI live documentation. Right now we have flat, read-only code displayed next to static examples. It would be nice if people could change the code examples in-browser on our docs site and see the changes live in the examples.

    Outcome An edit mechanism that would allow users to change, add, or otherwise modify props and content in rendered examples.

    Related Discussion

    • Discuss comment; Please note that the ideas mentioned are not requirements but concept suggestions that would need to be thoroughly vetted.

    • Discuss comment; "having the interactive playground inline in our documentation is something we'd really like to see"


    Interested in working on EUI for Google Summer of Code? See more details here: https://github.com/elastic/gsoc

    GSoC 
    opened by thompsongl 49
  • [EuiCodeBlock] Reducing bundle size due to syntax highlighting

    [EuiCodeBlock] Reducing bundle size due to syntax highlighting

    Big fan of this framework, and my thanks for doing so much work on its development!

    While doing some performance optimization, I noticed that a significant part of the bundle loaded for my site was the language highlighting files within refractor: some 200 KB.

    BundlePhobia shows how unusual EuiCode and EuiCodeBlock are with respect to this bundle size.

    This seems wasteful, because it's hard to imagine many projects using code blocks with so many different languages. I use code blocks purely for Python, but that bundle then includes 200 KB for every other supported language.

    Dynamically importing only the languages that are actually needed a la react-refractor would dramatically reduce the bundle size of EUI and the tree-shaken bundle size of any app that uses code highlighting. An option could be added to preserve current behavior for apps like text editors that want to maintain current behavior.

    opened by nicholas-miklaucic 0
  • [EuiText] Add new blockquotes styles

    [EuiText] Add new blockquotes styles

    Our current EuiText blockquotes styles are the following one:

    Screenshot 2023-01-04 at 12 09 41

    Because blockquotes are mostly used in docs, we should improve our current styles to meet the users' expectations which is a left line instead of top and bottom lines.

    https://github.com/elastic/docsmobile/issues/359

    assign:designer 
    opened by miukimiu 0
  • [EuiFilePicker] Integrate a

    [EuiFilePicker] Integrate a "cancel" button to file picker

    When uploading (or "picking") a file it is pretty common that we want to display a disabled and loading file picker, something like this:

    Screenshot 2023-01-03 at 13 06 22

    While this state is very useful, it does not cover a functional requirement of a file uploader: cancellation. Typically a picker like this would present some kind of "Cancel" button to abort the file upload. For example, if a user has picked the wrong file in the OS picker that is 2GB they should be able to the upload in-line and repick.

    Users of the EuiFilePicker currently need to implement this externally, for example:

    Screenshot 2023-01-03 at 13 11 49

    While this meets the functional requirement, it could be more compact and reusable because adding an element externally changes the amount of vertical space a component like this needs. Another alternative for users is to absolutely position an "X" button icon, but this is not a good future-proof solution.

    Optionally showing "Cancel" would be a really cool enhancement:

    Screenshot 2023-01-03 at 13 11 39 design decision discussion 
    opened by jloleysens 1
  • [EuiDatePicker] Add the ability to hide the days outside the month

    [EuiDatePicker] Add the ability to hide the days outside the month

    Hi, I think it could be a good idea for the date picker to be able to hide the days outside the month. We have this for now image But when you hide the days outside the month, it would be like this image And the code would be like this : <EuiDatePicker ... hideDaysOutside={true} />

    Tell me if it's a good idea. For me, I don't like the view of the day of the previous/next month, like if the user wants to select a day of the previous/next month he needs to change the month…

    (PS: sorry, my EuiDatePicker is in French locale)

    design decision discussion 
    opened by samuel-casasdray 0
  • Dangerous confirm modal best practices

    Dangerous confirm modal best practices

    We have multiple modals in Kibana that are used to ask for confirmation when you are leaving an usaved work in a page. For example, Lens uses the following and Dashboard has a similar one with a different action and color:

    Following EUI example for dangerous confirm modals: https://eui.elastic.co/#/layout/modal#confirm-modal Kibana Dashboard should align to the practice and use the dangerous color for the primary button.

    But I have a doubt: is that a good practice? The difference with the simple Confirm Dialog is just the color of the button. I know that the text of the button is also different, but to me it looks like it can be confusing. WCAG says that we should not use the color alone and I believe that in this situation we should probably improve it by switching the buttons roles: the primary button should not be the destructive one, but the less destructive: like the Cancel, or something better named like Continue editing. Where the destructive button Dismiss/Discard/Delete/Destroy should be placed on the other side with less emphasis to avoid hasty interactions.

    Screenshot 2022-12-30 at 17 44 45

    In this way we promote:

    • a positive attitude and without throwing responsibility to the user (using a red color looks like an error done by the user, we instead want just to notify them about a dangerous thing)
    • the primary action is a safe net in most situation, even without reading the message you can click it and nothing happen to your work
    • this mechanism could be also used to teach the user on using the save button instead, as going back to editing stimulate them to find the save button next time, where instead discarding changes by error increase the frustration and the fear of use it.

    Interested to hear your thoughts

    cc @elastic/kibana-design

    design decision documentation accessibility 
    opened by markov00 5
  • [EuiSuperDatePicker] The popover of the SuperDataPicker does not open in one click

    [EuiSuperDatePicker] The popover of the SuperDataPicker does not open in one click

    Issue description

    When we are in another area where there is an input, in our case this is the focus on EuiSuggest. we can't open EuiSuperDataPicker Popover in one click.

    Example - https://codesandbox.io/s/qsy4tq?file=/demo.tsx

    https://user-images.githubusercontent.com/34135714/209786932-5525cdb2-a4e8-4276-abe9-2155aa3c23be.mov

    How to reproduce the error

    1. Expand the screen so that the EuiSuggest and EuiSuperDataPicker are on the same line.
    2. Enter some value in the area
    3. Click on SuperDataPicker

    and we will see that the SuperDataPicker area has increased, but no popover has appeared.

    design decision 
    opened by nlatipov 2
Releases(v72.1.0)
  • v72.1.0(Jan 3, 2023)

    • Changed design of empty ranges in EuiColorStops to have diagonal gray stripes instead of a solid light gray color (#6489)
    • Changed popover in EuiColorStops to not appear when dragging/moving a color stop (#6489)
    • EuiPopover now supports overriding focusTrapProps.onClickOutside, which allows customization of auto-close behavior on outside click. (#6500)

    CSS-in-JS conversions

    • Converted EuiColorStops to Emotion (#6489)
    • Added brighten service to manipulate CSS-in-JS colors (#6489)
    Source code(tar.gz)
    Source code(zip)
  • v72.0.0(Dec 20, 2022)

    • Added the customQuickSelectRender render prop to EuiSuperDatePicker, which allows customizing the Quick Select popover (#6382)
    • EuiFilePicker styles have been updated to look more like an interactive element. (#6479)
    • Added a third argument to EuiSelectable's onChange callback. The single option object that triggered the onChange event is now also passed to consumers with its most recent checked state (#6487)

    Bug fixes

    • EuiTabs now passes size and expand to all children using a React context provider. (#6478)
    • Fixed security warnings caused by [email protected] sub-dependency (#6482)

    Breaking changes

    • Removed size and expand props from EuiTab (#6478)
    Source code(tar.gz)
    Source code(zip)
  • v71.1.0(Dec 13, 2022)

  • v71.0.0(Dec 6, 2022)

    • Implemented new EuiRange and EuiDualRange designs where the levels are now on top of the tracks (#6092)
    • Added discuss and dotInCircle glyphs to EuiIcon (#6434)
    • Added article glyph to EuiIcon (#6437)
    • Changed the EuiProvider usage warnings to not rely on development mode. (#6451)

    Breaking changes

    • EuiDualRange now explicitly requires both min and max via props types, to match EuiRange (#6092)
    • EuiRange and EuiDualRange's compressed size no longer impacts track or level sizes, but continues to compress tick and input sizes. (#6092)
    • Removed all variables for the following components from EUI's theme JSON files: (#6443)
      • euiCollapsibleNav*
      • euiColorPicker*
      • euiContextMenu*
      • euiControlBar*
      • euiDataGrid*(except for z-indices and cell padding sizes)
      • euiDatePicker*
      • euiSuperDatePicker*
      • euiDragAndDrop*
      • euiEuiEmptyPrompt*
      • euiFilePicker*
      • euiRange*
      • euiHeaderLinks*
      • euiKeyPad*
      • euiMarkdownEditor*
      • euiResizable*
      • euiSelectable*
      • euiSideNav*
      • euiStep*
      • euiSuggest*
      • euiTable* (except for color variables)
      • euiTooltip*
      • euiButtonFontWeight, euiButtonDefaultTransparency, and euiButtonMinWidth
    • If you were importing any of the above removed JSON variables, we strongly recommend using generic color or sizing variables from useEuiTheme() instead. (#6443)

    CSS-in-JS conversions

    • Converted EuiRange and EuiDualRange to Emotion; Removed $euiRangeThumbRadius (#6092)
    • Added a new logicalStyles utility that automatically converts all non-logical properties in a style object to their corresponding logical properties (#6426)
    • Added a new logicalShorthandCSS utility that automatically converts margin, padding, and other 4-sided shorthands to their corresponding logical properties (#6429)
    • Added a new logicalBorderRadiusCSS utility that automatically converts border-radius to corresponding logical properties (#6429)
    Source code(tar.gz)
    Source code(zip)
  • v70.4.0(Nov 23, 2022)

    • Updated EuiTourStep.footerAction type to accept ReactNode[] (#6384)
    • Vertically aligned all footer content so that euiTourStepIndicator is always centered (#6384)
    • Added filterInCircle glyph to EuiIcon (#6385)
    • Added color prop to EuiBeacon (#6420)
    • Added the euiMaxBreakpoint and euiMinBreakpoint CSS-in-JS utilities for creating min/max-width media queries (#6431)

    Bug fixes

    • Restores the previous match operator behaviour when the query value is split into multiple terms after analysis. (#6409)
    • Fixed missing slide-in animation on EuiCollapsibleNavs and left-side EuiFlyouts (#6422)
    • Fix bug in EuiCard where footer were not aligned to the bottom of the card (#6424)
    • Fixed multiple component media queries for consumers with custom theme breakpoints (#6431)
    Source code(tar.gz)
    Source code(zip)
  • v70.3.0(Nov 19, 2022)

    • EuiSearchBar now automatically wraps special characters not used by query syntax in quotes (#6356)
    • Added alignment prop to EuiBetaBadge (#6361)
    • EuiButton now accepts minWidth={false} (#6373)

    Bug fixes

    • Fixed EuiPageTemplate not correctly passing the component prop to the inner main content wrapper. (#6352)
    • EuiSkipLink now correctly calls onClick even when fallbackDestination is invalid (#6355)
    • Permanently fixed EuiModal to not cause scroll-jumping issues on modal open (#6360)
    • Re-fixed EuiPageSection not correctly merging contentProps.css (#6365)
    • Fixed EuiTab not defaulting to size m (#6366)
    • Fixed the shadow sizes of .eui-yScrollWithShadows and .eui-xScrollWithShadows (#6374)
    • Fixed bug in EuiCard where the inner content in vertical cards was not growing 100% in width (#6377)
    • Fixed incorrect margins in EuiSuperDatePicker caused by EuiFlex CSS gap change (#6380)
    • Fixed visual bug in nested EuiFlexGroups, where the parent EuiFlexGroup is responsive but a child EuiFlexGroup is not (#6381)

    CSS-in-JS conversions

    • Converted EuiModal to Emotion (#6321)

    Fixes

    • EuiButton no longer outputs unnecessary inline styles for minWidth={0} or minWidth={false} (#6373)
    • EuiFacetButton no longer reports type issues when passing props accepted by EuiButton (#6373)
    Source code(tar.gz)
    Source code(zip)
  • v70.2.0(Nov 8, 2022)

    • Added a keyboard shortcuts popover to EuiDataGrid's toolbar. This can be visually hidden via toolbarVisibility.showKeyboardShortcuts, but will always remain accessible to keyboard and screen reader users. (#6036)
    • EuiScreenReaderOnly's showOnFocus prop now also shows on focus within its children (#6036)
    • Added onFocus prop callback to EuiSuperDatePicker (#6320)

    Bug fixes

    • Fixed EuiSelectable to ensure the full options list is re-displayed when the search bar is controlled and cleared using searchProps.value (#6317)
    • Fixed incorrect padding on xl-sized EuiTabs (#6336)
    • Fixed EuiCard not correctly merging css on its child icons (#6341)
    • Fixed EuiCheckableCard not setting css on the correct DOM node (#6341)
    • Fixed a webkit rendering issue with EuiModals containing EuiBasicTables tall enough to scroll (#6343)
    • Fixed bug in to_initials that truncates custom initials (#6346)
    • Fix bug in EuiCard where layout breaks when horizontal and selectable are both passed (#6348)
    Source code(tar.gz)
    Source code(zip)
  • v70.1.0(Nov 3, 2022)

    • Added the hint prop to the <EuiSearchBar />. This prop lets the consumer render a hint below the search bar that will be displayed on focus. (#6319)
    • Added the hasDragDrop prop to EuiPopover. Use this prop if your popover contains EuiDragDropContext. (#6329)

    Bug fixes

    • Fixed EuiButton's cursor style when the button is disabled (#6323)
    • Fixed EuiPageTemplate not recognizing child EuiPageSidebars/EuiPageTemplate.Sidebars with css props (#6324)
    • Fixed EuiBetaBadge to always respect its anchorProps values, including when there is no tooltip content (#6326)
    • Temporarily patched EuiModal to not cause scroll-jumping issues on modal open (#6327)
    • Fixed buggy drag & drop behavior within EuiDataGrid's columns & sorting toolbar popovers (#6329)
    • Fixed EuiButton not correctly passing textProps for children inside fragments or i18n components (#6332)
    • Fixed EuiButton not correctly respecting minWidth={0} (#6332)

    CSS-in-JS conversions

    • Converted EuiTabs to Emotion (#6311)
    Source code(tar.gz)
    Source code(zip)
  • v67.1.5(Oct 25, 2022)

  • v70.0.0(Oct 18, 2022)

    • Added the enabled option to the <EuiInMemoryTable /> executeQueryOptions prop. This option prevents the Query from being executed when controlled by the consumer. (#6284)

    Bug fixes

    • Fixed EuiOverlayMask to set a [data-relative-to-header=above|below] attribute to replace the --aboveHeader and --belowHeader classNames removed in its Emotion conversion (#6289)
    • Fixed EuiHeader CSS using removed EuiOverlayMask class modifiers (#6293)
    • Fixed EuiToolTip not respecting reduced motion preferences (#6295)
    • Fixed a bug with EuiTour where passing any panelProps would cause the beacon to disappear (#6298)

    Breaking changes

    • @emotion/css is now a required peer dependency, alongside @emotion/react (#6288)
    • @emotion/cache is no longer required peer dependency, although your project must still use it if setting custom cache/injection locations (#6288)

    CSS-in-JS conversions

    • Converted EuiCode and EuiCodeBlock to Emotion; Removed euiCodeSyntaxTokens Sass mixin and $euiCodeBlockPaddingModifiers; (#6263)
    • Converted EuiResizableContainer and EuiResizablePanel to Emotion (#6287)
    Source code(tar.gz)
    Source code(zip)
  • v69.0.0(Oct 4, 2022)

    • Added support for fullWidth prop on EuiForm, which will be the default for all rows/controls within (#6229)
    • Added support for onResizeStart and onResizeEnd callbacks to EuiResizableContainer (#6236)
    • Added optional case sensitive option matching to EuiComboBox with the isCaseSensitive prop (#6268)
    • EuiFlexItem now supports grow={0} (#6270)
    • Added the alignItems prop to EuiFlexGrid (#6281)
    • Added filter, filterExclude, filterIgnore, filterInclude, indexTemporary, infinity, sortAscending, and sortDescending glyphs to EuiIcon (#6282)

    Bug fixes

    • Fixed EuiTextProps to show the color type option inherit as default (#6267)
    • EuiFlexGroup now correctly respects gutterSize when responsive (#6270)
    • Fixed the last breadcrumb in EuiBreadcrumbs's breadcrumbs array not respecting truncate overrides (#6280)

    Breaking changes

    • EuiFlexGrid no longer supports columns={0}. Use EuiFlexGroup instead for normal flex display (#6270)
    • EuiFlexGrid now uses modern display: grid CSS (#6270)
    • EuiFlexGroup, EuiFlexGrid, and EuiFlexItem now use modern gap CSS instead of margins and negative margins (#6270)
    • EuiFlexGroup no longer applies responsive styles to column or columnReverse directions (#6270)

    CSS-in-JS conversions

    • Converted EuiFlexGroup, EuiFlexGrid, and EuiFlexItem to Emotion (#6270)
    Source code(tar.gz)
    Source code(zip)
  • v64.0.5(Sep 21, 2022)

    Note: this release is a backport containing changes originally made in 67.1.0, 67.1.1, and 67.1.2

    Bug fixes

    • Fixed EuiInMemoryTable's internal state tracking to include changes of sorting.sort values (#6228)
    • Fixed EuiDataGrid's broken fullscreen mode when nested within an EuiAccordion (#6235)
    • Fixed EuiAvatar to no longer mutate the object passed to its style prop (#6251)
    Source code(tar.gz)
    Source code(zip)
  • v67.1.2(Sep 21, 2022)

    Bug fixes

    • Fixed EuiFlyout not correctly merging passed css (#6248)
    • Fixed EuiNotificationEvent not correctly merging passed classNames (#6248)
    • Fixed EuiAvatar to no longer mutate the object passed to its style prop (#6251)
    Source code(tar.gz)
    Source code(zip)
  • v67.1.1(Sep 20, 2022)

    Bug fixes

    • Fixed EuiDataGrid's broken fullscreen mode when nested within an EuiAccordion (#6235)
    • Fixed EuiPageSection not correctly merging contentProps.css (#6239)
    • Fixed EuiPageHeaderContent not correctly merging passed classNames (#6239)
    • Fixed EuiAccordion not correctly merging buttonProps.css and arrowProps.css (#6239)
    • Fixed EuiProgress not correctly merging labelProps.css (#6239)
    • Fixed EuiImage not correctly merging wrapperProps.css (#6239)

    CSS-in-JS conversions

    • Converted EuiFlyout to Emotion; Removed $euiFlyoutBorder and $euiFlyoutPaddingModifiers (#6213)
    Source code(tar.gz)
    Source code(zip)
  • v67.1.0(Sep 14, 2022)

    • Added an optional dev-mode check to log, warn, or error if a component is rendered outside of EuiProvider (#6216)
    • Updated EuiBadge's disabled styling to match EuiButton (#6224)
    • Added the custom_component search filter type for the EuiSearchBar. This new type gives the consumer control to render the search filter dropdown. (#6226)

    Bug fixes

    • Fixed Query.toESQuery() to generate bool queries instead of relying on match query logic, to work with non-text fields (#6220)
    • Fixed EuiInMemoryTable's internal state tracking to include changes of sorting.sort values (#6228)
    • Fixed bug in EuiButton where iconSize was not being applied (#6230)

    CSS-in-JS conversions

    • Converted EuiBadge to Emotion (#6224)
    Source code(tar.gz)
    Source code(zip)
  • v67.0.0(Sep 7, 2022)

    • Updated EuiSuggest to accept the isPreFiltered prop (#5930)
    • Updated EuiOverlayMask to use EuiPortal (#6090)
    • Updated EuiToolTipPopover to be a function component (#6104)
    • Added EuiToolTipAnchor and EuiToolTipArrow components (#6104)
    • Added a new component prop to EuiPageSection, allowing overriding of the default section tag (#6192)

    Bug fixes

    • Fixed global styles being inserted into the wrong location when a EuiProvider cache is not configured. (#6202)
    • Fixed bug where className and rest props were not being passed to the EuiNotificationEvent (#6208)
    • Fixed various nested componentProps throwing type errors on the css prop (#6211)

    Deprecations

    • Added @deprecated flags to EuiPageContent_Deprecated, EuiPageContentBody_Deprecated, EuiPageContentHeader_Deprecated, EuiPageContentHeaderSection_Deprecated, EuiPageSideBar_Deprecated and EuiPageTemplate_Deprecated, which will provide helpful hints to IDEs that support jsdoc flags. Consumers will have until August 2023 to migrate from these deprecated components. (#6194)

    Breaking changes

    • Removed onClick prop from EuiOverlayMask. Use a nested EuiFocusTrap instead. (#6090)
    • Removed euiCallOutColor Sass mixin (#6201)

    CSS-in-JS conversions

    • Converted EuiOverlayMask to Emotion (#6090)
    • Converted EuiToolTip to Emotion styling (#6104)
    • Converted EuiPagination, EuiPaginationButton, and EuiPaginationButtonArrow to Emotion (#6109)
    Source code(tar.gz)
    Source code(zip)
  • v66.0.0(Aug 30, 2022)

    • Added the gutterSize prop to EuiDescriptionList (#6175)
    • Added tooltipText as an optional prop on EuiListGroupItem (#6186)

    Bug fixes

    • Updated the EuiHeaderSectionItem to not render if empty (#6158)
    • Added memoization to useEuiTheme's return value, supporting React's shallow prop comparison optimizations (#6165)
    • Fixed an EuiPageSidebar bug where inline styles were not correctly updating (#6191)

    Breaking changes

    • Removed .euiIEFlexWrapFix global className and internetExplorerOnly() Sass mixin, as IE is no longer a supported browser (#6154)
    • Removed all IE fixes/fallbacks in EUI CSS (#6161)
    • Removed all IE fixes/fallbacks in EUI JS (#6162)
    Source code(tar.gz)
    Source code(zip)
  • v65.0.2(Aug 24, 2022)

    Bug fixes

    • Fixed missing EuiDataGrid cell popover shadows in Safari (#6163)
    • Fixed a bug in some development environments which prevented EuiIcon from loading icons asynchronously (#6166)
    • Updated the build process to include json files, fixing imports from the @elastic/eui package (#6172)
    Source code(tar.gz)
    Source code(zip)
  • v65.0.1(Aug 23, 2022)

  • v65.0.0(Aug 23, 2022)

    65.0.0

    • Added anchorProps to allow passing more props to the anchoring wrapper in EuiToolTip and EuiBetaBadge (#6110)
    • Added an empty shade background color to hollow style EuiBetaBadge (#6110)
    • Changed design of select button in selectable EuiCards (#6110)
    • Updated button ghost colors to be colorMode = 'dark' themed text buttons (#6150)
    • Renamed ButtonColor and ButtonSize types to prefixed versions EuiButtonColor and EuiButtonSize (#6150)

    Deprecations

    • Deprecated ghost color for EuiButton, EuiButtonIcon, EuiButtonEmpty (#6150)

    Breaking changes

    • Removed EuiButtonIconColor and EuiButtonEmptyColor types, use EuiButtonIconProps['color'] and EuiButtonEmptyProps['color'] instead (#6150)
    • Removed support for ghost color from EuiButtonGroup (#6150)

    CSS-in-JS conversions

    • Removed euiHasBetaBadge() Sass mixin (#6110)
    • Converted EuiCard, EuiCheckableCard to Emotion, removed $euiCheckableCardPadding, $euiCardSpacing, $euiCardBottomNodeHeight, $euiCardSelectButtonBorders, $euiCardSelectButtonBackgrounds, and $euiCardPaddingModifiers (#6110)
    • Converted EuiButton to Emotion (#6150)
    • Converted color styles of EuiButtonIcon, EuiButtonEmpty, EuiButtonGroup (#6150)
    Source code(tar.gz)
    Source code(zip)
  • v64.0.1(Aug 18, 2022)

    Bug fixes

    • Fixed CollapsedItemActions ref callback not accounting for null value (#6145)

    CSS-in-JS conversions

    • Added logicalCSSWithFallback() utility for logical properties without full browser support (#6124)
    • Converted euiFullHeight() Sass mixin to Emotion (#6124)
    • Converted all global CSS utility classes to Emotion (#6124)
    Source code(tar.gz)
    Source code(zip)
  • v64.0.0(Aug 16, 2022)

    • Added onPositionChange callback prop to EuiPopover for when the popover positon changes (#6087)
    • Added isDisabled prop to EuiAccordion (#6095)
    • Added css prop to CommonProps interface (#6118)
    • Added new useIsWithinMaxBreakpoint and useIsWithinMinBreakpoint service hooks (#6119)

    Bug fixes

    • Fixed the steps prop type for useEuiTour to not require onFinish (#6087)
    • Fixed JS breakpoint hooks (useCurrentEuiBreakpoint, useIsWithinBreakpoints, and euiBreakpoint) to correctly handle custom theme breakpoint keys (#6111)
    • Fixed :first-child/:nth-child console warnings for consumers not passing in a cache to EuiProvider (#6126)
    • Fixed EuiScreenReaderLive double announcements on VO when focusRegionOnTextChange is not set (#6133)
    • Fixed onBlur and onFocus handlers from EuiDatePickerRange being incorrectly applied to wrapping element rather than the start/end control datepickers. (#6136)
    • Fixed missing data-fixed-headers property in some layout configurations using EuiPageTemplate. (#6140)
    • Fixed EuiAspectRatio sometimes incorrectly inheriting its height from parent containers as opposed to from its aspect ratio (#6141)
    • Fixed EuiAspectRatio to allow custom styles to be passed by consumers (#6141)
    • Fixed eui.d.ts containing @testing-library type definitions (#6142)

    Breaking changes

    • Removed getBreakpoint. Use useCurrentEuiBreakpoint instead (#6119)
    • Removed BREAKPOINTS and BREAKPOINT_KEYS. Use euiTheme.breakpoint instead (#6119)
    • Removed isWithinBreakpoints. Use useIsWithinBreakpoints instead (#6119)
    • Removed isWithinMaxBreakpoint. Use useIsWithinMaxBreakpoint instead (#6119)
    • Removed isWithinMinBreakpoint. Use useIsWithinMinBreakpoint instead (#6119)
    • EuiFlyout now only accepts a named breakpoint size for its pushMinBreakpoint prop (#6119)
    • EuiCollapsibleNav now only accepts a named breakpoint size for its dockedBreakpoint prop (#6119)
    • @emotion/cache is now a required peer dependency, alongside @emotion/react (#6126)

    CSS-in-JS conversions

    • Converted EuiTour to Emotion (#6087)
    Source code(tar.gz)
    Source code(zip)
  • v63.0.1(Aug 15, 2022)

  • v63.0.0(Aug 9, 2022)

    • Added new EuiPageTemplate namespaced component that uses context to pass through props (#5768)
    • Added EuiPageSection component for easier section stacking (#5768)
    • Added EuiPageSidebar component that is an upgrade to EuiPageSideBar (#5768)
    • Extended bottomBorder prop to add 'extended' on EuiPageHeader (#5768)
    • Added paddingSize and restrictWidth directly on EuiPageHeaderContent (#5768)
    • Added data-fixed-headers attribute to <body> with the count of fixed EuiHeader components (#5768)
    • Extended usePortal prop on EuiBottomBar to accept EuiPortalProps (#5768)
    • Increased paddingSize support by EuiPage for xl and xs sizes (#5768)
    • Moved restrictWidth default true style to style attribute on EuiPage and EuiPageBody (#5768)
    • Added optional height parameter to euiYScroll(), useEuiYScroll, euiYScrollWithShadows(), and useEuiYScrollWithShadows (#5768)
    • Added repositionOnScroll directly to EuiPopover rendered by mobile version of EuiHeaderLinks (#5768)

    Bug fixes

    • Fixed missing render of breadcrumbs on EuiPageHeader when alignItems = 'top' (#5768)
    • Fixed logicalStyle() to return the same value type as was passed in (instead of converting to string) (#5768)

    Deprecations

    • Deprecated the old EuiPageTemplate component and renamed to EuiPageTemplate_Deprecated (#5768)
    • Deprecated EuiPageContent and EuiPageContentBody in favor of new EuiPageSection (#5768)
    • Deprecated EuiPageContent and renamed to EuiPageContent_Deprecated (#5768)
    • Deprecated EuiPageContentBody and renamed to EuiPageContentBody_Deprecated (#5768)
    • Deprecated EuiPageContentHeader and renamed to EuiPageContentHeader_Deprecated (#5768)
    • Deprecated EuiPageContentHeaderSection and renamed to EuiPageContentHeaderSection_Deprecated (#5768)
    • Deprecated EuiPageSideBar and renamed to EuiPageSideBar_Deprecated (#5768)

    Breaking changes

    • Removed nested EuiPageHeader styles when a child of EuiPageBody (#5768)
    • Changed default paddingSize of EuiPage from m to none (#5768)

    CSS-in-JS conversion

    • Converted EuiPage and EuiPageBody to Emotion (#5768)
    • Converted EuiPageHeader and EuiPageHeaderContent to Emotion (#5768)
    • Removed euiPageRestrictWidth() Sass mixin (#5768)
    Source code(tar.gz)
    Source code(zip)
  • v62.2.0(Aug 9, 2022)

    • The EuiDataGrid's rowHeightOptions now contain an optional scrollAnchorRow property, which enables vertical layout shift compensation when rendering auto-sized rows. (#6070)
    • Added new React Testing Library EuiToolTip helpers, waitForEuiToolTipVisible and waitForEuiToolTipClose (#6106)

    Bug fixes

    • Fixed EuiPortal changes causing rerender issues in test environments (#6105)
    Source code(tar.gz)
    Source code(zip)
  • v62.1.0(Aug 2, 2022)

    • Updated tokenFile, tokenSymbol and tokenRepo default shapes to square instead of rectangle (#6067)
    • Updated EuiGlobalToastList to be a function component (#6068)
    • Added new useCurrentEuiBreakpoint hook, which returns the current browser window width as a named EUI breakpoint size (e.g. xl) (#6079)

    Bug fixes

    • Fixed unintentional subcomponent remounting in EuiCodeBlock during rerenders (#6077)
    • Fixed useIsWithinBreakpoints hook not correctly respecting consumer theme breakpoint overrides (#6079)

    CSS-in-JS conversions

    • Converted EuiBreadcrumbs and EuiHeaderBreadcrumbs to Emotion; removed $euiBreadcrumbSpacing and $euiBreadcrumbTruncateWidth (#5934)
    • Converted EuiDescriptionList to Emotion (#5971)
    • Converted EuiToken to Emotion (#6067)
    • Converted EuiToast, EuiGlobalToastList, and EuiGlobalToastListItem to Emotion (#6068)
    • Moved .euiBody-hasPortalContent styles that used to live in _portal.scss to Emotion EuiGlobalStyles (#6075)
    Source code(tar.gz)
    Source code(zip)
  • v62.0.2(Aug 2, 2022)

    • Added new React Testing Library ByDataTestSubj utilities for targeting EUI's data-test-subj attributes. These can be accessed by importing custom RTL render and screen utils from @elastic/eui/lib/test/rtl. (#6091) (#6091)
    • Added new React Testing Library EuiPopover helpers, waitForEuiPopoverOpen and waitForEuiPopoverClose (#6091)

    Bug fixes

    • Restored non-Emotion classNames to EuiCommentEvent's children (#6089)
    Source code(tar.gz)
    Source code(zip)
  • v62.0.1(Jul 27, 2022)

    Bug fixes

    • Fixed a bug preventing EuiPortal from working in server-side rendering (#6055)
    • Fixed an EuiFilterButton accessibility error (#6076)
    • Fixed EuiImage rendering empty captions (#6081)
    • Fixed EuiImage not respecting text-align on parents (#6081)
    Source code(tar.gz)
    Source code(zip)
  • v62.0.0(Jul 26, 2022)

    • Updated EuiText.img styles to prevent images from growing full width (#5969)
    • Improved EuiImage's allowFullScreen screen reader experience (#5969)
    • Updated EuiImage's full screen mode to use the fullScreenExit icon (#5969)
    • Updated EuiPopover's display prop to accept any CSS display value (#5977)
    • Added data-popover-open attribute to EuiPopover's panel (#5977)
    • Changed EuiPopover's box-shadow to filter (#5977)
    • Added logicalSizeCSS and logicalSizeStyle for quickly producing width and height styles (#5977)
    • Increased the opacity of the shadow color in dark mode (#5977)
    • Improved screen reader accessibility for EuiDataGrid column headers (#6034)
    • Added tokenMetricCounter and tokenMetricGauge to EuiToken (#6064)
    • Removed the nested aria-label on the EuiAvatar icon to simplify a11y (#6071)
    • Added timelineAvatarAriaLabel to EuiComment (#6071)

    Bug fixes

    • Reverted the change EuiCommentEvent.username type from ReactNode to string (#6071)
    • Fixed searchable single selection EuiSelectables not correctly highlighting the checked option on initial render (#6072)

    Breaking changes

    • Updated EuiImage.className to be applied to the img instead of the parent wrapper figure and added wrapperProps prop so that consumers can apply props to the figure element (#5969)
    • Renamed EuiPopover's display prop value inlineBlock to inline-block (#5977)
    • EuiPopover: Removed false as an option from initialFocus (#6044)
    • Renamed timelineIcon on EuiComment to timelineAvatar (#6071)

    CSS-in-JS

    • Converted EuiImage to Emotion (#5969)
    • Converted EuiPopover, EuiPopoverTitle, EuiPopoverFooter, EuiInputPopover (#5977)

    CSS-in-JS conversions

    • Converted EuiErrorBoundary to Emotion (#6053)
    • Converted EuiTextDiff to Emotion (#6056)
    • Converted euiBreakpoint mixin to Emotion. (#6057)
    Source code(tar.gz)
    Source code(zip)
  • v61.0.0(Jul 19, 2022)

    • Added eventIcon, eventIconAriaLabel, and eventColor props to EuiComment (#6030)
    • Updated EuiComment.actions type to accept ReactNode[] (#6030)
    • Updated .euiMarkdownEditor display to flex to prevent display issues when the markdown editor is inside a EuiComment (#6030)
    • Added styles for kbd's within EuiText (#6049)
    • Added keyboard glyph to EuiIcon (#6058)

    Bug fixes

    • Fixed bug in EuiTimelineItem where classNames were not being applied (#6030)
    • Fixed multiple missing CSS logical properties within EuiText children (#6059)

    Deprecations

    • Deprecated EuiIcon's keyboardShortcut in favor of keyboard (#6058)

    Breaking changes

    • Changed EuiCommentEvent.username type from ReactNode to string (#6030)
    • Updated EuiCommentList and EuiComment to use EuiTimeline and EuiTimelineItem respectively. This change makes the EuiCommentList to be always required (#6030)
    • Removed EuiComment.type (#6030)

    CSS-in-JS conversions

    • Converted EuiComment to Emotion (#6030)
    Source code(tar.gz)
    Source code(zip)
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 8.1k Jan 7, 2023
React components for Bulma framework

React-bulma-components React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js) V4 Pool Please Check h

John 1.2k Jan 8, 2023
React.js components for Modern CSS framework based on Flexbox

React-Bulma React.js components for Modern CSS framework based on Flexbox Styleguide: https://kulakowka.github.io/react-bulma/ Official Repo: https://

Anton Kulakov 467 Dec 7, 2022
👟 rbx – The Comprehensive Bulma UI Framework for React

rbx – The Comprehensive Bulma UI Framework for React ?? Read the docs. ?? I'll wait, go check them out! Features up-to-date Bulma implementation (0.7.

Devin Fee 476 Nov 16, 2022
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

Ed Mortlock 267 Dec 28, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.3k Jan 7, 2023
Elastic UI Framework 🙌

Elastic UI Framework The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React?

elastic 5.6k Jan 5, 2023
Your window into the Elastic Stack

Kibana Kibana is your window into the Elastic Stack. Specifically, it's a browser-based analytics and search dashboard for Elasticsearch. Getting Star

elastic 18.1k Jan 6, 2023
Progressive View Model Management Framework

region-core region-core is a progressive View Model Management Framework. You can use it while using react state, redux, and benefit from it. English

regionjs 109 Dec 13, 2022
The React Framework

Next.js Getting Started Visit https://nextjs.org/learn to get started with Next.js. Documentation Visit https://nextjs.org/docs to view the full docum

Vercel 98.4k Jan 2, 2023
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.3k Jan 6, 2023
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
BackboneJS compatibility layer for React-MVx MVVM framework.

Important notice NestedReact is the BackboneJS compatibility layer for React-MVx - modern React MVVM application framework. It will be maintained as l

VoliJS 79 Apr 19, 2022
Render React components in the Play Framework with JDK8's JavaScript engine

React.js on the Play Framework JDK8 shipped with a JavaScript runtime: Nashorn React supports server side rendering via React.renderToString. The Play

Ross Allen 213 Oct 28, 2022
A data visualization framework combining React & D3

Semiotic is a data visualization framework combining React & D3 Interactive Documentation API Docs on the wiki Examples Installation npm i semiotic E

nteract 2.3k Dec 29, 2022
Highly Composable MVVM Framework for React

Astarisx Highly Composable MVVM Framework for React. Click here for the Astarisx Website and Documentation Highly Composable UI Components Astarisx Vi

Zuudo 86 Aug 13, 2019
🌲 Evergreen React UI Framework by Segment

Works out of the box. Evergreen contains a set of polished React components that work out of the box. Flexible & composable. Evergreen components are

Segment 12k Jan 5, 2023
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 8.1k Jan 7, 2023
React components for Bulma framework

React-bulma-components React components for Bulma (v0.8.2) UI compatible with most used React Frameworks (Gatsby, CRA, Next.js) V4 Pool Please Check h

John 1.2k Jan 8, 2023
React.js components for Modern CSS framework based on Flexbox

React-Bulma React.js components for Modern CSS framework based on Flexbox Styleguide: https://kulakowka.github.io/react-bulma/ Official Repo: https://

Anton Kulakov 467 Dec 7, 2022