Ripple is a plugin that achieve Material ripple animation.


You can customize the default styles of this component inside tailwind.config.js setting theme.extend.xtendui.ripple see css customization. Check xtendui/src/ripple.css.js for default styles.


Import the javascript file with import 'xtendui/src/ripple'.

Initialize manually within javascript with new Xt.Ripple(document.querySelector('.my-container'), {/* options */}).


Initialize with javascript on the selectors you want the ripple effect on, options.onlyInside takes care of activating only on interactive elements.

Style ripple effect with css.


Here are the main javascript options.

SyntaxDefault / ArgumentsDescription
Optiondebug:BooleanfalseDebug on console
OptionsizeInitial:Boolean0.3Initial size factor
OptiononlyInside:Query'a, button, .xt-button'Only if selector else query closest

Match Media

You can add additional options that gets added on match media query. You can use different queries with different and nested options.

SyntaxDefault / ArgumentsDescription
Optionmatches:ObjectfalseAdd additional options on match media query


You can get self object from DOM node on Xtend UI components with Xt.get.

let self = Xt.get({ name: 'xt-ripple', el: document.querySelector('.my-container') })

You can set default options for all components of the same type, with Xt.options.

Xt.options['xt-ripple'] = {
  debug: true,


Listen to events, for listeners use this guideline.

SyntaxDOM ElementDescription
Eventon.xt.ripplecontainerActivation event (event e.detail is original event)
Eventoff.xt.ripplecontainerDeactivation event (event e.detail is original event)
Eventinit.xt.ripplecontainerInit or reinit event
Eventstatus.xt.ripplecontainerStatus event (enabled or disabled)
Eventdestroy.xt.ripplecontainerDestroy event


Access properties by getting self object.

let self = Xt.get({ name: 'xt-ripple', el: document.querySelector('.my-container') })
const container = self.container
PropertycomponentName:StringComponent name (used in Xt.get)
Propertyoptions:ObjectFinal options
Propertyinitial:BooleanIf initial or reset activation
Propertydisabled:BooleanIf component disabled
Propertycontainer:NodeContainer node
Propertyinner:NodeInner node that contains the ripples
Propertytargets:ArrayTargets nodes
Propertysize:NumberInitial size of ripple
Propertytop:NumberInitial top position of ripple
Propertyleft:NumberInitial left position of ripple
PropertysizeFinal:NumberFinal size of ripple
PropertyscaleFinal:NumberFinal scale of ripple


Call methods by getting self object.

let self = Xt.get({ name: 'xt-ripple', el: document.querySelector('.my-container') })
self = null
Methodself.reinit()Reinit component
Methodself.disable()Disable component
Methodself.enable()Enable component
Methodself.destroy()Destroy component