August 15, 2023·Tauri
The 7 Best Tauri UI Libraries
We recommend the best UI libraries for Tauri apps that will give your app a modern and native look
Antd
Kicking off our compilation, we have Antd. Antd is a UI library that excels in creating dashboards and feature-rich UIs. It does, however, present a limitation - the components lack a truly native appearance and feel, and it's not the right fit if you're not utilizing React.
On a more positive note, if these issues don't concern you, Antd could be the ideal selection for you. Version 5 has a contemporary, visually appealing default theme, but if it doesn't align with your preferences, Antd provides extensive customization options. This versatility helps Antd as a superb choice if your application needs varying themes based on the user's operating system, all unified by a great and modern UI. This is the approach we follow at Nucleus.
BlueprintJS
Following that, we suggest exploring BlueprintJS. This React-driven UI toolkit is notable for its flexibility across any JavaScript-based application. Maintained by Palantir, it features a unique Windows-like UI ambiance, positioning it as a respectable option if you desire your app to exhibit a uniform and classic Windows flair. However, it may fall short if you're aiming for a more contemporary UI appearance.
Chakra UI
Chakra UI is a super simple, modular and accesible component library that helps apps look nice. One of the things that make Chakra unique is their focus on accessibility, it strictly follows WAI-ARIA standards for all components.
It’s made for React. If you're looking for something that's not too hard to use and gives your app a clean and modern look, Chakra UI might be a good choice for you.
Xel
Xel isn't a UI library in the conventional sense; rather, it provides an assortment of components for constructing Tauri and web applications that resemble classic desktop apps. Actually, Xel was designed specifically for Electron, but one of the advantages of Tauri relative to Electron is that you can use anything that works in Electron in the front-end.
Xel distinguishes itself through its utilization of straightforward JS, HTML, and CSS, eliminating the need to incorporate an entire framework solely for the UI library. This feature renders Xel an attractive option if you're developing a relatively uncomplicated desktop application and you're fond of the retro appearance of desktops.
Material UI
Material UI, a design system that Google shares for free, is still a good choice. If you want something you can just trust, Material UI is a strong option.
Most tools that use JavaScript, like React and Vue, let you use Material Design. This means you can use parts that are already made and follow this design style. These parts usually let you change the look, so you can make it fit better with a certain computer system, like making the macOS theme more rounded.
Fluent 2
Worth our attention is Fluent 2, Microsoft's design system. They've successfully launched their design system not merely as a UI kit for Figma but also as ready-to-implement React components for various projects.
Fluent 2 serves as a suitable option if you're in search of a Tauri UI library to give your application the appearance of being crafted for Windows 11. It maintains remarkable consistency, offers an abundance of components, and ensures accessibility, aligning with the majority of WCAG standards. However, it does present a learning challenge and may not be the optimal selection if your user base is expected to originate from different operating systems.
Special mention: Tailwind CSS
Finally, we want to give a special shout-out to Tailwind CSS. Even though it's not exactly a UI library, we find Tailwind CSS really helpful in our work. We use it to write CSS faster and as a basic design system. If you're not a big company with a lot of design experience, making a design system from the ground up might not be a good idea. Plus, Tailwindcss often works better than other design systems we've tried.
What's great about Tailwind CSS is that it works well with UI libraries. You can use a UI library AND Tailwind CSS for things like layout, size, text, and colors. You just have to make sure that Tailwind CSS basic styles don't mess with the UI library by turning off preflight (Tailwind’s basic styles). Mixing Tailwind CSS with a UI library can help you make nice-looking and fast-working apps in no time.
But your work isn't done after you've set up your UI. You need to watch how people use your app and fix any problems that come up on different computers and situations. That's why we made Astrolytics, a an analytics tool to help you see how people use your app and find mistakes, especially for desktop apps built with Electron. We give you a piece you can add to your app, and we have ready-to-use screens with everything you need to keep an eye on your users.
