Card

Data Display

macOS container card with header, title, description, content, and footer.

Installation

$npx shadcn-macos@latest add card

Macintosh HD · APFS Encrypted

Available: 412.8 GB of 1 TB

<Card />— Root macOS frosted glass card container.

Prop	Type	Default	Description
className	string	—	Additional CSS class names.
children	React.ReactNode	—	Card header, content, or footer elements.

<CardWindowHeader />— Header bar with authentic macOS red, yellow, green traffic light controls.

Prop	Type	Default	Description
title	string	—	Title rendered in the center of the window header.
showTrafficLights	boolean	true	Whether window action traffic light buttons are visible.
onClose	() => void	—	Red close button click handler.
onMinimize	() => void	—	Yellow minimize button click handler.
onMaximize	() => void	—	Green maximize / zoom button click handler.

<CardHeader />— Top container for CardTitle and CardDescription.

Prop	Type	Default	Description
className	string	—	Custom classes.
children	React.ReactNode	—	Header content.

<CardContent />— Main body container for card content.

Prop	Type	Default	Description
className	string	—	Custom classes.
children	React.ReactNode	—	Body elements.

<CardFooter />— Bottom action bar container with top subtle border divider.

Prop	Type	Default	Description
className	string	—	Custom classes.
children	React.ReactNode	—	Footer action buttons.