Installation
Examples
Usage
import { CyberpunkCard } from "@/components/ui/cyberpunk-card";<CyberpunkCard
theme="neon-blue"
borderStyle="solid"
colorShift={true}
lightTrail={true}
rounded="md"
glow={true}
glowIntensity={3}
>
<div className="p-6">
<h3 className="text-xl font-bold text-white">Cyberpunk Title</h3>
<p className="text-blue-100 mt-2">Your content goes here</p>
</div>
</CyberpunkCard>Props
Cyberpunk Card
| Prop | Type | Default | Description |
|---|---|---|---|
theme | "neon-blue" | "neon-pink" | "neon-green" | "neon-orange" | "neon-purple" | "neon-cyan" | "neon-red" | "matrix-green" | "cyber-red" | "hologram" | "custom" | "neon-blue" | The color theme of the card. |
customColors | { primary: string; secondary: string; accent: string } | undefined | Custom colors for the card when theme is set to "custom". |
borderStyle | "solid" | "dashed" | "glitch" | "corners" | "animated" | "circuit" | "solid" | The border style of the card. |
colorShift | boolean | true | Whether to enable the color shift effect |
lightTrail | boolean | true | Whether to enable the light trail effect |
rounded | "none" | "sm" | "md" | "lg" | "md" | The border radius of the card. |
glow | boolean | true | Whether to show a glow effect |
glowIntensity | number | 3 | The intensity of the glow effect (1-5) |
backgroundEffect | "none" | "circuit" | "matrix" | "scanlines" | "particles" | "waves" | "none" | Background visual effect. |
pulseAnimation | boolean | false | Whether to enable pulsing animation effect |
glitchEffect | boolean | false | Whether to enable glitch visual effect |
hologramFlicker | boolean | false | Whether to enable hologram flickering effect |
dataStream | boolean | false | Whether to show animated data stream effect |
loading | boolean | false | Whether to show loading state with animations |
animationSpeed | "slow" | "normal" | "fast" | "normal" | Speed of animations. |
className | string | "" | Additional CSS classes to apply |
children | React.ReactNode | Required | Content of the card |