A frosted glass button floating on a slowly drifting aurora of three colors, with a matching gradient rim that flows around the edge. Hover lets the light swell out from underneath.
npx shadcn@latest add https://hyperblur.dev/r/button-aurora.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-aurora.tsx.
import { ButtonAurora } from "@/components/hyperblur/button-aurora"
<ButtonAurora colors={["#22d3ee", "#a855f7", "#f472b6"]}>Generate palette</ButtonAurora>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Generate palette" | Button label. |
| colors | [string, string, string] | ["#22d3ee", "#a855f7", "#f472b6"] | The three aurora colors, also used by the rim and the sparkle icon. |
| intensity | number | 0.7 | Strength of the halo from 0 to 1. |
| size | "sm" | "md" | "lg" | "md" | Font size preset; padding and every inner part scale with it. |