customization
Config
A guide to configuring and customizing the default FlyonUI and Tailwind CSS options and styles.
How can you adjust the default configuration of FlyonUI?
FlyonUI is highly configurable via your CSS file. To customize it, replace the semicolon ; after @plugin "flyonui" with curly braces {} and insert your desired configuration settings inside these braces.
Note: Due to integration with Preline JS, FlyonUI does not support the prefix option like DaisyUI.
@plugin "flyonui";@plugin "flyonui" {}Default config:
@plugin "flyonui" {
themes: light --default, dark --prefersdark;
root: ":root";
include: ;
exclude: ;
logs: true;
}
Default Value | Type | Description |
|---|---|---|
light --default, dark --prefersdark | string or comma-separated list, or false or all | A list of themes to enable. Use false to disable all themes, or all to enable every theme. The --default flag marks a theme as the default, while --prefersdark sets a theme as the default for dark mode. |
Here, we define four themes: soft as the default theme, luxury for dark mode, and gourmet and corporate as additional themes that can be used.
@plugin "flyonui" {
themes: soft --default, luxury --prefersdark, gourmet, corporate;
}
Enabling all themes:
@plugin "flyonui" {
themes: all;
}
Disabling all themes to add your own custom themes via @plugin "flyonui/theme"
@plugin "flyonui" {
themes: false;
}
Setting only soft as the available theme. This restricts the theme to a single choice unless additional custom themes are added
@plugin "flyonui/theme"
@plugin "flyonui" {
themes: soft --default;
}
Default Value | Type | Description |
|---|---|---|
:root | string | The CSS selector where FlyonUI’s CSS variables will be applied. |
Changing the root to #app instead of :root. This ensures that all FlyonUI variables are scoped to #app. This is useful in environments like web components, shadow DOMs, or a specific section of a page.
@plugin "flyonui" {
root: "#app";
}
Default Value | Type | Description |
|---|---|---|
| comma-separated list | List of components to include. |
In the example below, only the button, input, and select components are included. All other components from FlyonUI will be excluded.
@plugin "flyonui" {
include: badge, dropdow, timeline;
}
Default Value | Type | Description |
|---|---|---|
| comma-separated list | List of components to exclude. |
In below example, we excluded the radio, chat, and timeline components. All other styles of FlyonUi library will be excluded. Here are the file names you can exclude.
@plugin "flyonui" {
exclude: radio, chat , timeline;
}
Default value | Type | Description |
|---|---|---|
true | boolean | Enable or disable logs. |
In this case, we disable logging to clean up the console output.
@plugin "flyonui" {
logs: false;
}
Additional Notes:
- Customization: FlyonUI offers flexible configurations, allowing you to tailor your UI to specific requirements.
- Component Control: Use the
includeandexcludeoptions to fine-tune the set of components you want to use, optimizing your build size. - Logs: Disabling logs in production environments helps reduce unnecessary console clutter.
