The 5 best CSS UI libraries for your Electron app

February 02, 2021

Photon

Photon

Photon was specifically designed for Electron. It includes a set of basic UI components that mimics MacOS components to make it look as native as possible.

You will be able to do menus, tables, text boxes, and more with a native feel.

Unfortunately, while very promising for the Electron community, it hasn’t been updated for the past years and isn’t a trustworthy option for a project in 2021.

This fork looks more maintained.

Framework7

Framework7

Framework7 is a CSS framework with bindings for React, Vue, Svelte and native Javascript that give you a lot of UI components with a native UI feel.

Originally targeting Android and iOS, they now have a desktop macOS theme.

The desktop theme appears quite new but promising, and is a good step toward making your app looks more native, at least on Mac.

There are also a bunch of plugins available for extending the functionalities.

Check out the components to see if it can work for your usecase.

Antd (React only)

Antd

Antd is arguably the best React UI library.

It has components for everything that are beautiful, powerful, and easy to use. The components often includes little UX details that your users will love.

Antd is perfect for dashboards and feature-full UIs.

It is very well maintained (by the Ant Group which is Alibaba) and from my experience it is quite stable in general.

The default theme can be customized to your needs with a .less file.

The downside is that the components don’t look very native and you’re out of luck if you don’t use React.

Although Antd is perfect for SaaS and web apps, it can also definitely be cool for desktop apps.

Semantic UI

Semantic UI

Another very complete React UI library that can be useful for your desktop web app, Semantic UI, just like Antd is very complete and customizable.

Check out the components list and compare it with Antd to see which one is more fitted for you.

Bootstrap

Bootstrap

The one-and-only original UI library, Bootstrap is very flexible, compatible with any framework, and a very high-level UI library.

Bootstrap is great for basic components and setting up the layout with CSS. However, it will fall short if you’re looking for more exotic components like a timeline, ajax table, etc..

That being said, Bootstrap being one the oldest players, you should be able to find plugins for practically every other components.

However, you should still apply some custom styling so your app doesn’t look like every Bootstrap website out there.

Conclusion

Those are just a few of the most popular UI libraries among the hundreds available for you.

When selecting a UI framework, we recommend using one that is under active maintenance, widely used and that gives you the flexibility to customize it to give your app an original feel.

Do you have a minute?

Nucleus provides analytics and bug-tracking for your desktop apps so you can follow and understand your users.

Live Demo →

No sign up required.