Plasma Border Card
A card with a plasma border
Default
A card with a plasma border
Premium Component
Plasma Border Card
Border energy intelligently tracks the cursor position around the perimeter.
default-example.tsx
1import { PlasmaBorderCard } from "@/registry/ui/plasma-border-card";23export function PlasmaBorderCardDefaultExample() {4 return (5 <PlasmaBorderCard className="w-[420px] p-6">6 <div className="space-y-3">7 <div className="text-sm text-muted-foreground">Premium Component</div>89 <h3 className="text-2xl font-bold">Plasma Border Card</h3>1011 <p className="text-muted-foreground">12 Border energy intelligently tracks the cursor position around the13 perimeter.14 </p>15 </div>16 </PlasmaBorderCard>17 );18}
Installation & source
Install via the shadcn CLI or copy the registry files manually.
bash
npx shadcn@latest add @tt-ui/plasma-border-card
Props
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Tailwind classes for styling the card | |
| children | ReactNode | Required | The content of the card |