8 ms·

Elastic UI – Component library for data-driven web apps

84 points by puika 4y ago

davidy123 4y ago
I was hoping it would use something akin to openai or SHEX to describe the data inputs and outputs for components. Instead, it as others say, another React component library that uses design tokens.
switch007 4y ago
Not a very accurate title > The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics
pookeh 4y ago
Didn’t Elastic change licenses for all it’s products and libraries such that they are not really useable for commercial SaaS products?
- stemcc 4y ago
  Sure did: https://github.com/elastic/eui/blob/main/licenses/ELASTIC-LICENSE-2.0.md https://github.com/elastic/eui/blob/main/licenses/ELASTIC-LI...
- pcurve 4y ago
  their tagline seems to indicate so "The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics."
  - jen20 4y ago
    "EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1" - so yes, it appears this is not usable for anything serious at all.
pcurve 4y ago
This is just about the best ui library I've seen. Are there ones that are in the same league? blueprintjs is a great one too.
- spankalee 4y ago
  Shoelace is very high quality: https://shoelace.style/ https://shoelace.style/
  - sgc 4y ago
    For somebody who dislikes frameworks in general, this one looks great.
- hankstenberg 4y ago
  Mantine is fantastic: https://mantine.dev/ https://mantine.dev/
  - hyuuu 4y ago
    one more vote for mantine, such a fantastic, dynamic and constantly updated UI library
- josephcooney 4y ago
  I'm interested to hear what makes this out stand out as being among the best?
- pbowyer 4y ago
  https://atlaskit.atlassian.com/ https://atlaskit.atlassian.com/
- chimen 4y ago
  https://ant.design/ https://ant.design/
- spoils19 4y ago
  False. The best UI library are those where you can build solid, readable and long-lasting terminal UI's - so nothing on the web.
spankalee 4y ago
React only, unfortunately. The title should really be "React Component library..."
jwr 4y ago
I am so hoping for a CSS-only (or at least CSS-mostly) library to come along, especially one that is fairly complete, designed for the long term, and usable for (boring) large applications and data-dense tables. I do not need a full JavaScript "framework", I have a React app (in ClojureScript) and I'm fine, thank you. I've been living with Semantic UI which got many things right, but has been abandoned for quite a while now. Most things that capture the crowd attention are humongous piles of JavaScript with a bazillion dependencies, that will likely be out of fashion in a year or two.
- ng12 4y ago
  What's wrong with Tailwind and Bootstrap? The reason the ecosystem is focusing on framework-specific component libraries is because people want out-of-the-box components that do things, not just ones that look nice. That's very difficult to deliver without an opinionated framework; specifically you'll massively sacrifice developer experience. I feel much more comfortable about using libraries like Elastic UI than I ever did using something like jQuery-ui or Bootstraps's JS extensions.
  - jwr 4y ago
    Bootstrap is not designed for complex data-dense applications, doesn't have all the components needed in complex forms and its tables aren't quite cutting it for me. Tailwind UI has been on my radar for a while now. There are two reasons why I didn't dive into it yet: * a very verbose approach to describing what you want: closer to describing how it should look like rather than what it is. That would mean a big rework of my application (quick check shows around 1200 places where Semantic UI constructs are used) or writing a "layer" that maps my app's semantic usage to Tailwind UI promitives. * Tailwind is still JavaScript-heavy. Here's an excerpt from my discussion with Talwind UI founder, which will perhaps help understand my point of view. I was describing something I would happily pay a significant subscription fee for: "This actually isn't far from the truth, because I had actually landed on the Tailwind UI site first, without knowing about Tailwind CSS, and this is exactly what I had thought the deal was. Later I understood that Tailwind UI is a bunch of "snippets", basically examples of how to use Tailwind CSS, which I think is indeed a problematic value proposition. However: to be honest, when I looked at the amount of low-level class information I would need to put in my source, I was not impressed. I would much rather use the Semantic-UI approach. And perhaps this is a hint for you: provide a higher-level interface, that way you won't end up with "snippets", but with maintained components, which changes the whole pricing equation. In other words, to see what I would immediately pay for, look at Semantic UI. No need to "update snippets" there. I would pay for a CSS library that lets me build applications on a level similar to Semantic UI, with the ability to customize or theme components. And it's not about an "installable dependency", either — in fact I fight very hard not to depend on any npm packages, and I had to build my own dockerized build system for Semantic UI because of their approach to building. What I'd like to get is basically a tarball which I could automatically unpack, drop in a config file and do a "make" to get the CSS deliverables. I think there is a difference in thinking here: I am an application developer and looking from the outside I see the "web design community" as a bit of an echo chamber, with similar ideas being implemented over and over, and no clear path to revenue. At the same time, I can't buy the tools I need. I look at libraries like Bootstrap, Bulma, or Tailwind CSS, and I see the same thing: low-level tools for "web designers". It's too low-level! I don't want to "build bespoke designs without any annoying opinionated styles you have to fight to override" — I actually want a well-designed set of components (opinionated is good!) so that I can get on with delivering the functionality my customers actually pay for. So, forms, tables, menus, tabs, popups. Let's look into my situation: I am not a designer and I don't have time for fiddling with details. What are my options? I can't use these low-level tools, not enough time. I can hire a designer: it is expensive, it's really difficult to find one that will understand what I need, work closely with the code I have, and be generally good. Or I can use a more high-level tool, which is how I ended up with Semantic UI. It's not that I'm crazy about the whole "semantic naming" aspect of it, it was just a well-designed and complete set of components that I could use immediately. I don't know how big this market is, but I have this feeling that there is a big hole right now. Here's another guy like me: https://actualbudget.com/#features https://actualbudget.com/#features — I actually asked them how he got the nice-looking dense editable tables. He implemented them himself."
