{"id":15660590,"url":"https://github.com/rawilk/alpine-ripple","last_synced_at":"2026-03-13T17:40:39.058Z","repository":{"id":64920072,"uuid":"578765346","full_name":"rawilk/alpine-ripple","owner":"rawilk","description":"Ripple effect (materialize) for Alpine.js.","archived":false,"fork":false,"pushed_at":"2025-04-08T00:22:57.000Z","size":942,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-08T01:24:53.874Z","etag":null,"topics":["alpinejs","ripple-effect"],"latest_commit_sha":null,"homepage":"https://randallwilk.dev/docs/alpine-ripple","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rawilk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"rawilk"}},"created_at":"2022-12-15T20:41:23.000Z","updated_at":"2025-04-08T00:22:54.000Z","dependencies_parsed_at":"2024-06-11T01:49:22.571Z","dependency_job_id":"56704aca-e3c3-4a8e-87d1-079b27914709","html_url":"https://github.com/rawilk/alpine-ripple","commit_stats":{"total_commits":125,"total_committers":3,"mean_commits":"41.666666666666664","dds":0.344,"last_synced_commit":"d0aced7812c3f20de55447b1504ef49dba7bfbef"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Falpine-ripple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Falpine-ripple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Falpine-ripple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rawilk%2Falpine-ripple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rawilk","download_url":"https://codeload.github.com/rawilk/alpine-ripple/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248943375,"owners_count":21186955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpinejs","ripple-effect"],"created_at":"2024-10-03T13:22:26.471Z","updated_at":"2026-03-13T17:40:39.016Z","avatar_url":"https://github.com/rawilk.png","language":"JavaScript","funding_links":["https://github.com/sponsors/rawilk"],"categories":[],"sub_categories":[],"readme":"\u003e ✨ Help support the maintenance of this package by [sponsoring me](https://github.com/sponsors/rawilk).\n\n# alpine-ripple\n\n![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/rawilk/alpine-ripple?label=version\u0026style=flat-square)\n![Npm downloads](https://img.shields.io/npm/dt/@wilkr/alpine-ripple?style=flat-square)\n![GitHub stars](https://img.shields.io/github/stars/rawilk/alpine-ripple?style=flat-square)\n\n![social image](https://banners.beyondco.de/alpine-ripple.png?theme=light\u0026packageManager=npm+install\u0026packageName=%40wilkr%2Falpine-ripple\u0026pattern=bubbles\u0026style=style_1\u0026description=Ripple+effect+%28materialize%29+for+Alpine.js.\u0026md=1\u0026showWatermark=0\u0026fontSize=100px\u0026images=sparkles)\n\n`alpine-ripple` is a simple Alpine.js plugin that adds a ripple effect to any element with an alpine directive `x-ripple`.\n\n## Requirements\n\n-   Alpine.js v3.x\n-   Tailwind CSS (only required if you want to use custom color classes on the directive)\n\n## Installation\n\n### CDN\n\nInclude the following `\u003cscript\u003e` and `\u003clink\u003e` tags in the `\u003chead\u003e` of your document, just before Alpine.\n\n```html\n\u003clink\n    rel=\"stylesheet\"\n    href=\"https://cdn.jsdelivr.net/npm/@wilkr/alpine-ripple@1.x.x/dist/alpine-ripple.css\"\n/\u003e\n\u003cscript\n    src=\"https://cdn.jsdelivr.net/npm/@wilkr/alpine-ripple@1.x.x/dist/alpine-ripple.min.js\"\n    defer\n\u003e\u003c/script\u003e\n```\n\n### NPM\n\n```bash\nnpm i -S @wilkr/alpine-ripple\n```\n\nAdd the `x-ripple` directive to your project by importing the package.\n\n```js\nimport Alpine from \"alpinejs\";\nimport Ripple from \"@wilkr/alpine-ripple\";\n\nAlpine.plugin(Ripple);\n\nwindow.Alpine = Alpine;\nwindow.Alpine.start();\n```\n\nImport the package styles into your css.\n\n```css\n@import \"@wilkr/alpine-ripple/dist/alpine-ripple.css\";\n```\n\n## Usage\n\nAdd the `x-ripple` directive to any element, which in most cases will be a `\u003cbutton\u003e`.\n\n```html\n\u003cbutton x-data x-ripple\u003eClick me\u003c/button\u003e\n```\n\nThis 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.\n\n## Documentation\n\nMore documentation can be found here: https://randallwilk.dev/docs/alpine-ripple\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security\n\nIf you discover any security related issues, please email randall@randallwilk.dev instead of using the issue tracker.\n\n## Credits\n\n-   [Randall Wilk](https://github.com/rawilk)\n-   [All Contributors](../../contributors)\n\n`alpine-ripple` is heavily inspired from:\n\n-   [alHasandev/tailwind-button](https://github.com/alHasandev/tailwind-button)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frawilk%2Falpine-ripple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frawilk%2Falpine-ripple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frawilk%2Falpine-ripple/lists"}