Search

Search the site

All components

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.

1import { PlasmaBorderCard } from "@/registry/ui/plasma-border-card";
2
3export 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>
8
9 <h3 className="text-2xl font-bold">Plasma Border Card</h3>
10
11 <p className="text-muted-foreground">
12 Border energy intelligently tracks the cursor position around the
13 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

NameTypeDefaultDescription
classNamestringTailwind classes for styling the card
childrenReactNodeRequiredThe content of the card