Card

A versatile card container with 12 variants — from glassmorphism and neon glow to 3D tilt and animated borders.

Import

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@igorao79/uivix";

Playground

Card Title

This is a description of the card content.

Some example content inside the card. Move your mouse over the card to see interactive effects.

Variant

All Variants

Default

Clean card with subtle border

variant="default"

Bordered

Thicker border for emphasis

variant="bordered"

Elevated

Deep shadow for depth

variant="elevated"

Ghost

Invisible until hovered

variant="ghost"

Gradient

Violet-to-cyan gradient background

variant="gradient"

Glass

Frosted glassmorphism effect

variant="glass"

Spotlight

Mouse-tracking light follows cursor

variant="spotlight"

Neon

Glowing neon border that intensifies on hover

variant="neon"

Tilt

3D tilt that follows your mouse

variant="tilt"

Animated Border

Spinning gradient border animation

variant="animated-border"

Noise

Subtle noise texture overlay

variant="noise"

Lifted

Lifts up with shadow on hover

variant="lifted"

Usage

<Card variant="tilt">
  <CardHeader>
    <CardTitle>3D Tilt Card</CardTitle>
    <CardDescription>Follows your cursor</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Move your mouse over the card!</p>
  </CardContent>
  <CardFooter>
    <Button>View</Button>
  </CardFooter>
</Card>

Props

Card

Prop	Type	Default	Description
variant	"default" \| "bordered" \| "elevated" \| "ghost" \| "gradient" \| "glass" \| "spotlight" \| "neon" \| "tilt" \| "animated-border" \| "noise" \| "lifted"	"default"	Card style variant
className	string	-	Additional CSS classes
children	ReactNode	-	Card content

Sub-components

Prop	Type	Default	Description
CardHeader	div	-	Top section with title and description
CardTitle	h3	-	Card heading
CardDescription	p	-	Secondary text below title
CardContent	div	-	Main body content
CardFooter	div	-	Bottom section, flex layout with gap