Elastic UI – Component library for data-driven web apps(elastic.github.io)
elastic.github.io
Elastic UI – Component library for data-driven web apps
https://elastic.github.io/eui/#/
34 comments
Posted 5 months ago and the discussion revolved around the weird license: https://news.ycombinator.com/item?id=31791324
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.
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.
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.
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.
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 — I actually asked them how he got the nice-looking dense editable tables. He implemented them himself."
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 — I actually asked them how he got the nice-looking dense editable tables. He implemented them himself."
Well you are in luck:
https://daisyui.com/
Zero js :) Found it while trying to escape from Bootstrap
https://daisyui.com/
Zero js :) Found it while trying to escape from Bootstrap
Tabler is quite decent: https://preview.tabler.io/
I'm using Tabler for my latest project and love it so far. There are some caveats though:
- It's way too verbose sometimes. There are numerous instances where I would have done just a single tag and Tabler has two or three of them nested.
- Some similar components are implemented in way different ways. Compare .status-indicator which takes color as a dedicated class (`.status-green`, for example) and .badge, which uses background-color helpers (e. g. `.bg-green`).
- Secondary buttons are .btn without additional class, unlike .btn.btn-secondary in Bootstrap (which Tabler is based on). If you add .btn-secondary, you'll get a weird out-of-style button. Things get more difficult when you use a Bootstrap-based library for some interactive elements (I'm using Sveltestrap) and it adds .btn-secondary by default.
- Some layout bugs get introduced and fixed, nothing you can't patch out though. Hope it will get better as it matures.
Overall it's neat though, and for prototyping things quickly I'd say it's the best you can get now.
- It's way too verbose sometimes. There are numerous instances where I would have done just a single tag and Tabler has two or three of them nested.
- Some similar components are implemented in way different ways. Compare .status-indicator which takes color as a dedicated class (`.status-green`, for example) and .badge, which uses background-color helpers (e. g. `.bg-green`).
- Secondary buttons are .btn without additional class, unlike .btn.btn-secondary in Bootstrap (which Tabler is based on). If you add .btn-secondary, you'll get a weird out-of-style button. Things get more difficult when you use a Bootstrap-based library for some interactive elements (I'm using Sveltestrap) and it adds .btn-secondary by default.
- Some layout bugs get introduced and fixed, nothing you can't patch out though. Hope it will get better as it matures.
Overall it's neat though, and for prototyping things quickly I'd say it's the best you can get now.
Tailwind's approach is really great. A base of low level CSS building blocks, and a higher level component library where you basically just copy and paste the code with the CSS, and it really is just all HTML and CSS. I'm a big fan.
I think what might work for me is if somebody reimplemented Semantic UI using Tailwind.
Didn’t Elastic change licenses for all it’s products and libraries such that they are not really useable for commercial SaaS products?
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."
"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.
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.
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.
React only, unfortunately.
The title should really be "React Component library..."
The title should really be "React Component library..."
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
> The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics
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)
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)
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.
Excellent, I see now. Thanks!
Interesting that it's using react-window under the hood.
-- https://react-window.vercel.app/#/api/VariableSizeGrid
Interesting that it's using react-window under the hood.
-- https://react-window.vercel.app/#/api/VariableSizeGrid
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.
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.
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.
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.
Mantine is fantastic: https://mantine.dev/
one more vote for mantine, such a fantastic, dynamic and constantly updated UI library
Shoelace is very high quality: https://shoelace.style/
For somebody who dislikes frameworks in general, this one looks great.
PatternFly by Red Hat is good for dashboards and administration use cases.
https://www.patternfly.org
https://www.patternfly.org
False. The best UI library are those where you can build solid, readable and long-lasting terminal UI's - so nothing on the web.
https://cloudscape.design surprisingly practical
I'm interested to hear what makes this out stand out as being among the best?
How is this better than bootstrap?
The license is a non starter.