shadszn/ui

Card

A glass-morphism card with 4 variants and compound subcomponents for structured content.

Preview

Default Card

A simple card with glass-morphism styling.

This is the default variant with a frosted-glass background and subtle border.

Interactive Card

Hover me to see the animation.

This variant lifts on hover with a lavender glow effect.

Featured Card

Elevated style with gradient overlay on hover.

Best used for highlighting important content.

Installation

npx shadcn@latest add @shadszn/card

Usage

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card"

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Project Settings</CardTitle>
        <CardDescription>Manage your project configuration.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Your content here.</p>
      </CardContent>
      <CardFooter>
        <button>Save</button>
      </CardFooter>
    </Card>
  )
}

Variants

{/* Default glass card */}
<Card variant="default">...</Card>

{/* Interactive card with hover lift animation */}
<Card variant="interactive">...</Card>

{/* Elevated card with stronger glass effect */}
<Card variant="elevated">...</Card>

{/* Featured card with gradient overlay on hover */}
<Card variant="featured">...</Card>

Props

Card

PropTypeDefaultDescription
variant"default" | "interactive" | "elevated" | "featured""default"Visual style variant. Interactive adds hover lift, featured adds gradient overlay.

Subcomponents

CardHeader, CardTitle, CardDescription, CardContent, and CardFooter accept standard HTML div/heading props and an optional className override.