Magic Card

A card component with a magical spinning border effect and dark theme styling.

Preview

Notification
You have 3 unread messages.

Your subscription is expiring soon. Please renew to continue using the premium features.

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/magic-card.json

Usage

tsx
32 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { 
  MagicCard, 
  MagicCardHeader, 
  MagicCardTitle, 
  MagicCardDescription, 
  MagicCardContent, 
  MagicCardFooter 
} from "@/components/ui/magic-card";

export const metadata = generateComponentMetadata({
    name: "Magic Card",
    description: "A card component with a magical spinning border effect and dark theme styling.",
    category: "Effects",
});


export default function Example() {
  return (
    <MagicCard className="w-[350px]">
      <MagicCardHeader>
        <MagicCardTitle>Card Title</MagicCardTitle>
        <MagicCardDescription>Card Description</MagicCardDescription>
      </MagicCardHeader>
      <MagicCardContent>
        <p>Card Content</p>
      </MagicCardContent>
      <MagicCardFooter>
        <p>Card Footer</p>
      </MagicCardFooter>
    </MagicCard>
  );
}

Props

PropTypeDefaultDescription
classNamestring—Additional CSS classes