Today I want to share with you a UI framework Una UI, which is an atomic user interface framework powered by the UNOCSS engine that provides components and presets to easily create stunning user interfaces.
It was created by @phojiee, and the project is currently in a rapid iteration phase, with a Github star trending as shown below:
Design principles
Following the UNOCSS design principles, atomicity is at the core of Una UI. This means that the framework only generates CSS for used utilities, ensuring speed and efficiency in projects of any size.
Key features
⚡️ 1) Atomic Framework:
Developers can configure it on demand and use it as they wish.
⚡️ 2) Customizable:
Developers can easily personalize application aesthetics using components, presets and custom styles.
⚡️ 3) Fully Typed:
The comprehensive type definitions of Una UI components ensure seamless integration with TypeScript and type-safe languages.
⚡️ 4) Theming System:
The framework provides a theming system that facilitates changing the appearance through components, presets and styles.
⚡️ 5) Automatic Dark Mode:
Una UI includes an automatic dark mode for all components.
Getting Started Quickly
For Nuxt.js projects, you can use the Una UI starter template to get your project started.
1.Install
npm i @una-ui/nuxt2.Update Nuxt.config.js
export default {
modules: [
'@una-ui/nuxt',
],
una: {
prefix: 'U', // UBtn, UInput, UFormGroup, etc.
// please refer to the configuration for more options
},
}3.The following is the recommended configuration for a better IDE experience
import { defineConfig } from 'unocss'
import config from '@una-ui/nuxt/una.config'
export default defineConfig({
... .config, // unocss config here
// unocss config here
})Currently, Una UI only supports Nuxt.js. However, you can create your own components using the preset mode installation.
Feel free to try it out, and for more details you can refer to the official documentation: https://unaui.com/getting-started.
