diff --git a/web/src/components/PillTabs.tsx b/web/src/components/PillTabs.tsx
index 03bbb146..fc8b8898 100644
--- a/web/src/components/PillTabs.tsx
+++ b/web/src/components/PillTabs.tsx
@@ -3,6 +3,14 @@ import React from 'react';
 
 import './PillTabs.less';
 
+/**
+ * @example
+ * <PillTabs>
+ *  <PillTabPane key="1" tab={t('全部')}>
+ *    ...
+ *  </PillTabPane>
+ * </PillTabs>
+ */
 export const PillTabs = React.memo((props) => {
   return (
     <Tabs className="pill-tabs" type="card" animated={true}>
diff --git a/web/src/plugin/component/index.tsx b/web/src/plugin/component/index.tsx
index cf97f677..9149b6b6 100644
--- a/web/src/plugin/component/index.tsx
+++ b/web/src/plugin/component/index.tsx
@@ -4,3 +4,4 @@ export { Button, Checkbox, Input } from 'antd';
 export const TextArea = Input.TextArea;
 export { Image } from '@/components/Image';
 export { Icon } from '@iconify/react';
+export { PillTabs, PillTabPane } from '@/components/PillTabs';