throwoutway 4y ago
Posted 5 months ago and the discussion revolved around the weird license: https://news.ycombinator.com/item?id=31791324 https://news.ycombinator.com/item?id=31791324
rch 4y ago
The tree view and data grid components don't seem to support lazy loading elements, which is particularly disappointing given how frequently I end up implementing that functionality in front of ElasticSearch and Solar. Apologies if I'm overlooking something that simply isn't documented prominently. (FWIW I do see the pagination support on the grid, but I'm looking for fluid vertical and horizontal scrolling)
- snide 4y ago
  The Data grid does support virtualization. You can see it in the menu of examples. It's only the default example that does not use it.
  - rch 4y ago
    Excellent, I see now. Thanks! Interesting that it's using react-window under the hood. -- https://react-window.vercel.app/#/api/VariableSizeGrid https://react-window.vercel.app/#/api/VariableSizeGrid
ramesh31 4y ago
I’m coming around to a front end philosophy lately that shuns “all-in-one” component libraries entirely, because it’s a fantasy that never really plays out in reality. Take just tables for example; every component library has their own table implementation, and they all fall short in some fashion. Either they lack sufficient filtering, or their rendering performance nosedives with large datasets, or they enforce some kind of data structure that doesn’t work for you. So you end up pulling in a specialized table library and theming it to fit your needs. Now you have two redundant table components in your codebase, and it can be really unclear to new contributors which should be used where and why. Repeat ad nauseum for dropdowns, modals, etc. and all of the sudden the vast majority of your initial component library choice becomes dead weight. Better to build your own simple primitives using Tailwind, (buttons, text, popovers, cards, and the like), then selectively pull in specialized components that solve one single problem thouroughly, and have widespread OSS support and usage.
claytongulick 4y ago
I really wish that everyone who was investing this much time into design systems would implement the primitives as Web Components. It's trivial to wrap Web Components to work with pretty much any framework, and most support them out of the box. It's hard or impossible to go the other direction though. Also, you get bound to framework versions and end up in the endless upgrade hamster wheel.
tluyben2 4y ago
The license is a non starter.

