UnoUI Preset

UnoCSS Toolkit.

UnoUI (UnifyUI-Preset)

UnoUI Preset is a collection of UnoCSS Presets.

Not : This project is a WIP, you can test it and report bug... Your contribution is much valualed for us, help us to make it better.

Preset UI

Preset UI stands at the forefront of UI customization, offering a comprehensive theming library designed to empower developers and designers alike. At its core, preset-ui leverages the power and flexibility of UnoCSS and provides a variety of themes that can be easily customized to match your brand and style.

Read more here

Install Preset UI

1npm i -D @unifydev/preset-ui
2# or
3yarn add @unifydev/preset-ui -D
4# or
5pnpm add @unifydev/preset-ui -D

UnifyVariant

This is a preset package that provides variants for Components Libraries based on data-state attribute value, and help to create custom variant selector.

Know more here

Config

in your uno.config.(ts|js)

1
2import {
3  defineConfig, presetAttributify, presetWind3,
4} from "unocss";
5
6import { colors } from "@unocss/preset-mini/colors";
7
8// import the preset
9import {presetUI} from "@unifydev/preset-ui"
10
11
12export default defineConfig({
13  presets: [
14    presetWind3({dark: "class"}),
15    presetAttributify(), // optional
16    presetUI({}),
17  ],
18});
19

Use PresetUI

1<div class="space-y-6">
2  <h1 class="text-xl font-semibold ui-title">
3      Badges
4  </h1>
5  <div class="p6 flex flex-wrap gap4 rd-lg bdr-gray">
6      <span class="badge-md ui-solid ui-solid-gray rd-sm">
7          badge
8      </span>
9      <span un-badge="md" ui-solid="~ gray" rd-sm>
10          badge
11      </span>
12  </div>
13</div>

Contributing

If you're interested in contributing to Uno-UI, please read our contributing docs before submitting a pull request.

Join Our Community 🌍

Contribute, collaborate, and become a part of our mission 🚀

• Discord Community

Acknowledgments 🌟

• Antfu
• UnoCSS
• Phojie Rengel - Una UI

Support Us

If you like this project and want to support us, feel free to get in touch with one of maintainers :

• Johnkat MJ