List

Basic list display, which can carry text, lists, pictures, paragraphs.

When To Use

A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

:::warning{title=Deprecated Notice} List component has been deprecated. Will be removed in the next major version. Please use Listy instead. See How do I migrate off List?. :::

Examples

• Simple list · simple

• Basic list · basic

• Load more · loadmore

• Vertical · vertical

• Pagination Settings · pagination

• Grid · grid

• Responsive grid list · responsive

• Scrolling loaded · infinite-load

• Drag sorting · drag-sorting

• Drag sorting with handler · drag-sorting-handler

• Grid Drag sorting · grid-drag-sorting

• Grid Drag sorting with handler · grid-drag-sorting-handler

• virtual list · virtual-list

API

Common props ref：Common props

List

pagination

Properties for pagination.

More about pagination, please check Pagination.

List grid props

List.Item

List.Item.Meta

Semantic DOM

Semantic description source: vendor/components/list/demo/_semantic.tsx

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Declaration source: vendor/components/list/style/index.ts

import type { CSSProperties } from 'react';

import { unit } from '@ant-design/cssinjs';

import type { CSSObject } from '@ant-design/cssinjs';

import { resetComponent } from '../../style';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

export interface ComponentToken {
  /**
   * @desc 内容宽度
   * @descEN Width of content
   */
  contentWidth: number | string;
  /**
   * @desc 大号列表项内间距
   * @descEN Padding of large item
   */
  itemPaddingLG: string;
  /**
   * @desc 小号列表项内间距
   * @descEN Padding of small item
   */
  itemPaddingSM: string;
  /**
   * @desc 列表项内间距
   * @descEN Padding of item
   */
  itemPadding: string;
  /**
   * @desc 头部区域背景色
   * @descEN Background color of header
   */
  headerBg: string;
  /**
   * @desc 底部区域背景色
   * @descEN Background color of footer
   */
  footerBg: string;
  /**
   * @desc 空文本内边距
   * @descEN Padding of empty text
   */
  emptyTextPadding: CSSProperties['padding'];
  /**
   * @desc Meta 下间距
   * @descEN Margin bottom of meta
   */
  metaMarginBottom: CSSProperties['marginBottom'];
  /**
   * @desc 头像右间距
   * @descEN Right margin of avatar
   */
  avatarMarginRight: CSSProperties['marginRight'];
  /**
   * @desc 标题下间距
   * @descEN Margin bottom of title
   */
  titleMarginBottom: CSSProperties['marginBottom'];
  /**
   * @desc 描述文字大小
   * @descEN Font size of description
   */
  descriptionFontSize: number;
}

/**
 * @desc List 组件的 Token
 * @descEN Token for List component
 */
interface ListToken extends FullToken<'List'> {
  /**
   * @desc 列表项类名
   * @descEN Class name of list item
   */
  listBorderedCls: string;
  /**
   * @desc 最小高度
   * @descEN Minimum height
   */
  minHeight: number | string;
}

FAQ

Is there a replacement for the deprecated List component?

Yes — please use Listy, available since antd@6.6.0. It is the successor to List, with built-in capabilities such as virtual scrolling, sticky group headers and programmatic scrolling. It also supports flexible custom rendering, aiming to cover list needs across different scenarios.

How do I migrate off List?

Lists take different shapes in different scenarios, so it is hard to give a one-to-one migration guide. Thanks to the custom rendering capability of Listy, the preset structures in List can now be recomposed with plain JSX inside itemRender.

The mapping is as follows:

• Data and rendering: dataSource maps to items, renderItem maps to itemRender; rowKey keeps its meaning but is required in Listy and no longer defaults to the key field — pass rowKey="key" explicitly if you relied on the default. For large datasets, no third-party dependency is needed — turn on virtual with a height to get virtual scrolling.
• Preset structures inside a row: List.Item, List.Item.Meta, actions, extra can all be recomposed inside itemRender.
• Structures outside the list: put header and footer around Listy directly, wrap the list with Spin for loading, slice the data yourself and pass it to items together with Pagination for pagination, and see the infinite loading demo for loadMore.
• Styles: adjust bordered, split and size through semantic DOM classNames / styles and Design Token; for grid, migrating to Listy is not recommended — use Row / Col with Card to build the card layout instead.

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

• vendor/components/list/Item.tsx
• vendor/components/list/context.ts
• vendor/components/list/index.tsx
• vendor/components/list/style/index.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.