customization
Utilities
Additional utility classes and CSS variables that FlyonUI uses for components and themes.
FlyonUI offers a flexible system of utility classes and CSS variables, allowing you to seamlessly integrate components and themes into your project.
Below is an overview of the essential utility classes and variables used across FlyonUI components.
All colors from FlyonUI, including the primary color, can be applied using standard Tailwind CSS utilities. These color utilities extend to various properties, ensuring you can style elements effectively.
For example, you can use the primary color class with any Tailwind CSS utility like so:
bg-primary // Background color
to-primary // Gradient color 'to'
via-primary // Gradient color 'via'
from-primary // Gradient color 'from'
text-primary // Text color
ring-primary // Ring color
fill-primary // Fill color
caret-primary // Caret color
stroke-primary // Stroke color
border-primary // Border color
divide-primary // Divider color
accent-primary // Accent color
shadow-primary // Shadow color
outline-primary // Outline color
decoration-primary // Text decoration color
placeholder-primary // Placeholder text color
ring-offset-primary // Ring offset color
// Change opacity with ease
bg-primary/50 // Background with 50% opacity
FlyonUI includes extended border radius utilities that adapt based on the active theme, allowing for dynamic styling across different components. These custom radius classes are used to give unique shapes to elements like tooltips, buttons, and cards.
You can apply any Tailwind border-radius utility, such as rounded-r-box or rounded-tr-btn, to fit these classes:
rounded-tooltip // var(--rounded-tooltip) for small components like tooltips
rounded-btn // var(--rounded-btn) for medium-sized elements like buttons and inputs
rounded-box // var(--rounded-box) for large elements like cards and alerts
FlyonUI uses a variety of CSS variables, allowing you to fine-tune components to fit your design needs. You can modify these variables within tailwind.config.js or directly via a class like [--animation-btn:0].
--rounded-box: 1rem; // Border radius for large elements (e.g., cards)
--rounded-btn: 0.5rem; // Border radius for medium elements (e.g., buttons)
--rounded-tooltip: 1.9rem; // Border radius for small elements (e.g., tooltips)
--animation-btn: 0.25s; // Button click animation duration
--animation-input: 0.2s; // Animation duration for inputs (e.g., checkboxes, toggles)
--btn-focus-scale: 0.95; // Button scale transformation on focus
--border-btn: 1px; // Button border width
--tab-border: 1px; // Tab border width
--tab-radius: 0.5rem; // Tab border radius
Certain components in FlyonUI utilize their own CSS variables for more precise styling. These allow for targeted customization of individual components, providing a granular level of control over their appearance.
--tab-border // Border width for tabs
--tab-border-color // Border color for tabs
--tab-padding // Horizontal padding for tabs
--tab-bg // Background color for lifted tabs
--tab-radius // Border radius for lifted tabs
--tab-grad // Radial gradient size for lifted tabs
--value // Progress value in the circle
--size // Size of the progress circle
--thickness // Thickness of the progress circle
--tooltip-color // Background color of the tooltip
--tooltip-text-color // Text color of the tooltip
--chkbg // Checkbox background color
--chkfg // Checkbox foreground color
--tglbg // Toggle background color
--handleoffset // Offset of the toggle handle
--filler-size // Size of the range thumb
--filler-offset // Offset of the range thumb
--range-shdw // Shadow color of the range thumb
--glass-blur // Blur value for the glass effect
--glass-opacity // Opacity of the glass effect
--glass-border-opacity // Opacity of the glass border
--glass-reflex-degree // Reflex angle on the glass
--glass-reflex-opacity // Opacity of the reflex on the glass
--glass-text-shadow-opacity // Opacity of text shadow within glass elements
--card-shadow // Card shadow property
--card-border // Card border property
Add a stunning matte glass effect to your components with the glass class. This class creates a frosted-glass appearance, perfect for creating modern, layered UI designs.
<div class="glass">Glass</div>
These are custom modifiers created for headless JS components such as dropdown, overlay, tooltip etc. They work similarly to other TailwindCSS-like state or responsive modifiers such as checked: and md:.
These modifiers apply specific TailwindCSS utility classes when a particular state or condition is met in the component.
dropdown-open:{tw-utility-classes} // Applies TailwindCSS classes when the dropdown is open
removing:{tw-utility-classes} // Applies TailwindCSS classes when an element is being removed
tooltip-shown:{tw-utility-classes} // Applies TailwindCSS classes when the tooltip is visible
accordion-item-active:{tw-utility-classes} // Applies TailwindCSS classes when an accordion item is active
accordion-selected:{tw-utility-classes} // Applies TailwindCSS classes when an accordion item is selected
collapse-open:{tw-utility-classes} // Applies TailwindCSS classes when a collapse element is open
active-tab:{tw-utility-classes} // Applies TailwindCSS classes when a tab is active
overlay-open:{tw-utility-classes} // Applies TailwindCSS classes when an overlay is open
overlay-layout-open:{tw-utility-classes} // Applies TailwindCSS classes when an overlay layout is open
overlay-backdrop-open:{tw-utility-classes} // Applies TailwindCSS classes when an overlay backdrop is open
scrollspy-active:{tw-utility-classes} // Applies TailwindCSS classes when an element is active in scrollspy
carousel-active:{tw-utility-classes} // Applies TailwindCSS classes when a carousel item is active
carousel-disabled:{tw-utility-classes} // Applies TailwindCSS classes when a carousel item is disabled
selected:{tw-utility-classes} // Applies TailwindCSS classes when an element is selected
select-disabled:{tw-utility-classes} // Applies TailwindCSS classes when a select element is disabled
select-active:{tw-utility-classes} // Applies TailwindCSS classes when a select element is active
select-opened:{tw-utility-classes} // Applies TailwindCSS classes when a select dropdown is opened
input-number-disabled:{tw-utility-classes} // Applies TailwindCSS classes when a number input is disabled
pin-input-active:{tw-utility-classes} // Applies TailwindCSS classes when a pin input field is active
password-active:{tw-utility-classes} // Applies TailwindCSS classes when a password field is active
stepper-active:{tw-utility-classes} // Applies TailwindCSS classes when a stepper step is active
stepper-success:{tw-utility-classes} // Applies TailwindCSS classes when a stepper step is successful
stepper-completed:{tw-utility-classes} // Applies TailwindCSS classes when a stepper step is completed
stepper-error:{tw-utility-classes} // Applies TailwindCSS classes when a stepper step has an error
stepper-processed:{tw-utility-classes} // Applies TailwindCSS classes when a stepper step is processed
stepper-disabled:{tw-utility-classes} // Applies TailwindCSS classes when a stepper step is disabled
stepper-skipped:{tw-utility-classes} // Applies TailwindCSS classes when a stepper step is skipped
strong-password:{tw-utility-classes} // Applies TailwindCSS classes when a password is strong
strong-password-accepted:{tw-utility-classes} // Applies TailwindCSS classes when a strong password is accepted
strong-password-active:{tw-utility-classes} // Applies TailwindCSS classes when a strong password is actively being typed
combo-box-active:{tw-utility-classes} // Applies TailwindCSS classes when a combo box is active
combo-box-selected:{tw-utility-classes} // Applies TailwindCSS classes when a combo box item is selected
combo-box-has-value:{tw-utility-classes} // Applies TailwindCSS classes when a combo box has a value
combo-box-tab-active:{tw-utility-classes} // Applies TailwindCSS classes when a tab in the combo box is active
file-upload-complete:{tw-utility-classes} // Applies TailwindCSS classes when a file upload is complete
