Lucy
EdgerunnerAdvanced cybernetic enhancement module for combat performance
80%
75%
60%
Installation
Examples
HACKING SUITE
ONLINE
Advanced intrusion tools with ICE-breaking capabilities and self-modifying algorithms
SYSTEM INTEGRITY: 75%UPTIME: 13:42:06
CONNECTION:
SECURED
TARGET:
Arasaka Database
PING:
127ms|||||||||||||
ICE: 3/7CPU: 42%
SYSTEM READY
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 | string | "neon-blue" | The color theme of the card. Possible values: "neon-blue", "neon-pink", "neon-green", "neon-orange", "neon-purple", "custom" |
customColors | object | undefined | Custom colors for the card when theme is set to "custom". The object should include properties: primary, secondary, and accent |
borderStyle | string | "solid" | The border style of the card. Possible values: "solid", "dashed", "glitch", "corners" |
colorShift | boolean | true | Whether to enable the color shift effect |
lightTrail | boolean | true | Whether to enable the light trail effect |
rounded | string | "md" | The border radius of the card. Possible values: "none", "sm", "md", "lg" |
glow | boolean | true | Whether to show a glow effect |
glowIntensity | number | 3 | The intensity of the glow effect (1-5) |
className | string | "" | Additional CSS classes to apply |
children | React.ReactNode | undefined | Content of the card |