Card

Composable surface with 5 variants, 4 motion animations, and a full set of header / content / footer parts.

@akex/card

Installation

npm install @akex/card

Usage

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@akex/card";

<Card variant="gradient" animation="lift">
  <CardHeader>
    <CardTitle>Pro plan</CardTitle>
    <CardDescription>Everything you need to ship.</CardDescription>
  </CardHeader>
  <CardContent>Unlimited projects and priority support.</CardContent>
  <CardFooter>$29 / month</CardFooter>
</Card>

Variants

Default

variant="default"

A flexible surface for grouping related content.

Elevated

variant="elevated"

A flexible surface for grouping related content.

Outline

variant="outline"

A flexible surface for grouping related content.

Ghost

variant="ghost"

A flexible surface for grouping related content.

Gradient

variant="gradient"

A flexible surface for grouping related content.

Animations — hover the cards

Lift

Material Design

Floats up with a deeper shadow on hover — the classic interactive surface for clickable cards.

animation="lift"

Tilt

Aceternity UI

A subtle 3D tilt and scale on hover gives the card real depth and a premium feel.

animation="tilt"

Glow

Magic UI

A soft violet border glow pulses on a continuous loop — perfect for highlighting a featured plan.

animation="glow"

Pop

iOS / iPadOS

Springs in from a smaller scale on mount. Great for cards that appear in a grid or modal.

animation="pop"

Props

Prop	Type	Default	Description
variant	string	"default"	"default" \| "elevated" \| "outline" \| "ghost" \| "gradient"
padding	string	"default"	"none" \| "sm" \| "default" \| "lg"
animation	CardAnimation	—	"lift" \| "tilt" \| "glow" \| "pop"
className	string	—	Extra Tailwind classes
...props	HTMLAttributes	—	All native div element attributes

Back