What is Una UI?

Una UI is an atomic UI Framework powered by the UNOCSS engine. It provides components and presets for creating stunning user interfaces with ease.

This documentation is a work in progress. The package is not officially released yet, so some sections might be incomplete or missing until the first release. We're actively working to complete the documentation.

Motivation

Over the years, I've delved into numerous projects, consistently relying on UI frameworks for my application front-ends. My exploration encompassed options like Vuetify, NaiveUI, and other similar frameworks, yet none truly met my expectations. Customization often proved cumbersome, given their rigid design, not to mention the bloated CSS bundles even when utilizing a handful of components.

Then emerged game-changers like TailwindCSS, UnoCSS came along. These frameworks have indeed satisfied me, except there was a big thing missing: they don't have any built-in components that is easily customizable accross to all of my projects, which means everytime I start a new project, I have to build the same components over and over again, this drove me to create Una UI.

Una UI brings together the best of both worlds of UI frameworks and CSS frameworks offers more customization, more flexibility, more power without sacrificing css bundled size and performance whether in local development or production, small or large projects.

Design Principles

Following UNOCSS design principles, being atomic is the core of Una UI. It means that the framework generates CSS only for used utilities, ensuring speed and efficiency in any project size.

For example, the Una UI provides different button variants, such as solid, outline, link, soft and more. A typical framework would generate CSS for all variants, even if you only use one for the entire project. Una UI, on the other hand, generates CSS only for the used variant even if multiple variants are configured.

Heres an example of button - vs. typical framework:

<XButton variant="solid">
  Solid Button
</XButton>

Unlike other frameworks Una UI get advantage of UNOCSS shortcuts feature to generate CSS for the solid variant and used attributify feature to act as the prop to the component to make it more customizable while keeping it readable and clean. In short the btn prop is not just a prop but a utility class also, so btn="solid" is equivalent to class="btn-solid" in UNOCSS.

Heres another example of button with variant, color, and block vs. typical framework:

<XButton variant="solid" color="orange" block>
  Solid Button
</XButton>

Notice we used orange color, but most frameworks offers limited colors like secondary, accent, danger, and other fix colors across the projects so you have to configure it your own. However, Una UI provides all tailwindcss colors with auto dark mode support. And yes we do not need other colors but the thing is, a typical framework generates CSS for all colors even if you only use one color across the project, while Una UI generates CSS only for the used color but still offers all colors.

Notice the simplicity of adding options like block in Una UI compared to other framework that requires additional attributes, and note that block css is only generated if you used it, the same goes for other utilities and options.

Features

Atomic Framework: Configure what you need, and use when you need it.
Customizable: Developers easily personalize application aesthetics using components, presets, and custom styles.
Fully Typed: Comprehensive type definitions for Una UI components ensure seamless integration with TypeScript and type-safe languages.
Theming System: The framework offers a theming system that facilitates appearance changes via components, presets, and styles.
Auto Dark Mode: Una UI includes automatic dark mode in all components.

Edit this page on GitHub

Una UI - The Atomic UI Framework

Getting StartedInstallation

What is Una UI?

Motivation

Design Principles

Features

Credits

Inspirations

Contributions and Feedback