getting-started
Usage
Master FlyonUI with component and modifier classes for easy customization and dynamic UI updates.
After installing FlyonUI, you use its component classes, such as btn and card, to your HTML elements effortlessly.
- Instead of manually constructing a button with multiple utility classes:
<button
class="inline-block cursor-pointer rounded-md bg-blue-500 px-4 py-3 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-blue-600"
>
Button
</button>
- You can simply use a FlyonUI component class:
<button class="btn">Button</button>
- Further customization is easy using FlyonUI utility classes:
<button class="btn btn-primary">Button</button>
- For even more flexibility, combine FlyonUI with Tailwind CSS utilities:
<button class="btn rounded-full">Button</button>
FlyonUI also provides modifier classes that allow dynamic component changes based on specific events.
In this example, the collapse-open: modifier changes the button’s text and rotates the icon when the collapsible section opens or closes.
<button
type="button"
class="collapse-toggle btn btn-primary"
id="basic-collapse"
aria-expanded="false"
aria-controls="basic-collapse-heading"
data-collapse="#basic-collapse-heading"
>
<span class="collapse-open:hidden">Collapsed</span>
<span class="collapse-open:block hidden">Collapse</span>
<span class="icon-[tabler--chevron-down] collapse-open:rotate-180 transition-rotate size-4 duration-300"></span>
</button>
<div
id="basic-collapse-heading"
class="collapse hidden w-full overflow-hidden transition-[height] duration-300"
aria-labelledby="basic-collapse"
>
<div class="border-base-content/25 mt-3 rounded-md border p-3">
<p class="text-base-content/80">
The collapsible body remains hidden until the collapse plugin adds specific classes. These control appearance and
manage visibility through transitions.
</p>
</div>
</div>
This example shows how modifier classes adjust components dynamically based on user interaction.
