UnifyUI Preset

UnoCSS Theming Toolkit.

UnifyUI-Preset (Atomic, Theming UI Libray)

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

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.

Concepts 🧠

• 🖌️ Component-Level Theming: Customize each component independently, allowing for detailed personalization while maintaining overall harmony.

• 🎯 Atomic Library: Following UNOCSS design principles, Unify Preset adopts an atomic approach . It generates CSS only for the utilities you use, optimizing both speed and efficiency.

Features

• Atomic Library by Nature: Configure what you need, and use when you need it.

• 🛠️ Customizable: Tailor each component to fit your vision, ensuring a unique and cohesive look across your application.

• 📈 Efficient Scaling: Our atomic library ensures your project remains lightweight and fast, no matter its size.

• 🎨 Consistent Yet Flexible: Achieve a consistent look and feel without sacrificing the creativity and uniqueness of individual components.

• Dark Mode Support : Automatic Dark mode support

• Freedom on Appearance: Customize your styles to match your preferences. Whether you prefer only dark style, light and dark styles, or only light styles, Unify Preset accommodates your needs. The generated CSS will contain only what you decide to have.

Usage

Installation

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

Install also @julr/unocss-preset-forms in case you'll form controls.

1npm i -D @julr/unocss-preset-forms

Config

in your uno.config.(ts|js)

1
2import {
3  defineConfig, presetAttributify, presetUno, presetMini,
4} from "unocss";
5
6import { colors } from "@unocss/preset-mini/colors";
7
8import { presetForms } from "@julr/unocss-preset-forms";
9// import the preset
10import {unifyUI} from "@unifydev/unify-preset"
11
12
13export default defineConfig({
14  theme: {
15    colors: {
16      inherit: colors.inherit,
17      current: colors.current,
18      transparent: colors.transparent,
19      primary: colors.indigo,
20      // add other colors for : success, danger, info, ....
21      black: colors.black,
22      white: colors.white,
23    },
24  },
25  presets: [
26    presetUno(),
27    presetAttributify(),
28    unifyUI({}),
29    presetForms({
30      strategy: "base", // Only add preflights and not new rules
31    }),
32    presetMini({
33      dark: "class", //  
34    }),
35    
36  ],
37});
38

Use it

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 badge-solid">
7          badge
8      </span>
9      <span un-badge="md solig" rd-sm>
10          badge
11      </span>
12      <span class="badge-md badge-solid rd-md">
13          badge
14      </span>
15      <span class="badge-md badge-solid rd-lg">
16          badge
17      </span>
18      <span class="badge-md badge-solid rd-xl">
19          badge
20      </span>
21      <span class="badge-md badge-solid rd-full">
22          badge
23      </span>
24  </div>
25</div>

Contributing

If you're interested in contributing to Unify-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