• third party plugins
  • Wave Effect

third party plugins

Tailwind CSS Wave Effect

Add smooth wave effects to your components with Nodewave for better interaction.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate Waves with FlyonUI.

  • 1
    Installation

    Install waves using npm:

    npm install node-waves
  • 2
    Include Waves JavaScript and CSS

    Add the following CSS and JavaScript to your page:

    <head>
  <link rel="stylesheet" type="text/css" href="/path/to/waves.min.css" />
</head>
<body>
  <script type="text/javascript" src="../path/to/waves.min.js"></script>
</body>

    Note: A CDN link won't work here because we need to modify the default Vendor CSS to fit FlyonUI's design.

  • 3
    Update Tailwind Configuration

    Update your tailwind.css file to incorporate the path for the FlyonUI Waves override CSS.

    @import "flyonui/src/vendor/waves.css";
  • 4
    Initialize Waves

    Add the initialization JavaScript code for Waves after including the Waves JS library. Set up an event listener on any element to trigger the Waves instance. Ensure this Waves JS file is monitored by TailwindCSS, as described in step 3.

    For more options and detailed configurations, refer to the Waves documentation .

    // Waves Initialization
Waves.init()
Waves.attach('.waves')
Class Name
Type
Description
wavesComponentBase class for the waves.
waves-lightColorWaves with `white’ color.
waves-primaryColorWaves with ‘primary’ color.
waves-secondaryColorWaves with ‘secondary’ color.
waves-accentColorWaves with ‘accent’ color.
waves-infoColorWaves with ‘info’ color.
waves-successColorWaves with ‘success’ color.
waves-warningColorWaves with ‘warning’ color.
waves-errorColorWaves with ’error’ color.

Basic example

Default

Use the waves class to implement the default ripple effect.

Color

Semantic colors

Combine the waves class with waves-{semantic color} to implement colored wave effects.

Custom colors

To customize the ripple color, apply the waves class alongside the --wave-color CSS variable.

Illustration

Buttons

Example of wave effect applied to buttons.

Icons

Example of wave effect applied to icon buttons.

Card

Example of wave effect applied to card.

Image

Example of wave effect applied to images.