July 12, 2023·Electron
Best Electron App UI Libraries (2023)
We compare the best UI libraries for Electron apps and give a special mention for a CSS UI kit that can be mixed with your existing UI library.
Fluent 2
Starting our list, we would like to highlight Fluent 2, the design system by Microsoft. They’ve done an excellent job by publishing their design system not just as a UI kit for Figma, but also as ready-to-use React components for your projects.
Fluent 2 is a good choice if you’re looking for an Electron UI library to make your Electron app look like it was made for Windows 11. It is very consistent, has a ton of components and takes care of accesibility, meeting most WCAG standards. But it doees come with a learning curve, and might not be the best choice if you’re userbase is going to come from other operating systems.
BlueprintJS
Next, we recommend taking a look at BlueprintJS. This React-based UI toolkit stands out for its adaptability to any JavaScript based application. It's maintained by Palantir and comes with a distinct Windows-like UI feel, making it a decent choice if you want your app to feel consistent and have a retro Windows style, though it might not be the best choice if you’re looking for a more modern UI.
Xel
Xel isn't a UI library in the traditional sense; instead, it offers a collection of components for building Electron and web apps that look and feel like traditional desktop apps. Xel stands apart with its use of plain JS, HTML, and CSS, meaning you won't need to bundle a whole framework just for the UI library. This characteristic makes Xel a desirable choice if you’re building a relatively simple desktop app and you’re feeling nostalgic about how desktop used to look.
Antd (React only)
Also deserving a mention, from our previous blog, is Antd. Antd is a UI library that proves ideal for crafting dashboards and feature-full UIs. However, it does come with a caveat - the components don't have a very native look and feel, and it's not suitable if you're not using React.
On the brighter side, if these aren't concerns for you, Antd might just be your perfect choice. Version 5 boasts a modern, aesthetically pleasing default theme, but if it's not to your taste, Antd offers a high level of customization. This adaptability makes Antd an excellent choice if your app requires different themes depending on the user's operating system, all having in common a beautiful modern UI. This is what we use at Astrolytics.
Material UI
Material UI, Google's open-source design system, also continues to be a reliable choice. If you're looking for a safer option, Material UI is a strong contender.
Most JS frameworks, such as React and Vue, provide implementations of Material Design. You can leverage these ready-made components that adhere to this design specification. These libraries usually support custom themes, allowing you to adjust the design to better suit a specific operating system, e.g making macOS theme more rounded.
Bonus mention: Tailwind CSS
Lastly, we'd like a bonus mention: Tailwind CSS. Though not a UI library per se, Tailwind CSS has become an indispensable part of our projects. We leverage Tailwind CSS as a faster method of writing CSS for Electron and as a foundational design system. Unless you're a well-established product with a seasoned design team, spending time crafting a design system from scratch might not be the best decision. Moreover, Tailwindcss often outperforms other design systems we've encountered.
One of the key advantages of Tailwind CSS is that it complements UI libraries well. You can use a UI library AND Tailwind CSS for elements like layout, sizing, text, and even colors. You just need to ensure that tailwind's base styles do not conflict with those of the UI library by disabling preflight (Tailwind’s base styles). The mix of Tailwind CSS with a UI library can empower you to build efficient and aesthetically pleasing applications in record time.
The job doesn’t end after you’ve implemented your UI, you need to closely monitor how your users are using your app and adjust any UX/UI issues that may arise in different operating systems and circumstances. That’s why we built Nucleus, an analytics and error reporting platform specially designed for desktop apps built with Electron. We provide an sdk that you can integrate into your app and we provide ready-made dashboards with everything you need to monitor your users.
