Card

Card is a container for text, photos, and actions in the context of a single subject.

Installation

npx nextui-cli@latest add card

No need to install this package if @nextui-org/react is already installed globally.

NextUI exports 4 card-related components:

See the Divider component for more details.

You can pass the isFooterBlurred prop to the card to blur the footer.

You can use other NextUI components inside the card to compose a more complex card.

You can pass the isBlurred prop to the card to blur the card.

If you pass the isPressable prop to the card, it will be rendered as a button.

Note: that the used callback function is onPress instead of onClick. Please see the usePress component for more details.

You can use Image component as the cover of the card by taking it out of the CardBody component.

Card has the following attributes on the base element:

data-hover: When the card is being hovered. Based on useHover
data-focus: When the card is being focused. Based on useFocusRing.
data-focus-visible: When the card is being focused with the keyboard. Based on useFocusRing.
data-disabled: When the card is disabled. Based on isDisabled prop.
data-pressed: When the card is pressed. Based on usePress

Attribute	Type	Description	Default
children	`ReactNode` \| `ReactNode[]`	Usually the Card parts, `CardHeader`, `CardBody` and `CardFooter`.	-
shadow	`none` \| `sm` \| `md` \| `lg`	The card shadow.	`md`
radius	`none` \| `sm` \| `md` \| `lg`	The card border radius.	`lg`
fullWidth	`boolean`	Whether the card should take the full width of its parent.	`false`
isHoverable	`boolean`	Whether the card should change the background on hover.	`false`
isPressable	`boolean`	Whether the card should allow to be pressed.	`false`
isBlurred	`boolean`	Whether the card background should be blurred.	`false`
isFooterBlurred	`boolean`	Whether the card footer background should be blurred.	`false`
isDisabled	`boolean`	Whether the card should be disabled. The press events will be ignored.	`false`
disableAnimation	`boolean`	Whether to disable the animation.	`false`
disableRipple	`boolean`	Whether to disable ripple effect. Only when `isPressable` is true.	`false`
allowTextSelectionOnPress	`boolean`	Whether to allow text selection on pressing. Only when `isPressable` is true.	`false`
classNames	`Record<"base"｜ "header"｜ "body"｜ "footer", string>`	Allows to set custom class names for the card slots.	-

Attribute	Type	Description
onPress	`(e: PressEvent) => void`	Handler that is called when the press is released over the target.
onPressStart	`(e: PressEvent) => void`	Handler that is called when a press interaction starts.
onPressEnd	`(e: PressEvent) => void`	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressChange	`(isPressed: boolean) => void`	Handler that is called when the press state changes.
onPressUp	`(e: PressEvent) => void`	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.