# Card
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/card
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/card.mdx
> Migration guide for Card from HeroUI v2 to v3
***
Refer to the [v3 Card documentation](/docs/react/components/card) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.
## Structure Changes
In v2, Card used separate components: `CardHeader`, `CardBody`, and `CardFooter`:
```tsx
import { Card, CardHeader, CardBody, CardFooter } from "@heroui/react";
export default function App() {
return (
Header
Body
Footer
);
}
```
In v3, Card uses a compound component pattern with explicit subcomponents:
```tsx
import { Card } from "@heroui/react";
export default function App() {
return (
Title
Description
Body content
Footer
);
}
```
## Key Changes
### 1. Component Structure
**v2:** Separate components: `CardHeader`, `CardBody`, `CardFooter`
**v3:** Compound components: `Card.Header`, `Card.Title`, `Card.Description`, `Card.Content`, `Card.Footer`
### 2. Component Name Changes
| v2 Component | v3 Component | Notes |
|-------------|--------------|-------|
| `CardHeader` | `Card.Header` | Same functionality |
| `CardBody` | `Card.Content` | Renamed |
| `CardFooter` | `Card.Footer` | Same functionality |
| - | `Card.Title` | New subcomponent for header titles |
| - | `Card.Description` | New subcomponent for header descriptions |
### 3. Prop Changes
| v2 Prop | v3 Location | Notes |
|---------|-------------|-------|
| `shadow` | - | Removed (use Tailwind e.g. `shadow-sm`, `shadow-md`) |
| `radius` | - | Removed (use Tailwind e.g. `rounded-lg`) |
| `fullWidth` | - | Removed (use Tailwind `w-full`) |
| `isHoverable` | - | Removed (use Tailwind hover classes) |
| `isPressable` | - | Use button or link wrapper inside Card |
| `isBlurred`, `isFooterBlurred` | - | Removed (use Tailwind `backdrop-blur-*`) |
| `isDisabled` | - | Removed (handle with conditional rendering) |
| `disableAnimation`, `disableRipple` | - | Removed |
| `allowTextSelectionOnPress` | - | Removed (not applicable) |
| `classNames` | - | Use `className` on parts |
### 4. Variants
**v2:** No variant prop (used shadow/radius for styling)
**v3:** Has `variant` prop: `transparent`, `default`, `secondary`, `tertiary`
## Migration Examples
### Card Structure
```tsx
{/* Basic structure */}
Header
Body content
Footer
{/* With title and description */}
Daily Mix
12 Tracks
Frontend Radio
Content
```
```tsx
{/* Basic structure */}
Header
Body content
Footer
{/* With title and description */}
Frontend Radio
Daily Mix • 12 Tracks
Content
```
### Pressable Card
```tsx
console.log("pressed")}
>
Clickable card
```
```tsx
```
### Card with Image
```tsx
Frontend Radio
```
```tsx
Frontend Radio
```
### Blurred Footer Card
```tsx
import { Card, CardFooter, Image, Button } from "@heroui/react";
Available soon.
```
```tsx
import { Card, Button } from "@heroui/react";
Available soon.
```
### Card Variants
```tsx
{/* v2 doesn't have variants, uses shadow/radius */}
Content
```
```tsx
Content
Content
```
## Styling Changes
### v2: `classNames` Prop
```tsx
```
### v3: Direct `className` Props
```tsx
Title
Content
Footer
```
## Component Anatomy
The v3 Card follows this structure:
```
Card (Root)
├── Card.Header (optional)
│ ├── Card.Title (optional)
│ └── Card.Description (optional)
├── Card.Content (optional)
└── Card.Footer (optional)
```
## Summary
1. **Component Structure**: Must use compound components instead of separate components
2. **CardBody → Card.Content**: Component renamed
3. **New Subcomponents**: `Card.Title` and `Card.Description` for structured headers
4. **Props Removed**: Many styling props removed; use Tailwind CSS classes
5. **Pressable Cards**: Use a button or link inside Card instead of `isPressable`
6. **Blur Effects**: Use Tailwind `backdrop-blur-*` classes instead of props
7. **Variants**: New variant system for semantic prominence levels
8. **ClassNames Removed**: Use `className` props on individual components