ProCard API

ProCard provides an enhanced card component with features like collapsible sections, tabs, nested layouts, and grid support.

ProCardProps

title

React.ReactNode

Card title.

subTitle

React.ReactNode

Card subtitle displayed next to the title.

Tooltip for the title.

type LabelTooltipType = {
  icon?: React.ReactNode;
  tooltip?: string | React.ReactNode;
}

extra

React.ReactNode

Extra content in the card header (top right corner).

headerBordered

boolean

default:"false"

Whether the header has a divider line.

type

'default' | 'inner'

default:"default"

Card type.

default - Standard card
inner - Inner card for nested layouts

variant

'outlined' | 'borderless'

default:"borderless"

Card variant.

outlined - Card with border
borderless - Card without border

size

'default' | 'small'

default:"default"

Card size.

boolean | React.ReactNode

default:"false"

Loading state. Can be a boolean or custom loading component.

hoverable

boolean

default:"false"

Whether card can be hovered (shows shadow effect).

ghost

boolean

default:"false"

Ghost mode - removes padding and background.

boxShadow

boolean

default:"false"

Whether to show box shadow.

actions

React.ReactNode[] | React.ReactNode

Card action buttons displayed at the bottom.

cover

React.ReactNode

Card cover image or content.

Collapsible

collapsible

boolean | 'icon' | 'header'

default:"false"

Whether the card is collapsible.

false - Not collapsible
true or 'icon' - Collapse icon in header
'header' - Entire header is clickable

collapsed

boolean

Controlled collapsed state.

defaultCollapsed

boolean

default:"false"

Default collapsed state.

onCollapse

function

Callback when collapse state changes.

(collapsed: boolean) => void

collapsibleIconRender

function

Custom render for the collapse icon.

({ collapsed }: { collapsed: boolean }) => React.ReactNode

Layout & Grid

layout

'default' | 'center'

default:"default"

Card layout.

default - Normal layout
center - Vertically center content

direction

'column' | 'row'

default:"row"

Flex direction for nested child cards.

wrap

boolean

default:"false"

Whether child cards wrap to new lines.

gutter

number | [number, number]

Gap between child cards.

number - Horizontal and vertical gap
[horizontal, vertical] - Different horizontal and vertical gaps

Can also be responsive:

gutter={{ xs: 8, sm: 16, md: 24 }}

colSpan

number | string | object

Column span in grid layout (24-column grid system).Can be responsive:

colSpan={{ xs: 24, sm: 12, md: 8, lg: 6 }}

colStyle

React.CSSProperties

Style for the column wrapper.

split

'vertical' | 'horizontal'

Split child cards with divider lines.

vertical - Vertical divider
horizontal - Horizontal divider

Tabs

tabs

ProCardTabsProps

Tab configuration for the card.

Show ProCardTabsProps

Extends Ant Design TabsProps with:

cardProps?: ProCardProps - Props to pass through to card

All standard Ant Design Tabs props:

activeKey?: string - Current active tab key
defaultActiveKey?: string - Default active tab key
onChange?: (key: string) => void - Callback when tab changes
items?: TabItem[] - Tab items
tabPosition?: 'top' | 'right' | 'bottom' | 'left'
type?: 'line' | 'card' | 'editable-card'

Selectable

checked

boolean

Whether the card is selected (shows border highlight).

onChecked

function

Callback when card is clicked (for selectable cards).

(e: React.MouseEvent) => void

Styling

styles

ProCardStyles

Semantic styles object (aligned with Ant Design 5 Card).

type ProCardStyles = {
  root?: React.CSSProperties;
  header?: React.CSSProperties;
  body?: React.CSSProperties;
  extra?: React.CSSProperties;
  title?: React.CSSProperties;
  actions?: React.CSSProperties;
  cover?: React.CSSProperties;
}

classNames

ProCardClassNames

Semantic class names (aligned with Ant Design 5 Card).

type ProCardClassNames = {
  root?: string;
  header?: string;
  body?: string;
  extra?: string;
  title?: string;
  actions?: string;
  cover?: string;
}

className

string

Additional CSS class name.

rootClassName

string

Root element CSS class name.

style

React.CSSProperties

Inline styles for the card.

bodyStyle

React.CSSProperties

Inline styles for the card body (deprecated, use styles.body).

headStyle

React.CSSProperties

Inline styles for the card header (deprecated, use styles.header).

prefixCls

string

CSS class prefix.

ProCard.TabPane

Tab pane component for use with ProCard tabs.

key

string

required

Unique key for the tab.

tab

React.ReactNode

Tab label.

disabled

boolean

default:"false"

Disable the tab.

cardProps

ProCardProps

Props to pass through to the ProCard for this tab.

ProCard.Group

Group multiple ProCards together.

title

React.ReactNode

Group title.

direction

'column' | 'row'

default:"row"

Flex direction for cards in the group.

gutter

number | [number, number]

Gap between cards.

ghost

boolean

default:"false"

Ghost mode for the group.

ProCard.Divider

Divider for splitting card sections.

type

'horizontal' | 'vertical'

Divider orientation.

Usage Examples

import { ProCard } from '@ant-design/pro-components';

export default () => (
  <ProCard
    title="Card Title"
    extra={<Button type="link">More</Button>}
    headerBordered
  >
    Card content
  </ProCard>
);

<ProCard
  title="Collapsible Card"
  collapsible
  defaultCollapsed={false}
>
  Card content
</ProCard>

<ProCard gutter={16} ghost>
  <ProCard colSpan={12} title="Card 1">
    Content 1
  </ProCard>
  <ProCard colSpan={12} title="Card 2">
    Content 2
  </ProCard>
</ProCard>

<ProCard
  tabs={{
    activeKey: tab,
    onChange: setTab,
    items: [
      {
        key: 'tab1',
        label: 'Tab 1',
        children: <div>Tab 1 content</div>,
      },
      {
        key: 'tab2',
        label: 'Tab 2',
        children: <div>Tab 2 content</div>,
      },
    ],
  }}
/>

<ProCard split="vertical">
  <ProCard title="Left" colSpan="40%">
    Left content
  </ProCard>
  <ProCard title="Right">
    Right content
  </ProCard>
</ProCard>

<ProCard ghost gutter={[16, 16]}>
  <ProCard
    colSpan={{ xs: 24, sm: 12, md: 8, lg: 6 }}
    title="Responsive Card 1"
  >
    Content
  </ProCard>
  <ProCard
    colSpan={{ xs: 24, sm: 12, md: 8, lg: 6 }}
    title="Responsive Card 2"
  >
    Content
  </ProCard>
  <ProCard
    colSpan={{ xs: 24, sm: 12, md: 8, lg: 6 }}
    title="Responsive Card 3"
  >
    Content
  </ProCard>
</ProCard>

Components API

Form Fields API

Utilities

ProCard

ProCard API

ProCardProps

Collapsible

Layout & Grid

Tabs

Selectable

Styling

ProCard.TabPane

ProCard.Group

ProCard.Divider

Usage Examples

Build docs developers (and LLMs) love

Components API

Form Fields API

Utilities

​ProCard API

​ProCardProps

​Collapsible

​Layout & Grid

​Tabs

​Selectable

​Styling

​ProCard.TabPane

​ProCard.Group

​ProCard.Divider

​Usage Examples

Build docs developers (and LLMs) love

ProCard API

ProCardProps

Collapsible

Layout & Grid

Tabs

Selectable

Styling

ProCard.TabPane

ProCard.Group

ProCard.Divider

Usage Examples