A layout component for grouping item cards in list or grid arrangements with section headers and dividers.
Import the ItemCardGroup component and access all parts using dot notation.
import {ItemCardGroup} from "@heroui-pro/react";
<ItemCardGroup>
<ItemCardGroup.Header>
<ItemCardGroup.Title />
<ItemCardGroup.Description />
</ItemCardGroup.Header>
</ItemCardGroup>.item-card-group - Base group container with rounded corners.item-card-group--default - Default variant with surface background and shadow.item-card-group--secondary - Secondary variant with surface-secondary background.item-card-group--tertiary - Tertiary variant with surface-tertiary background.item-card-group--outline - Outline variant with border and transparent background.item-card-group--transparent - Transparent variant with no background, shadow, or rounded corners.item-card-group--list - Vertical stack layout with auto-dividers between cards.item-card-group--grid - Multi-column grid layout with spaced cards (column count via --item-card-group-columns).item-card-group__header - Optional section heading area.item-card-group__title - Section heading text.item-card-group__description - Section subtext--item-card-group-columns - Number of grid columns (default: 2, set via the columns prop)The root component. Groups item cards with shared styling.
| Prop | Type | Default | Description |
|---|---|---|---|
layout | 'list' | 'grid' | 'list' | Layout mode |
variant | 'default' | 'secondary' | 'tertiary' | 'outline' | 'transparent' | 'default' | Visual style variant |
columns | 2 | 3 | 2 | Number of grid columns when layout is "grid" |
children | ReactNode | - | Item cards, separators, and headers |
Also supports all native div HTML attributes.
Optional section heading area.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Title and description elements |
Also supports all native div HTML attributes.
Section heading rendered as an h3.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Title text |
Also supports all native h3 HTML attributes.
Section subtext rendered as a p.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Description text |
Also supports all native p HTML attributes.