Card (components/ui/card.tsx)

Overview

A versatile card component that provides a container for content with header, footer, and content sections, supporting various styles and interactions.

Features

• Header and footer sections
• Content area
• Hover effects
• Shadow variants
• Border customization
• Responsive design
• Interactive states
• Accessibility support

Dependencies

import * as React from 'react'
import { forwardRef } from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

Props

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: 'default' | 'bordered' | 'ghost';
  className?: string;
  children: ReactNode;
}

interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  children: ReactNode;
}

interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  children: ReactNode;
}

interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
  className?: string;
  children: ReactNode;
}

interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
  className?: string;
  children: ReactNode;
}

Implementation

State Management

The Card component does not require internal state management.

Methods

This is a purely presentational component with no methods required.

Unique Functionality

• Compound component pattern
• Style variants system
• Shadow management
• Border handling
• Spacing control

HTML Structure

<div
  className={cn(
    "rounded-lg border bg-card text-card-foreground shadow-sm",
    {
      'border-none shadow-md': variant === 'default',
      'border hover:border-primary': variant === 'bordered',
      'border-none bg-transparent shadow-none': variant === 'ghost'
    },
    className
  )}
  {...props}
>
  {children}
</div>

API Integration

No direct API integration required.

Components Used

• Card
• CardHeader
• CardFooter
• CardTitle
• CardDescription
• CardContent

Notes

• Uses compound component pattern
• Supports custom styling via className
• Provides consistent spacing
• Maintains accessibility
• Handles responsive design
• Includes hover and focus states

Pages/Components Referenced By

• Dashboard
• Profile
• Settings