Third-Party Plugins
Add celebratory flair to your website with Tailwind CSS Confetti! Lightweight, customizable, and easy to integrate for fun, animated confetti effects.
Note that this component requires the use of the third-party Canvas Confetti plugin.
Install Canvas Confetti
via npm
npm i canvas-confetti
Include the JavaScript <script>
near the end of your </body>
tag:
Run confetti on click.
(function() {
const runConfetti = document.querySelector('#hs-run-on-click-run-confetti');
runConfetti.addEventListener('click', () => {
confetti({
particleCount: 100,
spread: 70,
origin: {
y: 0.6
}
});
});
})();