UnoCSS Toolkit.

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 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

npm i -D @unifydev/preset-ui
# or
yarn add @unifydev/preset-ui -D
# or
pnpm add @unifydev/preset-ui -D

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

in your uno.config.(ts|js)

import {
  defineConfig, presetAttributify, presetWind3,
} from "unocss";

import { colors } from "@unocss/preset-mini/colors";

// import the preset
import {presetUI} from "@unifydev/preset-ui"


export default defineConfig({
  presets: [
    presetWind3({dark: "class"}),
    presetAttributify(), // optional
    presetUI({}),
  ],
});

<div class="space-y-6">
  <h1 class="text-xl font-semibold ui-title">
      Badges
  </h1>
  <div class="p6 flex flex-wrap gap4 rd-lg bdr-gray">
      <span class="badge-md ui-solid ui-solid-gray rd-sm">
          badge
      </span>
      <span un-badge="md" ui-solid="~ gray" rd-sm>
          badge
      </span>
  </div>
</div>

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

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

• Discord Community

• Antfu
• UnoCSS
• Phojie Rengel - Una UI

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

• Johnkat MJ