Card

A versatile container for grouping related content with multiple visual variants, interactive hover lift, and subtle 3D tilt.

Import

tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@tac-ui/web';

Playground

Interactively configure the Card props below.

Card Title

A summary of your current project status.

Track progress, manage tasks, and collaborate with your team.

Variant

Title

tsx

<Card variant="default">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>A summary of your current project status.</CardDescription>
  </CardHeader>
  <CardContent>Track progress, manage tasks, and collaborate with your team.</CardContent>
</Card>

Default

The default card variant uses a bordered surface with a subtle shadow, composed with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter sub-components.

Project Overview

A summary of your current project status.

Track progress, manage tasks, and collaborate with your team.

tsx

<Card>
  <CardHeader>
    <CardTitle>Project Overview</CardTitle>
    <CardDescription>A summary of your current project status.</CardDescription>
  </CardHeader>
  <CardContent>Track progress, manage tasks, and collaborate with your team.</CardContent>
  <CardFooter>
    <Button variant="outline" size="sm">Details</Button>
  </CardFooter>
</Card>

Variants

Four visual styles are available: default (bordered surface), accent (colored border), glass (backdrop-blur frosted), and flat (no border or shadow).

Default

default

The default card variant.

Content sits here with proper spacing and typography.

Accent

accent

The accent card variant.

Content sits here with proper spacing and typography.

Glass

glass

The glass card variant.

Content sits here with proper spacing and typography.

Flat

flat

The flat card variant.

Content sits here with proper spacing and typography.

tsx

<Card variant="default">...</Card>
<Card variant="accent">...</Card>
<Card variant="glass">...</Card>
<Card variant="flat">...</Card>

Interactive

Setting interactive enables a spring-animated hover lift and press scale, making the card behave like a clickable element with keyboard focus support.

Favorites

Your starred items

12 items saved

Quick Actions

Frequently used tools

5 actions available

Security

Account protection

All checks passed

tsx

<Card interactive>
  <CardHeader>
    <CardTitle>Clickable Card</CardTitle>
    <CardDescription>Hover to see the gentle lift effect.</CardDescription>
  </CardHeader>
</Card>

API Reference

Prop	Type	Default	Description
variant	"default" \| "accent" \| "glass" \| "flat"	"default"	Visual style of the card.
interactive	boolean	false	Enables hover/active/focus spring interactions with a lift and press animation.
tilt	boolean	false	When true and interactive, applies a subtle cursor-tracking 3D tilt (±3°). Requires interactive.
className	string	-	Additional CSS class names applied to the card root.
style	React.CSSProperties	-	Inline styles merged with tilt perspective wrapper styles when tilt is enabled.
children	React.ReactNode	-	Card content — typically CardHeader, CardContent, and CardFooter sub-components.