Browse components
Flashy Card
A card with a comet of gradient light sweeping its border that brightens, blooms into a glow and flashes across the surface on hover.
Installation
npx shadcn@latest add @glint-ui/flashy-cardFirst 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/flashy-card.json
Usage
import { FlashyCard } from "@/components/ui/flashy-card";
<FlashyCard colors={["#22d3ee", "#a78bfa", "#f472b6"]} speed={3}>
<PricingPlan />
</FlashyCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Card content. |
| colors | string[] | ["#22d3ee","#a78bfa","#f472b6","#fbbf24"] | Gradient stops of the sweeping light. |
| speed | number | 3 | Seconds per full sweep. |
| borderWidth | number | 1.5 | Border thickness in px. |
| radius | number | 20 | Corner radius in px. |
| glow | number | 0.6 | Glow strength on hover. |
| trigger | "hover" | "always" | "hover" | Light up on hover/focus, or always. |
| className | string | — | Extra classes for the root element. |