Native looking UI components for Electron application

Question

I'm using Electron (formerly Atom Shell) for a desktop application. It is a lot of fun to use and event-driven programming has its merits.

I've got all HTML, CSS & JS power at my hands because it uses one of the more recent Chromium builds. I'd like to use UI elements which look similar to the native ones (from OS X in my case).

Is there a UI library imitating the look and functionality of the native UI elements or other ones which fit nicely into such a desktop application?

Solution 1

After searching around the web a bit I found a bootstrap theme called Maverix. I don't think it matches OSX perfectly, but it looks pretty darn close. It is open source under MIT so you should be able to bend it to your will. After scanning through there demo page it even calls out Electron (Atom-Shell) as a good use case:

It is perfect to be used for apps that are based on HTML App Containers such as: MacGap Node-Webkit Github Atom Shell Adobe Brackets Shell

This seems like it would do exactly what you are looking for.

Solution 2

Photon is a recent project but it is probably what you want. For the moment the UI is only like OSX.

UI toolkit for building desktop apps with Electron.

Link: http://photonkit.com/

Solution 3

Another option, although it seems pretty young, would be React Desktop. For now it has partial support for OS X El Capitan and Windows 10, but hopefully the number of components available and systems supported will grow.

This library has been created to bring a native desktop experience to the web. It works extremely well with tools such as node-webkit or Electron.js!

Solution 4

https://xel-toolkit.org

Other answers provide one frame and some components, Xel provide more components. Xel build on Web Components, is framework-agnostic.

View more solutions

Comments

[Hedge]

This is one of those questions which exposes on of SO's weaknesses. Both answers supplied are good and valid but I can only mark one as the correct one. I'm going with Shawn here because he was a little bit faster and I would like to encourage him to keep on answering here. Sorry Fab.

[Fraser]

@Hedge - "Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it."

[George Hawkins]

Unfortunately, development on Photon seems to have trailed off in 2016 with a single lonely commit in 2017.

[Jack]

That sounds good but I wish was the windows regular UI not that one used in WPF...