Documentation
Card
Card is a container for text, photos, and actions in the context of a single subject.
import { Card } from '@nextui-org/react';
Anatomy
- Card: The wrapper that provides state, context and focus management.
- Card.Header: Commonly used for the title of a card.
- Card.Body: The content of the card.
- Card.Footer: Commonly used for actions.
- Card.Image: The image of the card, based on the NextUI Image.
- Card.Divider: A divider between cards.
Default
Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.
Variants
Cards can be given a variety of visual styles. There are three variants: shadow, flat, and bordered.
Hoverable
You can apply a fancy hover animation with the isHoverable prop.
Note: NextUI uses the react-aria useHover hook under the hood in order to handle mouse and touch events, ignore emulated mouse events in mobile browsers, and other accessibility features.
Pressable
You can use the isPressable property to allow users to interact with the entirety of its surface
to trigger its main action, be it an expansion, a link to another screen or some other behavior.
Note: NextUI uses the react-aria usePress hook under the hood in order to handle mouse and touch events, Enter and Space keys, screen readers virtual clicks, and other accessibility features.
With divider
You can add a divider between cards with the Card.Divider component.
With Footer
You can use the Card.Footer component to add actions, details or another information to the Card.
Cover Image
You can use the Card.Image component to add an image to the Card.
Primary Action
You can use the isPressable property to allow users to interact with the Card.
APIs
Card Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| children* | ReactNode ReactNode[] | The content of the card. It's usually the header, body, and footer. | - |
| variant | CardVariants | The card variant style. | shadow |
| borderWeight | NormalWeights | The border weight of the bordered card. | light |
| isHoverable | boolean | Whether the card can be hovered by the user. | false |
| isPressable | boolean | Whether the card should allow users to interact with the card. | false |
| disableAnimation | boolean | Whether the card is animated. | false |
| disableRipple | boolean | Whether the card should show a ripple animation on press | false |
| allowTextSelectionOnPress | boolean | Whether the card should allow text selection on press. (only for pressable cards) | true |
| css | Stitches.CSS | Override Default CSS style. | - |
| as | keyof JSX.IntrinsicElements | Changes which tag component outputs. | div |
Card Events
| Attribute | Type | Description | Default |
|---|---|---|---|
| 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. | - |
Card.Header Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| css | Stitches.CSS | Override Default CSS style | - |
| as | keyof JSX.IntrinsicElements | Changes which tag component outputs | div |
Card.Body Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| css | Stitches.CSS | Override Default CSS style | - |
| as | keyof JSX.IntrinsicElements | Changes which tag component outputs | div |
Card.Footer Props
| Attribute | Type | Description | Default |
|---|---|---|---|
| isBlurred | boolean | Whether the card footer background should be blurry. | false |
| css | Stitches.CSS | Override Default CSS style | - |
| as | keyof JSX.IntrinsicElements | Changes which tag component outputs | div |
Card.Image Props
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| ImageProps | ImageProps | Since card image is based on the Image you can use any of the Image props. | - |
Card types
Card Variants
type CardVariants = 'shadow' | 'flat' | 'bordered';
Normal Weights
type NormalWeights = 'light' | 'normal' | 'bold' | 'extrabold' | 'black';