84 points by puika 4y ago

I was hoping it would use something akin to openai or SHEX to describe the data inputs and outputs for components. Instead, it as others say, another React component library that uses design tokens.

switch007 4y ago

Not a very accurate title > The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics

pookeh 4y ago

Didn’t Elastic change licenses for all it’s products and libraries such that they are not really useable for commercial SaaS products?

stemcc 4y ago
Sure did: https://github.com/elastic/eui/blob/main/licenses/ELASTIC-LICENSE-2.0.md https://github.com/elastic/eui/blob/main/licenses/ELASTIC-LI...
pcurve 4y ago
their tagline seems to indicate so "The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics."
- jen20 4y ago
  "EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1" - so yes, it appears this is not usable for anything serious at all.

pcurve 4y ago

This is just about the best ui library I've seen. Are there ones that are in the same league? blueprintjs is a great one too.

spankalee 4y ago
Shoelace is very high quality: https://shoelace.style/ https://shoelace.style/
- sgc 4y ago
  For somebody who dislikes frameworks in general, this one looks great.
hankstenberg 4y ago
Mantine is fantastic: https://mantine.dev/ https://mantine.dev/
- hyuuu 4y ago
  one more vote for mantine, such a fantastic, dynamic and constantly updated UI library
josephcooney 4y ago
I'm interested to hear what makes this out stand out as being among the best?
pbowyer 4y ago
https://atlaskit.atlassian.com/ https://atlaskit.atlassian.com/
chimen 4y ago
https://ant.design/ https://ant.design/
spoils19 4y ago
False. The best UI library are those where you can build solid, readable and long-lasting terminal UI's - so nothing on the web.

spankalee 4y ago

React only, unfortunately. The title should really be "React Component library..."

jwr 4y ago

I am so hoping for a CSS-only (or at least CSS-mostly) library to come along, especially one that is fairly complete, designed for the long term, and usable for (boring) large applications and data-dense tables. I do not need a full JavaScript "framework", I have a React app (in ClojureScript) and I'm fine, thank you. I've been living with Semantic UI which got many things right, but has been abandoned for quite a while now. Most things that capture the crowd attention are humongous piles of JavaScript with a bazillion dependencies, that will likely be out of fashion in a year or two.

