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.
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 thebtn
prop is not just a prop but a utility class also, sobtn="solid"
is equivalent toclass="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 likesecondary
,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 thatblock
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.
Credits
Inspirations
Contributions and Feedback
Your interest in Una UI is highly appreciated! For suggestions, bug reports, and contributions, please consult the Contributing Guidelines.
Let's collaboratively craft remarkable user interfaces with Una UI.