一、核心功能
| 功能 | 说明 |
| 礼物列表 | 显示配置的礼物列表，可以点击“更多”按钮查看完整礼物列表。 |
| 礼物发送 | 礼物列表中选中礼物后，可以点击发送。发送的礼物信息会显示在聊天消息中。 |
| 礼物播放 | 支持 SVG 2D、SVG 3D 和 MP4 视频礼物，SVG 3D 礼物支持全屏播放。 |
二、步骤1：环境配置与开通服务
在进行快速接入之前，你需要参考 准备工作（Web React），满足相关环境配置及开通对应服务。
注意：说明：
注意：使用礼物系统要求开通 TUILiveKit 体验版、多人连麦版或大规模直播版，不同套餐中可配置的礼物数量有所不同，详细参见 TUILiveKit 价格总览 中的礼物系统说明，你可按需选购。
三、步骤2：安装依赖
npmpnpmyarnnpm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react –savepnpm install tuikit-atomicx-react @tencentcloud/uikit-base-component-reactyarn add tuikit-atomicx-react @tencentcloud/uikit-base-component-react
四、步骤3：集成直播送礼组件
在你的项目中引入并使用直播送礼组件，可直接复制如下示例代码到你的项目中，实现礼物列表、发送礼物、3D 礼物播放。
GiftPanel.tsxGiftPanel.module.scssimport React from "react";import { LiveGift } from "tuikit-atomicx-react";import styles from "./GiftPanel.module.scss";const GiftPanel: React.FC = () => { return ( <div className={styles.livePlayer__giftPanel}> <LiveGift /> </div> )};export default GiftPanel;.livePlayer__giftPanel{ width: 100%; height: 130px; flex-shrink: 0; border-top: 1px solid var(–uikit-stroke-color-primary); background: var(–uikit-bg-color-operate);}
五、步骤 4：导入默认礼物
你新申请的应用在礼物后台默认是没有配置任何礼物的，所以集成后你的礼物发送面板默认是空的，为了你能快速体验我们的礼物收发效果，你可以使用 服务端 API 一键导入我们为你预置的礼物素材。
六、下一步
完成上述 UI 集成后，你已经实现了客户端的礼物展示能力。为了构建一个完整的商业化礼物功能，你还需要参考 礼物系统后端对接与进阶功能 文档，完成以下核心业务逻辑的对接：
·自定义礼物配置：通过服务端 API 上传你自己的礼物图标、动画文件，并设置价格。
·礼物扣费回调：配置回调地址，将送礼请求转发至你的计费后台，实现“余额校验”与“扣费”闭环。
·PK 分数联动：在主播 PK 场景下，将礼物价值实时转换为 PK 分数。
·数据统计：获取礼物发送记录、总价值等运营数据。
·升级礼物动画特效 SDK：如果 SVGA 无法满足需求，可集成高级播放器支持 MP4/PAG 等高清透明动画。