ng12 4y ago
What's wrong with Tailwind and Bootstrap? The reason the ecosystem is focusing on framework-specific component libraries is because people want out-of-the-box components that do things, not just ones that look nice. That's very difficult to deliver without an opinionated framework; specifically you'll massively sacrifice developer experience. I feel much more comfortable about using libraries like Elastic UI than I ever did using something like jQuery-ui or Bootstraps's JS extensions.
- jwr 4y ago
  Bootstrap is not designed for complex data-dense applications, doesn't have all the components needed in complex forms and its tables aren't quite cutting it for me. Tailwind UI has been on my radar for a while now. There are two reasons why I didn't dive into it yet: * a very verbose approach to describing what you want: closer to describing how it should look like rather than what it is. That would mean a big rework of my application (quick check shows around 1200 places where Semantic UI constructs are used) or writing a "layer" that maps my app's semantic usage to Tailwind UI promitives. * Tailwind is still JavaScript-heavy. Here's an excerpt from my discussion with Talwind UI founder, which will perhaps help understand my point of view. I was describing something I would happily pay a significant subscription fee for: "This actually isn't far from the truth, because I had actually landed on the Tailwind UI site first, without knowing about Tailwind CSS, and this is exactly what I had thought the deal was. Later I understood that Tailwind UI is a bunch of "snippets", basically examples of how to use Tailwind CSS, which I think is indeed a problematic value proposition. However: to be honest, when I looked at the amount of low-level class information I would need to put in my source, I was not impressed. I would much rather use the Semantic-UI approach. And perhaps this is a hint for you: provide a higher-level interface, that way you won't end up with "snippets", but with maintained components, which changes the whole pricing equation. In other words, to see what I would immediately pay for, look at Semantic UI. No need to "update snippets" there. I would pay for a CSS library that lets me build applications on a level similar to Semantic UI, with the ability to customize or theme components. And it's not about an "installable dependency", either — in fact I fight very hard not to depend on any npm packages, and I had to build my own dockerized build system for Semantic UI because of their approach to building. What I'd like to get is basically a tarball which I could automatically unpack, drop in a config file and do a "make" to get the CSS deliverables. I think there is a difference in thinking here: I am an application developer and looking from the outside I see the "web design community" as a bit of an echo chamber, with similar ideas being implemented over and over, and no clear path to revenue. At the same time, I can't buy the tools I need. I look at libraries like Bootstrap, Bulma, or Tailwind CSS, and I see the same thing: low-level tools for "web designers". It's too low-level! I don't want to "build bespoke designs without any annoying opinionated styles you have to fight to override" — I actually want a well-designed set of components (opinionated is good!) so that I can get on with delivering the functionality my customers actually pay for. So, forms, tables, menus, tabs, popups. Let's look into my situation: I am not a designer and I don't have time for fiddling with details. What are my options? I can't use these low-level tools, not enough time. I can hire a designer: it is expensive, it's really difficult to find one that will understand what I need, work closely with the code I have, and be generally good. Or I can use a more high-level tool, which is how I ended up with Semantic UI. It's not that I'm crazy about the whole "semantic naming" aspect of it, it was just a well-designed and complete set of components that I could use immediately. I don't know how big this market is, but I have this feeling that there is a big hole right now. Here's another guy like me: https://actualbudget.com/#features https://actualbudget.com/#features — I actually asked them how he got the nice-looking dense editable tables. He implemented them himself."

throwoutway 4y ago

Posted 5 months ago and the discussion revolved around the weird license: https://news.ycombinator.com/item?id=31791324 https://news.ycombinator.com/item?id=31791324

rch 4y ago

The tree view and data grid components don't seem to support lazy loading elements, which is particularly disappointing given how frequently I end up implementing that functionality in front of ElasticSearch and Solar. Apologies if I'm overlooking something that simply isn't documented prominently. (FWIW I do see the pagination support on the grid, but I'm looking for fluid vertical and horizontal scrolling)

snide 4y ago
The Data grid does support virtualization. You can see it in the menu of examples. It's only the default example that does not use it.
- rch 4y ago
  Excellent, I see now. Thanks! Interesting that it's using react-window under the hood. -- https://react-window.vercel.app/#/api/VariableSizeGrid https://react-window.vercel.app/#/api/VariableSizeGrid

ramesh31 4y ago

I’m coming around to a front end philosophy lately that shuns “all-in-one” component libraries entirely, because it’s a fantasy that never really plays out in reality. Take just tables for example; every component library has their own table implementation, and they all fall short in some fashion. Either they lack sufficient filtering, or their rendering performance nosedives with large datasets, or they enforce some kind of data structure that doesn’t work for you. So you end up pulling in a specialized table library and theming it to fit your needs. Now you have two redundant table components in your codebase, and it can be really unclear to new contributors which should be used where and why. Repeat ad nauseum for dropdowns, modals, etc. and all of the sudden the vast majority of your initial component library choice becomes dead weight. Better to build your own simple primitives using Tailwind, (buttons, text, popovers, cards, and the like), then selectively pull in specialized components that solve one single problem thouroughly, and have widespread OSS support and usage.

claytongulick 4y ago

I really wish that everyone who was investing this much time into design systems would implement the primitives as Web Components. It's trivial to wrap Web Components to work with pretty much any framework, and most support them out of the box. It's hard or impossible to go the other direction though. Also, you get bound to framework versions and end up in the endless upgrade hamster wheel.

tluyben2 4y ago

The license is a non starter.