Customize components

How to customize FlyonUI?

FlyonUI components come with many built-in variants, making it unlikely that you’ll need to customize anything. However, if needed, you can still modify components in various ways:

For example, to customize this button:

<button class="btn">Button</button>

1. Use FlyonUI utility classes:

<button class="btn btn-primary">One</button>
<button class="btn btn-accent btn-gradient">Two</button>
<button class="btn btn-accent btn-outline">Three</button>

2. Use Tailwind's utility classes:

<button class="btn rounded-full">One</button>
<button class="btn rounded-none px-16">Two</button>

3. Customize via `@apply` directive:

.btn {
  @apply rounded-full;
}

4. Other options:

Create your own theme.
Disable FlyonUI’s design decisions and use the unstyled (skeleton) version of FlyonUI.