Card
Card is a container for text, photos, and actions in the context of a single subject.
Installation
The above command is for individual installation only. You may skip this step if @nextui-org/react
is already installed globally.
Import
NextUI exports 4 card-related components:
- Card: The main component to display a card.
- CardHeader: Commonly used for the title of a card.
- CardBody: The content of the card.
- CardFooter: Commonly used for actions.
Usage
With Divider
See the Divider component for more details.
With Image
Blurred Footer
You can pass the isFooterBlurred
prop to the card to blur the footer.
Composition
You can use other NextUI components inside the card to compose a more complex card.
Blurred Card
You can pass the isBlurred
prop to the card to blur the card. Card gets blurred properties based on its ancestor element.
Note: To achieve the blur effect as seen in the preview, you need to provide a suitable background (e.g.,
bg-gradient-to-tr from-[#FFB457] to-[#FF705B]
) to an ancestor element of the Card component allowing the Card's blur effect to be visible.
Primary Action
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 ofonClick
. Please see the usePress component for more details.
Cover Image
You can use Image
component as the cover of the card by taking it out of the CardBody
component.
Slots
- base: The main container of the card, where the header, body, and footer are placed.
- header: The header of the card, usually used for the title.
- body: The body of the card, where the main content is placed.
- footer: The footer of the card, usually used for actions.
Data Attributes
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
API
Card Props
Prop | Type | Default |
children |
| |
shadow |
| "md" |
radius |
| "lg" |
fullWidth |
| false |
isHoverable |
| false |
isPressable |
| false |
isBlurred |
| false |
isFooterBlurred |
| false |
isDisabled |
| false |
disableAnimation |
| false |
disableRipple |
| false |
allowTextSelectionOnPress |
| false |
classNames |
|
Card Events
Prop | Type | Default |
onPress |
| |
onPressStart |
| |
onPressEnd |
| |
onPressChange |
| |
onPressUp |
|