1. Docs
  2. UnoCSS

Flexilla UnoCSS

Style Flexilla components in UnoCSS using state variants and helper utilities.

If your project already uses UnoCSS, Flexilla integrates nicely with state-based utility classes.
In the docs site, this integration is provided by @unifydev/flexilla, which exposes a Flexilla preset for UnoCSS.

What the preset gives you

The preset helps you style Flexilla components with:
  • fx-* state variants such as fx-open: and fx-active:
  • helper utilities such as ui-popper and ui-overlay
  • shorter, more readable classes than raw attribute selectors
Instead of writing: 
<div class="data-[state=open]:opacity-100"></div>
you can write: 
<div class="fx-open:opacity-100"></div>

Installation 

npm i -D @unifydev/flexilla unocss

Basic setup 

import { defineConfig, presetAttributify, presetMini, presetWind3 } from "unocss";
import { flexillaPreset } from "@unifydev/flexilla";

export default defineConfig({
  presets: [
    presetWind3(),
    presetAttributify(),
    presetMini(),
    flexillaPreset({}),
  ],
});
If you want a different state prefix, pass options to the preset. 
import { defineConfig } from "unocss";
import { flexillaPreset } from "@unifydev/flexilla";

export default defineConfig({
  presets: [
    flexillaPreset({ prefix: "fx" }),
  ],
});

Common variants

The most common state variants are:
  • fx-open
  • fx-close
  • fx-opened
  • fx-closed
  • fx-visible
  • fx-hidden
  • fx-active
  • fx-inactive
  • fx-resized
You can also combine them with normal UnoCSS utilities. 
<div class="opacity-0 invisible fx-open:opacity-100 fx-open:visible">
  Popover content
</div>

Group and peer usage

State variants become more useful when you style related elements. 
<button class="group" aria-expanded="true">
  <span class="group-fx-active:text-zinc-950">Label</span>
</button>
<div class="peer" data-state="open"></div>
<div class="peer-fx-open:block hidden">Shown when the peer is open</div>

Helper utilities

The preset also includes reusable helpers for common Flexilla patterns.

ui-popper

Use this on popovers, dropdowns, and tooltips that rely on Flexilla positioning. 
<div id="myDropdown" class="ui-popper z-30 rounded-xl border border-zinc-200 bg-white p-4 shadow-lg">
  Dropdown content
</div>
This applies: 
position: fixed;
top: var(--fx-popper-placement-y);
left: var(--fx-popper-placement-x);

ui-overlay

Use this for modal and offcanvas overlays. 
<div data-modal-overlay class="ui-overlay bg-black/50 backdrop-blur-sm"></div>

ui-animated-modal-content

Use this when your modal content relies on --un-modal-animation. 
<div data-modal-content class="ui-animated-modal-content rounded-2xl bg-white p-6 shadow-2xl">
  Modal content
</div>

ui-animated-tab-panel

Use this for tab panel transitions driven by --un-tab-show-animation. 
<div data-tab-panel class="ui-animated-tab-panel">
  Panel content
</div>

ui-tabs-indicator

Use this for custom animated tab indicators. 
<div class="relative">
  <div class="ui-tabs-indicator rounded-full bg-zinc-900"></div>
</div>

Real example

Here is a simple dropdown content block styled with UnoCSS: 
<button data-dropdown-trigger data-dropdown-id="docs-menu" class="rounded-lg border border-zinc-300 px-4 py-2">
  Open menu
</button>

<div
  id="docs-menu"
  class="ui-popper invisible z-40 min-w-56 rounded-xl border border-zinc-200 bg-white p-3 opacity-0 shadow-xl transition fx-open:visible fx-open:opacity-100"
>
  <a href="#" class="block rounded-md px-3 py-2 hover:bg-zinc-100">Profile</a>
  <a href="#" class="block rounded-md px-3 py-2 hover:bg-zinc-100">Settings</a>
</div>

When to use UnoCSS vs plain CSS

  • Use UnoCSS if your project already relies on utility classes.
  • Use plain CSS if you want the simplest dependency story.
  • Use either approach consistently across the project so state styling stays easy to reason about.

Next step

Once your UnoCSS setup is ready, go to a component page and copy its required markup structure first, then style its states with fx-* variants.