A layout component for arranging multiple KPI cards in horizontal or vertical stacks with consistent spacing.
Import the KPIGroup component and access all parts using dot notation.
import {KPIGroup} from "@heroui-pro/react";
<KPIGroup>
<KPIGroup.Separator />
</KPIGroup>.kpi-group - Base group container with shared surface background and rounded corners.kpi-group--horizontal - Horizontal layout with equal-width children.kpi-group--vertical - Vertical layout stacking children.kpi-group__separator - Divider between KPI cards (width or height based on orientation)The root component. Groups KPI cards with shared styling.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
children | ReactNode | - | KPI cards and separators |
Also supports all native div HTML attributes.
A visual divider between KPI cards. Renders as a 1px line.
Also supports all native span HTML attributes.