Components
Evervault Card
Cybersecurity-inspired card with dynamic gradient effects that follow cursor movement.
Evervault Card
The Evervault Card component creates a cybersecurity-inspired card with dynamic gradient effects that follow cursor movement. It features a unique visual effect with animated text patterns and gradient overlays.
Usage
Secure Vault
Your data is protected with military-grade encryption
<template>
<MEverVaultCard gradient-colors="from-green-500 to-blue-700">
<div class="space-y-4">
<UIcon name="i-lucide-lock" class="w-8 h-8 text-white mx-auto" />
<h3 class="text-xl font-bold text-white text-center">Secure Vault</h3>
<p class="text-gray-300 text-center">Your data is protected with military-grade encryption</p>
</div>
</MEverVaultCard>
</template>
Props
gradientColors
string
Tailwind CSS gradient classes for the card background.
class
string
CSS classes to apply to the card.
ui
object
UI configuration for the underlying UCard component.
Examples
Basic Ever Vault Card
Secure Vault
Enterprise-grade encryption and security protection for your most sensitive data
256-bit AES Encryption
Military-grade security for your data
Zero-Knowledge Architecture
We can't see your data, ever
Global Compliance
GDPR, HIPAA, and SOC2 compliant
<template>
<MEverVaultCard>
<div class="space-y-4">
<UIcon name="i-lucide-shield" class="w-8 h-8 text-white mx-auto" />
<h3 class="text-xl font-bold text-white text-center">Basic Vault</h3>
<p class="text-gray-300 text-center">Standard security protection</p>
</div>
</MEverVaultCard>
</template>
With Custom Gradient
High Voltage
Maximum security with enhanced protection
<template>
<MEverVaultCard gradient-colors="from-red-500 to-pink-700 via-rose-400">
<div class="space-y-4">
<UIcon name="i-lucide-zap" class="w-8 h-8 text-white mx-auto" />
<h3 class="text-xl font-bold text-white text-center">High Voltage</h3>
<p class="text-gray-300 text-center">Maximum security with enhanced protection</p>
</div>
</MEverVaultCard>
</template>
With Custom Styling
Premium Vault
Luxury security with premium features
<template>
<MEverVaultCard class="border-2 border-cyan-400">
<div class="space-y-4">
<UIcon name="i-lucide-diamond" class="w-8 h-8 text-cyan-400 mx-auto" />
<h3 class="text-xl font-bold text-cyan-400 text-center">Premium Vault</h3>
<p class="text-cyan-300 text-center">Luxury security with premium features</p>
</div>
</MEverVaultCard>
</template>
With Interactive Content
Interactive Vault
Click the button to unlock premium features
<template>
<MEverVaultCard>
<div class="space-y-4 text-center">
<UIcon name="i-lucide-key" class="w-8 h-8 text-white mx-auto" />
<h3 class="text-xl font-bold text-white">Interactive Vault</h3>
<p class="text-gray-300">Click the button to unlock premium features</p>
<UButton color="white" variant="solid" size="sm" class="mt-2">Unlock</UButton>
</div>
</MEverVaultCard>
</template>