npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@wilkr/alpine-ripple

v1.1.2

Published

Ripple effect (materialize) for Alpine.js.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

wilkrwilkr

Keywords

Alpine.jsAlpineripplematerialize

Readme

✨ Help support the maintenance of this package by sponsoring me.

alpine-ripple

GitHub tag (latest by date) Npm downloads GitHub stars

social image

alpine-ripple is a simple Alpine.js plugin that adds a ripple effect to any element with an alpine directive x-ripple.

Requirements

  • Alpine.js v3.x
  • Tailwind CSS (only required if you want to use custom color classes on the directive)

Installation

CDN

Include the following <script> and <link> tags in the <head> of your document, just before Alpine.

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@wilkr/[email protected]/dist/alpine-ripple.css"
/>
<script
    src="https://cdn.jsdelivr.net/npm/@wilkr/[email protected]/dist/alpine-ripple.min.js"
    defer
></script>

NPM

npm i -S @wilkr/alpine-ripple

Add the x-ripple directive to your project by importing the package.

import Alpine from "alpinejs";
import Ripple from "@wilkr/alpine-ripple";

Alpine.plugin(Ripple);

window.Alpine = Alpine;
window.Alpine.start();

Import the package styles into your css.

@import "@wilkr/alpine-ripple/dist/alpine-ripple.css";

Usage

Add the x-ripple directive to any element, which in most cases will be a <button>.

<button x-data x-ripple>Click me</button>

This will result in a ripple effect when the button is clicked. By default, the ripple will be white, but this can be changed globally or on a per-element basis.

Documentation

More documentation can be found here: https://randallwilk.dev/docs/alpine-ripple

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

alpine-ripple is heavily inspired from:

License

The MIT License (MIT). Please see License File for more information.