Docs
Third-Party Plugins
Confetti Animation

Tailwind CSS Confetti Animation

Add celebratory flair to your website with Tailwind CSS Confetti! Lightweight, customizable, and easy to integrate for fun, animated confetti effects.

Requires Additional Installation

Note that this component requires the use of the third-party Canvas Confetti plugin.

Learn more

Installation

Install Canvas Confetti.

Install Canvas Confetti via npm

Terminal

                          
                            npm i canvas-confetti

Add the Canvas Confetti JavaScript

Include the JavaScript <script> near the end of your </body> tag:
<script src="./assets/vendor/canvas-confetti/dist/confetti.browser.js"></script>
HTML
```
                          
                        
```

Trigger on click

Trigger a confetti burst from a button click or any other user action.

<!DOCTYPE html>
                        <html lang="en" dir="ltr" class="relative min-h-full h-full">
                          <head>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                            <title>Preline UI</title>
                            <link rel="shortcut icon" href="../../favicon.ico">
                            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                            <link rel="stylesheet" href="../../assets/css/main.min.css">
                          </head>
                          <body class="w-full max-w-xs mx-auto flex flex-col justify-center items-center h-full"><button id="hs-run-on-click-run-confetti" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" type="button">Run Confetti</button>
                            <script src="../../assets/vendor/canvas-confetti/dist/confetti.browser.js"></script>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              window.addEventListener('load', () => {
                                (function () {
                                  const runConfetti = document.querySelector('#hs-run-on-click-run-confetti');
                                  runConfetti.addEventListener('click', () => {
                                    confetti({
                                      particleCount: 100,
                                      spread: 70,
                                      origin: {
                                        y: 0.6
                                      }
                                    });
                                  });
                                })();
                              });
                            </script>
                          </body>
                        </html>

Installation

Install Canvas Confetti.

Add the Canvas Confetti JavaScript

Trigger on click