• 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

    To enable CSS overrides, include the path to the vendor JS files in the content section of your Tailwind configuration file. Additionally, set vendors="true" in the FlyonUI config to ensure the override CSS is generated:

    module.exports = {
  content: [
    '../path/to/node-waves/**/*.js', // Include all relevant JS files from node-waves
  ],
  flyonui: {
    vendors: true // Enable vendor-specific CSS generation
  }
}
  • 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-lightModifierWaves with `white’ color.
waves-neutralModifierWaves with ’neutral’ color.
waves-primaryModifierWaves with ‘primary’ color.
waves-secondaryModifierWaves with ‘secondary’ color.
waves-accentModifierWaves with ‘accent’ color.
waves-infoModifierWaves with ‘info’ color.
waves-successModifierWaves with ‘success’ color.
waves-warningModifierWaves with ‘warning’ color.
waves-errorModifierWaves 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.