Gradient Card
Card with animated border gradient and dark glass background.
Installation
1
Run the CLI
$npx particleui-cli add gradient-card
Usage
TSX
import { GradientCard } from "@/components/ui/gradient-card"
export default function Example() {
return (
<GradientCard className="max-w-sm p-6">
<h3 className="text-lg font-semibold mb-2">Card title</h3>
<p className="text-sm text-muted-foreground">Card content goes here.</p>
</GradientCard>
)
}Props
| Prop | Type | Default | Required |
|---|---|---|---|
| glowColor | "particle" | "electric" | "none" | "particle" | no |
Details
Source filecomponents/ui/gradient-card.tsx
Typeui
Categoriescards
npm dependenciesclsx, tailwind-merge
Registry deps—
Claude skill—