Has anyone implemented a UI kit made for desktops?...

# compose-desktop

[pavi2410]

Has anyone implemented a UI kit made for desktops? Material design seems unusable on desktops, while it works great for mobile

[pavi2410]

I know there's Aurora and that's classy. But I am looking for modern UIs that resembles Windows/macOS UI

[David W]

"unusable"?

[Casey Brooks]

Material works great for Desktops, the whole MD documentation includes specs and best practices for both mobile- and desktop-sized screens. In my experience, MD works better on desktop with a more custom "scaffold" and using MD for individual widgets, rather than full-screen navigation, toolbars, and such, and in general is much less opinionated because there is so much more screen real estate to work with. Compared to other Electron apps which also stray widely from "native" UI toolkits, I personally don't think Material on CfD feels out-of-place at all.

That said, as you mentioned Aurora is certainly one option, and there are a handful of other themes I've seen, though I haven't personally used any of them to know how well they work in practice.

• https://github.com/Chozzle/compose-macos-theme
• https://github.com/ButterCam/compose-jetbrains-theme?ref=androidexample365.com

[Casey Brooks]

But here's a screenshot of the app I'm building, leveraging as much of the MD widgets as I can within a custom desktop layout, to give you an idea of what can be done with it

[Kirill Grouchnikov]

I've been marinating in the world of Swing for about 17 years now, and one thing that I will say for certain is that trying to achieve native fidelity (not even the feel, but just the look of widgets) is a herculean task that requires constant work.

Swing engineers tried to do that at some point by delegating all the rendering to native APIs. That worked to some extent. But not the animations - since these controls were not native ones. And over the years the gap between the visuals of Swing controls under that cobbled-together house of cards and the real native controls keeps on growing larger and larger, as Microsoft keeps on tweaking and changing what native look and feel is.

The same goes for macOS - every release changes things for individual controls, as well as the overall structure of the window and the content in it. Even if somehow you managed to get aligned with the absolute latest macOS visuals (including light/dark and accent automatically respecting the user setting), if you don't do a window layout that matches the platform guidelines, you're still off.

And again, every year, every major platform changes things. So whoever it is that provides that UI kit, needs to make a hard decision. Do they follow the latest native look and keep on switching to the latest native APIs (effectively abandoning the older versions of those platforms), or do they create a monstrosity of backwards compatibility, that eventually requires so much testing and handholding, that it collapses under its own weight.

And of course, the moment that person / organization stop maintaining that library is the moment is simply stops working on new versions of those major desktop OSes. That's a hard guarantee.

If anything, the beautiful thing about the web expansion in the last 6-8 years is that it has shown that the end users simply do not care about native fidelity en masse. Sure, there is a small, dedicated, vocal cohort of die-hard aficionados that are willing to die on that hill, but the 99.9999% of users do not care. They want to get their thing done, and move on.

[David W]

great post, kirill.
focusing on having a UI that works like a normal desktop app, rather than a phone app, is a separate-but-related and far more important task

[pavi2410]

My concern wasn't about native vs custom UI. Rather, it was about desktop-centric UI. Material 3 solves it to an extent for large screens but I see that's still in progress. Hence why I'm looking for a desktop UI kit to use in the meantime.

[Kirill Grouchnikov]

Can you be a bit more specific about the resembling Windows / macOS part? What exactly is it that you're looking for?

[pavi2410]

As Windows/macOS are desktop OSes, I meant a UI that looks familiar to desktop users.

[pavi2410]

Initially, I settled for this kind of UI with Material 3, but I can't use it until it's implemented and it's too much for me to implement it myself.

https://m3.material.io/foundations/adaptive-design/large-screens/overview

[Kirill Grouchnikov]

What is missing for you in this screenshot? Some sort of a scaffold that will provide slots for individual panels? Multi pane layout in general? Some sort of a container that moves between different layouts depending on the available space as you resize the window?

[Michael Paus]

An issue where I currently see little centralised support for is whether the GUI is primarily operated via mouse input or finger input.

[pavi2410]

Nothing missing per se, but it's better to use a standard set of well designed and tested components that adhere to the guidelines.

[pavi2410]

I was able to replicate the design but it needs more work than official components

[Casey Brooks]

I don't think that's something that the Material, or any desktop library, should concern itself with. Because there's so much more space to work with, and so many ways that a desktop UI could be laid out, it doesn't make sense to create scaffolds for all possible combinations of layouts. Even in Web, where layout is generally more standardized, full-screen scaffolded layouts don't really exist; you just have complete CSS/HTML templates which you then break apart to your needs, or component libraries with grid systems. That's what Compose Material is too, a component library and a grid system. And consider that desktop apps are even less standardized than websites, so it makes sense to lean even more heavily into that.

It's the classic problem of "inheritance" vs "composition", with composition generally being more flexible, easier to understand, and easier to maintain. A scaffold "inherits" the layout and slots, while you override the specific content. But even on Material mobile, which does have a Scaffold composable, it's pretty huge and kinda unwieldy to work with, and in many cases is easier to just construct the layout yourself from the individual components.

[Kirill Grouchnikov]

All the individual pieces that you need to create that screen are already there. Agree with Casey - if you're expecting a full set of "desktop" templates, that is not something that I would count on.

[Chris Sinco [G]]

Nothing missing per se, but it’s better to use a standard set of well designed and tested components that adhere to the guidelines.

True, but to others’ points, the guidelines to adhere to vary a lot between just Windows and Mac. So it’s more tenable in the long run to use a design system that isn’t so native to the host OS. But if native look and feel is really important, I think CfD may not be the right approach for you.

[Kebbin]

Yes, thanks for starting this discussion mate! I've learned a lot.
I too wonder if there might be another tool to create more native programs that might be worth a try?
I'm just a beginner, and I see your point about the lack of absolute native likeness, but I really love the ability to freely create desktop programs that are easy to build and use, while still resembling a professional program! 😎
Good luck with your project, and let us know what you end up deciding! 👍

[gildor]

I too wonder if there might be another tool to create more native programs that might be worth a try

Use native UI frameworks for corresponding OS?
I think it’s the only way to provide real native feel and follow guidelines on this OS