Skip to main content
ParticleUI

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

PropTypeDefaultRequired
glowColor"particle" | "electric" | "none""particle"no

Details

Source filecomponents/ui/gradient-card.tsx
Typeui
Categoriescards
npm dependenciesclsx, tailwind-merge
Registry deps
Claude skill