Hello everyone! Inspired by LibAdwaita, I have been developing a set of components and css-shortcuts for my hybrid web projects, particularly for creating GUI clients using Electron and Tauri. I've now packaged everything with documentation into a compact framework based on Sass and React. I decided to share it because there might be others interested in writing GNOME-like applications with a web stack and a set of flexible components.

You can view an online demo application on desktop or your smartphone at the project's documentation site: https://mielo-ui.github.io For those who simply want to see how it looks, there is a screencast video available: https://vimeo.com/1007756101

The goal of the framework is to provide a flexible and compact set of tools and conventions based on CSS variables, allowing for easy customization of various display options, including colors, sizes, and additional display properties. You can easily choose a color palette or create a function to assign colors as you wish. You can manage the size of the CSS bundle by trimming the color scheme and other options, and work with all parameters in a declarative style using Sass.

The framework includes 25 basic components and containers, styled by default in both dark and light themes, along with a set of сss-shortcuts applicable to any component: size, accent color, padding, margin, border-radius, and shadows. For containers, сss-shortcuts for working with flexbox are also available. With this system of additional universal states, it’s easy to manage app styling by, for example, adding different properties for proportions, sizes, and rounding depending on the OS style that the application is being developed for.

The components and styling are close to Gtk4/LibAdwaita, but not identical - some components have different sizes and color grids.

For Linux, the documentation is also packaged as a hybrid desktop application using Tauri and Electron, which can be downloaded from the releases page: https://github.com/mielo-ui/docs/releases

Source code: In the GitHub organization created for this project: https://github.com/mielo-ui SASS framework: https://github.com/mielo-ui/mielo.css React components: https://github.com/mielo-ui/mielo-react Documentation: https://github.com/mielo-ui/docs

In the future, I plan to further develop the framework by refining colors and spacing conventions, with upcoming plans to add media handling shortcuts and simplify mobile application development. I also aim to create a Theme and Widget Builder application for experimenting with component designs. Additionally, I'm also actively experimenting with animations for next release.

Show HN: Mielo UI – flexible components framework based react/sass/CSS