Browse components
Click Spark
Bursts of sparks radiate from every click inside the area.
Click anywhere
Installation
npx shadcn@latest add @glint-ui/click-sparkFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/click-spark.json
Usage
import { ClickSpark } from "@/components/ui/click-spark";
<ClickSpark sparkColor="#c6ff3d">
<div className="h-64">Click anywhere</div>
</ClickSpark>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Area that sparks on click. |
| sparkColor | string | "#ffffff" | Spark color. |
| sparkCount | number | 8 | Sparks per click. |
| sparkRadius | number | 24 | How far sparks travel, in px. |
| sparkSize | number | 10 | Spark line length, in px. |
| duration | number | 400 | Ms per burst. |
| className | string | — | Extra classes for the root element. |