Let me introduce fronnt UI – yet another open source UI web component library 🙃 but following a more back-to-the-roots approach.

fronnt UI is a design system + component library + icon set for building modern web frontends – focusing on eCommerce.

Why

I know, there is already a plethora of UI component libraries out there and some of them are great. However, we realized over the course of many projects during the last few years, that approaches like Tailwind CSS have been gaining popularity due to the simplicity of use.

While it's easy to get a quite nice result in a short period of time, maintainability becomes more challenging in large projects. We have a strong believe in the separation of concerns principle. That's why we follow a more back-to-the-roots approach with plain CSS (following the BEM methodology) and being dependency free during runtime.

No dependencies

Apart from the frontend framework (Vue.js, React, Svelte), fronnt UI has no external dependencies so far, and we try to keep it that way.

Staying dependency-free increases maintainability because there are less breaking changes, which must be taken care of.
The risk of conflicting versions during runtime is also almost non-existent.

Building blocks

The base of fronnt UI consists of several parts, which are all open source and free to use in personal and commercial projects.

Design System

The fronnt UI design system is the foundation of the library. It defines things like colors, typography, spacing, shadows.
It tries to provide a frame that can be extended for different brands. Most things can be customized using CSS variables.

Icons

fronnt UI comes with a set of carefully designed and constructed SVG icons and the list is constantly growing.

Styles

Styles are built using vanilla CSS, strictly following the BEM methodology. In such, they are compiled to plain CSS files, which can easily be integrated in every toolchain. Better yet, they don't have any dependencies or build steps or frameworks.

This makes it straightforward to implement ports for other UI frameworks like React, Svelte, Angular, you name it...

Components

The components are solely responsible for generating HTML markup and implementing interactivity. No styles are bundled!

Frameworks

At the time of this writing, fronnt UI is available for Vue 3 only. Although versions for React and Svelte are planning, there's no release date yet.

Releases

fronnt UI is still in pre-release stage, while we iron out the last known small issues. We plan to release the first final version soon. Feel free to sign up for our newsletter and be among the first to notified about new fronnt UI components, features and releases! → Stay tuned!

Feedback and contribute

If you want to contribute, drop us a line at hello@fronntui.pro and we'll reach out to you to discuss different possibilities.

We're happy about any feedback and contribution! Let me know your thoughts 🙂

fronntui.pro | Github | inniti.de