Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic🙌

Last update: Jun 26, 2022

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

Dual-licensed under Elastic v2 and Server Side Public License, v 1 Read the FAQ for details.

GitHub

https://github.com/elastic/eui
Comments
  • 1. [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
    Reviewed by ashikmeerankutty at 2020-06-04 17:22
  • 2. [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
    Reviewed by thompsongl at 2021-09-08 20:08
  • 3. [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
    Reviewed by andreadelrio at 2020-08-31 06:20
  • 4. [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
    Reviewed by kertal at 2020-06-29 11:07
  • 5. [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
    Reviewed by ryankeairns at 2020-01-16 18:23
  • 6. 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
    Reviewed by anishagg17 at 2020-07-01 18:16
  • 7. [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~
    Reviewed by miukimiu at 2021-11-24 11:36
  • 8. 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
    Reviewed by hetanthakkar1 at 2021-04-22 21:22
  • 9. [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

    Reviewed by thompsongl at 2020-03-12 18:30
  • 10. [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
    Reviewed by snide at 2020-03-16 03:58
  • 11. [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

    Reviewed by thompsongl at 2020-03-12 18:30
  • 12. Update README to document M1 Apple devices support

    Summary

    This PR adds a small section in the root README file to indicates the steps to take when trying to yarn and yarn start on an M1 Apple device. From a discussion on Slack we need to make sure the Terminal app is running in Rosetta mode, as well as downgrading the version of node (to version 14).

    Notes: I'm on week 3 at Elastic and this is my second PR. Please do not hesitate to close it if this PR is not desired, or if it isn't following the proper standards. I also could not find any guidance on how to format the commit message, so hopefully what I did is OK!

    Reviewed by PhilippeOberti at 2022-06-16 23:27
  • 13. [EuiContextMenu] Add "style" prop to context menu

    EuiContextMenu does not have a "style" prop

    It would be convenient to have it so that we can modify it the same way as most elastic components, in my case I would like to change the width.

    Is there a specific purpose that it's omitted? Thanks!

    Reviewed by p-young at 2022-06-16 23:18
  • 14. [EuiComboBox] Selecting an option retriggers search with `''`

    When using an EuiComboBox, with onSearchChange, after a user selects an option, then it will trigger a search with a blank string (''):

    https://github.com/elastic/eui/blob/bc24f11a13980e61300e27ed4f733018ce50fee5/src/components/combo_box/combo_box.tsx#L690-L694

    https://github.com/elastic/eui/blob/bc24f11a13980e61300e27ed4f733018ce50fee5/src/components/combo_box/combo_box.tsx#L423-L425

    This is unexpected and it requires the implementor of onSearchChange to ignore '' strings in order to avoid the selection of an item triggering a search. I would expect no search to be triggered as the result of a selection or, at most, the search to be the newly selected value.

    Reviewed by pickypg at 2022-06-16 19:12
  • 15. [EuiPopover and parts] Converted to Emotion

    [Breaking] EuiPopover's display prop now accepts real CSS display values

    The reason this is breaking is because the old value inlineBlock needed to change to snake case inline-block. This shouldn't be a big deal since inline-block is default.

    [New] EuiPopoverPanel (internal only)

    Some other EUI components were duplicating the .euiPopover__panel classes on EuiPanel instances to recreate the popover styles. Instead, I've pulled that EuiPanel out of EuiPopover directly and created EuiPopovePanel that other components like EuiComboBox now use. It mainly handles the styling based on position, isOpen, or isAttached.

    Added EuiPopoverPanelContext to pass through panelPadding

    The popover title and footer components used a complicated set of parent/child selectors to inherit padding and/or create margins to account for panel padding. Instead of sticking with the nested selectors, I opted for creating a context that the EuiPopoverTitle and Footer components used to decide how it should handle those margins and it's own padding size.

    This is debatable whether context here is really necessary, so I'm open to other options that don't require going back to nested selectors.

    Other changes of note from the old .euiPopover__panel

    1. I've kept the naming of the component to be .euiPopover__panel instead of .euiPopoverPanel mainly to reduce breaks.
    2. I've remove the old .euiPopover__panel-isOpen class in favor of using a data attribute that exists or doesn't called data-popover-open.

    [New] EuiPopoverArrow (internal only)

    This new component mainly handles the styling based on arrowPosition. The styles for this element used to be a complicated set of multiple pseudo elements, borders, and clip-paths. I've reduced this complexity to a single :before element with borders to create the triangle and then using the filter: drop-shadow() method of creating the shadow on the whole panel. Using filter takes into account the actual outline of an element where as box-shadow is only ever square.

    Note There is a slight difference between the render of the two methods even with the exact same values. This difference isn't enough to consider a whole different set of values for the filter method.

    image

    [New] property option for euiShadowMedium()

    In order to quickly support the same values for this shadow size in both methods, I just added the property as an optional key in the optional parameter.

    [New] JS mixin for euiFormMaxWidth

    I needed this in order to re-use the variable in JS. I decided not to put it in the global theme at least for now and push the decision down the road on how we want to handle component-based re-usable variables.

    [New] logicalSizeCSS(width, height)

    For quickly creating width and height values.

    Screen Shot 2022-06-16 at 15 12 03 PM

    [Update] Increased the opacity of shadow color in dark mode

    It's always been pretty hard to see the outlines of panels with just a simple shadow, this helps a little bit, but I think we can follow up at some point with something even better.

    image

    [Conversion] EuiPopover & parts

    • EuiPopover: Base styles are pretty simple. Moves the popover panel and arrow to external components.
    • EuiInputPopover: This simply was ensuring the popover wrapper adhered to the same form width sizing by applying the new variable (but only when fullWidth=false).
    • EuiPopoverFooter & EuiPopoverTitle: See EuiPopoverPanel section above for inherited padding details. Otherwise nothing has changed except fo removing the padding classes.

    Checklist

    • [x] Checked in both light and dark modes
    • [x] Checked in mobile
    • [ ] Checked in Chrome, Safari, Edge, and Firefox
    • [ ] Props have proper autodocs and playground toggles
    • [x] Added documentation
    • [x] Checked Code Sandbox works for any docs examples
    • [x] Added or updated jest and cypress tests
    • [x] Checked for breaking changes and labeled appropriately
    • [ ] Checked for accessibility including keyboard-only and screenreader modes
    • [ ] Updated the Figma library counterpart
    • [ ] A changelog entry exists and is marked appropriately
    Reviewed by cchaos at 2022-06-16 18:20
  • 16. [Docs] `EuiAccordion` props table

    Summary

    Provide a detailed summary of your PR. Explain how you arrived at your solution. If it includes changes to UI elements include a screenshot or gif.

    Checklist

    • [ ] Checked in both light and dark modes
    • [ ] Checked in mobile
    • [ ] Checked in Chrome, Safari, Edge, and Firefox
    • [ ] Props have proper autodocs and playground toggles
    • [ ] Added documentation
    • [ ] Checked Code Sandbox works for any docs examples
    • [ ] Added or updated jest and cypress tests
    • [ ] Checked for breaking changes and labeled appropriately
    • [ ] Checked for accessibility including keyboard-only and screenreader modes
    • [ ] Updated the Figma library counterpart
    • [ ] A changelog entry exists and is marked appropriately
    Reviewed by thompsongl at 2022-06-15 20:14
  • 17. [Platform] Update browser targets to reduce build size

    Summary

    Fixes an issue that has come up twice in Kibana support. The issue is that the spread operation,

    matchingOptions.push(...matchingOptionsForGroup);
    

    was transpiled to

    matchingOptions.push.apply(matchingOptions, matchingOptionsForGroup);
    

    which overflowed the call stack size when matchingOptionsForGroup array was too large (see https://mathiasbynens.be/demo/javascript-argument-count). Initial testing showed the spread operation itself didn't have the same limit, so I updated the babel plugins to the latest version and optimized our @babel/env browser list (dropped phantomjs which was used for the defunct visual regression testing) so the spread operation wouldn't be transpiled. However I ran into the same error with an even larger array size, so I ended up refactoring to use the concat approach.

    With the babel & browser target changes, es build artifact drops 8.0M -> 7.4M. I'll test this further in Kibana & go through the EUI docs in all browsers before merging, but wanted to put it in front of folks' eyes before that continued testing.

    Changes

    • updated array building method in matching_options.ts
    • added a regression unit test
    • updated babel modules to latest
    • minor yarn.lock clean up
    • removed phantomjs support
    • removed @babel/env target override in jest's babel config as it reads from .browserslistrc instead

    /cc @flash1293

    Checklist

    ~- [ ] Checked in both light and dark modes~

    • [ ] Checked in mobile
    • [ ] Checked in Chrome, Safari, Edge, and Firefox ~- [ ] Props have proper autodocs and playground toggles~ ~- [ ] Added documentation~ ~- [ ] Checked Code Sandbox works for any docs examples~ ~- [ ] Added or updated jest and cypress tests~
    • [ ] Checked for breaking changes and labeled appropriately ~- [ ] Checked for accessibility including keyboard-only and screenreader modes~ ~- [ ] Updated the Figma library counterpart~
    • [ ] A changelog entry exists and is marked appropriately
    Reviewed by chandlerprall at 2022-06-15 17:41
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Jun 27, 2022
flowbite-react is an open source collection of UI components, built in React, with utility classes from Tailwind CSS
flowbite-react is an open source collection of UI components, built in React, with utility classes from Tailwind CSS

flowbite-react is an open source collection of UI components, built in React, with utility classes from Tailwind CSS

Jun 23, 2022
Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

Jun 20, 2022
React GUI-Framework based on Material UI; provides a couple of components for back-office apps (CRUD-based APIs)
React GUI-Framework based on Material UI; provides a couple of components for back-office apps (CRUD-based APIs)

Backoffice is a Framework based on Material UI, a Material Design React implementation that provides a couple of components you might want to use in a backoffice app.

Apr 8, 2022
PCUI - User interface component library for the web
PCUI - User interface component library for the web

This library enables the creation of reliable and visually pleasing user interfaces by providing fully styled components that you can use directly on your site. The components are useful in a wide range of use cases, from creating simple forms to building graphical user interfaces for complex web tools.

Jun 16, 2022
Hacknical, hacker & technical. A website for GitHub user to make a better resume.
Hacknical, hacker & technical. A website for GitHub user to make a better resume.

Hacknical hacknical, hacker & technical A website for GitHub user to generate his GitHub data analysis (contributions/commits/languages/repos datas),

Jun 20, 2022
Toolkit for building accessible rich web apps with React
Toolkit for building accessible rich web apps with React

Reakit Toolkit for building accessible rich web apps with React. Explore website » Sponsors By donating $100 or more you become a sponsor and help in

Jun 17, 2022
🌲 Evergreen React UI Framework by Segment
🌲 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

Jun 17, 2022
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

Jun 18, 2022
Alumina is a react-like small UI framework.

Alumina is a react-like small UI framework. It aims to rapid and easy development for small applications.

Apr 26, 2022
An opinionated UI components library for React. Based on Styled Components and Styled System.
An opinionated UI components library for React. Based on Styled Components and Styled System.

Insites UI Insites UI is an opinionated UI components library, powered by TypeScript, Styled Components and Styled System. It comes with source versio

Nov 26, 2021
Configurable React Components with great UX
Configurable React Components with great UX

Belle Configurable React Components with great UX. Website & Documentation: http://nikgraf.github.io/belle/ Getting Started Belle is available as npm

May 23, 2022
⚡️ Simple, Modular & Accessible UI Components for your React Applications
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Jun 25, 2022
🌈 React components that inspired by Microsoft's Fluent Design System.

Fluent-Windows React components that inspired by Microsoft's Fluent Design System. English | 简体中文 Installation Install the package in your project dir

May 25, 2022
A set of React UI components that supports Pinterest’s design language

Gestalt Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and

Jun 25, 2022
React components of open-source Orbit design system by Kiwi.com

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products. Orbit Mission O

Jun 21, 2022
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

Jun 20, 2022
Foundation as React components.
Foundation as React components.

React + Foundation Foundation as React components. Demo https://digia.online/react-foundation-docs/ Components with Bit Motivation Foundation is both

Jun 5, 2022
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo

Jun 26, 2022