diff --git a/components/auto-complete/OptGroup.tsx b/components/auto-complete/OptGroup.tsx
new file mode 100644
index 000000000..fc01cf0a1
--- /dev/null
+++ b/components/auto-complete/OptGroup.tsx
@@ -0,0 +1,14 @@
+import { FunctionalComponent } from 'vue';
+import { OptionGroupData } from '../vc-select/interface';
+
+export type OptGroupProps = Omit<OptionGroupData, 'options'>;
+
+export interface OptionGroupFC extends FunctionalComponent<OptGroupProps> {
+  /** Legacy for check if is a Option Group */
+  isSelectOptGroup: boolean;
+}
+
+const OptGroup: OptionGroupFC = () => null;
+OptGroup.isSelectOptGroup = true;
+OptGroup.displayName = 'AAutoCompleteOptGroup';
+export default OptGroup;
diff --git a/components/auto-complete/Option.tsx b/components/auto-complete/Option.tsx
new file mode 100644
index 000000000..d3d725fe5
--- /dev/null
+++ b/components/auto-complete/Option.tsx
@@ -0,0 +1,17 @@
+import { FunctionalComponent } from 'vue';
+import { OptionCoreData } from '../vc-select/interface';
+
+export interface OptionProps extends Omit<OptionCoreData, 'label'> {
+  /** Save for customize data */
+  [prop: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+export interface OptionFC extends FunctionalComponent<OptionProps> {
+  /** Legacy for check if is a Option Group */
+  isSelectOption: boolean;
+}
+
+const Option: OptionFC = () => null;
+Option.isSelectOption = true;
+Option.displayName = 'AAutoCompleteOption';
+export default Option;
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index 8409f3d84..41688e666 100644
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, provide, Plugin, VNode } from 'vue';
+import { App, defineComponent, inject, provide, Plugin, VNode, ExtractPropTypes } from 'vue';
 import Select, { SelectProps } from '../select';
 import Input from '../input';
 import InputElement from './InputElement';
@@ -7,14 +7,14 @@ import { defaultConfigProvider } from '../config-provider';
 import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
 import Omit from 'omit.js';
 import warning from '../_util/warning';
-
-const { Option, OptGroup } = Select;
+import Option from './Option';
+import OptGroup from './OptGroup';
 
 function isSelectOptionOrSelectOptGroup(child: any): boolean {
   return child?.type?.isSelectOption || child?.type?.isSelectOptGroup;
 }
 
-const AutoCompleteProps = {
+const autoCompleteProps = {
   ...SelectProps(),
   dataSource: PropTypes.array,
   dropdownMenuStyle: PropTypes.style,
@@ -22,11 +22,17 @@ const AutoCompleteProps = {
   dropdownMatchSelectWidth: PropTypes.looseBool,
 };
 
+export type AutoCompleteProps = Partial<ExtractPropTypes<typeof autoCompleteProps>>;
+
+export const AutoCompleteOption = Option;
+
+export const AutoCompleteOptGroup = OptGroup;
+
 const AutoComplete = defineComponent({
   name: 'AAutoComplete',
   inheritAttrs: false,
   props: {
-    ...AutoCompleteProps,
+    ...autoCompleteProps,
     prefixCls: PropTypes.string.def('ant-select'),
     showSearch: PropTypes.looseBool,
     transitionName: PropTypes.string.def('slide-up'),
@@ -38,8 +44,8 @@ const AutoComplete = defineComponent({
     defaultActiveFirstOption: PropTypes.looseBool.def(true),
   },
   emits: ['change', 'select', 'focus', 'blur'],
-  Option: { ...Option, name: 'AAutoCompleteOption' },
-  OptGroup: { ...OptGroup, name: 'AAutoCompleteOptGroup' },
+  Option,
+  OptGroup,
   setup(props, { slots }) {
     warning(
       !(props.dataSource !== undefined || 'dataSource' in slots),
@@ -142,8 +148,8 @@ const AutoComplete = defineComponent({
 /* istanbul ignore next */
 AutoComplete.install = function(app: App) {
   app.component(AutoComplete.name, AutoComplete);
-  app.component(AutoComplete.Option.name, AutoComplete.Option);
-  app.component(AutoComplete.OptGroup.name, AutoComplete.OptGroup);
+  app.component(AutoComplete.Option.displayName, AutoComplete.Option);
+  app.component(AutoComplete.OptGroup.displayName, AutoComplete.OptGroup);
   return app;
 };
 
diff --git a/components/avatar/index.ts b/components/avatar/index.ts
index a87210def..d082fada0 100644
--- a/components/avatar/index.ts
+++ b/components/avatar/index.ts
@@ -13,7 +13,7 @@ Avatar.install = function(app: App) {
   app.component(Group.name, Group);
   return app;
 };
-
+export { Group as AvatarGroup };
 export default Avatar as typeof Avatar &
   Plugin & {
     readonly Group: typeof Group;
diff --git a/components/badge/index.ts b/components/badge/index.ts
index e8de2f9ef..ba77cbebf 100644
--- a/components/badge/index.ts
+++ b/components/badge/index.ts
@@ -1,6 +1,7 @@
 import { App, Plugin } from 'vue';
 import Badge from './Badge';
 import Ribbon from './Ribbon';
+export type { BadgeProps } from './Badge'
 
 Badge.install = function(app: App) {
   app.component(Badge.name, Badge);
@@ -8,6 +9,8 @@ Badge.install = function(app: App) {
   return app;
 };
 
+export {Ribbon as BadgeRibbon}
+
 export default Badge as typeof Badge &
   Plugin & {
     readonly Ribbon: typeof Ribbon;
diff --git a/components/breadcrumb/BreadcrumbSeparator.tsx b/components/breadcrumb/BreadcrumbSeparator.tsx
index 119e2dbbc..88e6f3b9a 100644
--- a/components/breadcrumb/BreadcrumbSeparator.tsx
+++ b/components/breadcrumb/BreadcrumbSeparator.tsx
@@ -3,16 +3,16 @@ import PropTypes from '../_util/vue-types';
 import { flattenChildren } from '../_util/props-util';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
-const breadcrumbSeparator = {
+const breadcrumbSeparatorProps = {
   prefixCls: PropTypes.string,
 };
-export type BreadcrumbSeparator = Partial<ExtractPropTypes<typeof breadcrumbSeparator>>;
+export type BreadcrumbSeparatorProps = Partial<ExtractPropTypes<typeof breadcrumbSeparatorProps>>;
 
 export default defineComponent({
   name: 'ABreadcrumbSeparator',
   __ANT_BREADCRUMB_SEPARATOR: true,
   inheritAttrs: false,
-  props: breadcrumbSeparator,
+  props: breadcrumbSeparatorProps,
   setup(props, { slots, attrs }) {
     const { prefixCls } = useConfigInject('breadcrumb', props);
 
diff --git a/components/breadcrumb/index.ts b/components/breadcrumb/index.ts
index 01f3c0f2a..c1a9ac48a 100644
--- a/components/breadcrumb/index.ts
+++ b/components/breadcrumb/index.ts
@@ -3,9 +3,9 @@ import Breadcrumb from './Breadcrumb';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 
-export { BreadcrumbProps } from './Breadcrumb';
-export { BreadcrumbItemProps } from './BreadcrumbItem';
-export { BreadcrumbSeparator } from './BreadcrumbSeparator';
+export type { BreadcrumbProps } from './Breadcrumb';
+export type  { BreadcrumbItemProps } from './BreadcrumbItem';
+export  type { BreadcrumbSeparatorProps } from './BreadcrumbSeparator';
 
 Breadcrumb.Item = BreadcrumbItem;
 Breadcrumb.Separator = BreadcrumbSeparator;
@@ -18,6 +18,7 @@ Breadcrumb.install = function(app: App) {
   return app;
 };
 
+export { BreadcrumbItem, BreadcrumbSeparator };
 export default Breadcrumb as typeof Breadcrumb &
   Plugin & {
     readonly Item: typeof BreadcrumbItem;
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 545100b11..d03a2823e 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, inject, Text, VNode } from 'vue';
+import { defineComponent, ExtractPropTypes, inject, Text, VNode } from 'vue';
 import Wave from '../_util/wave';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import buttonTypes from './buttonTypes';
@@ -8,6 +8,9 @@ import { defaultConfigProvider } from '../config-provider';
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
 const props = buttonTypes();
+
+export type ButtonProps = Partial<ExtractPropTypes<ReturnType<typeof buttonTypes>>>;
+
 export default defineComponent({
   name: 'AButton',
   inheritAttrs: false,
diff --git a/components/button/index.ts b/components/button/index.ts
index 4ac09977f..45995a6a8 100644
--- a/components/button/index.ts
+++ b/components/button/index.ts
@@ -1,6 +1,7 @@
 import { App, Plugin } from 'vue';
 import Button from './button';
 import ButtonGroup from './button-group';
+export type {ButtonProps} from './button'
 
 Button.Group = ButtonGroup;
 
@@ -10,7 +11,7 @@ Button.install = function(app: App) {
   app.component(ButtonGroup.name, ButtonGroup);
   return app;
 };
-
+export {ButtonGroup}
 export default Button as typeof Button &
   Plugin & {
     readonly Group: typeof ButtonGroup;
diff --git a/components/card/Card.tsx b/components/card/Card.tsx
index de418040d..7287c7f93 100644
--- a/components/card/Card.tsx
+++ b/components/card/Card.tsx
@@ -1,4 +1,12 @@
-import { inject, isVNode, defineComponent, VNodeTypes, PropType, VNode } from 'vue';
+import {
+  inject,
+  isVNode,
+  defineComponent,
+  VNodeTypes,
+  PropType,
+  VNode,
+  ExtractPropTypes,
+} from 'vue';
 import { tuple } from '../_util/type';
 import Tabs from '../tabs';
 import Row from '../row';
@@ -20,32 +28,36 @@ export type CardType = 'inner';
 
 const { TabPane } = Tabs;
 
+const cardProps = {
+  prefixCls: PropTypes.string,
+  title: PropTypes.VNodeChild,
+  extra: PropTypes.VNodeChild,
+  bordered: PropTypes.looseBool.def(true),
+  bodyStyle: PropTypes.style,
+  headStyle: PropTypes.style,
+  loading: PropTypes.looseBool.def(false),
+  hoverable: PropTypes.looseBool.def(false),
+  type: PropTypes.string,
+  size: PropTypes.oneOf(tuple('default', 'small')),
+  actions: PropTypes.VNodeChild,
+  tabList: {
+    type: Array as PropType<CardTabListType[]>,
+  },
+  tabBarExtraContent: PropTypes.VNodeChild,
+  activeTabKey: PropTypes.string,
+  defaultActiveTabKey: PropTypes.string,
+  cover: PropTypes.VNodeChild,
+  onTabChange: {
+    type: Function as PropType<(key: string) => void>,
+  },
+};
+
+export type CardProps = Partial<ExtractPropTypes<typeof cardProps>>;
+
 const Card = defineComponent({
   name: 'ACard',
   mixins: [BaseMixin],
-  props: {
-    prefixCls: PropTypes.string,
-    title: PropTypes.VNodeChild,
-    extra: PropTypes.VNodeChild,
-    bordered: PropTypes.looseBool.def(true),
-    bodyStyle: PropTypes.style,
-    headStyle: PropTypes.style,
-    loading: PropTypes.looseBool.def(false),
-    hoverable: PropTypes.looseBool.def(false),
-    type: PropTypes.string,
-    size: PropTypes.oneOf(tuple('default', 'small')),
-    actions: PropTypes.VNodeChild,
-    tabList: {
-      type: Array as PropType<CardTabListType[]>,
-    },
-    tabBarExtraContent: PropTypes.VNodeChild,
-    activeTabKey: PropTypes.string,
-    defaultActiveTabKey: PropTypes.string,
-    cover: PropTypes.VNodeChild,
-    onTabChange: {
-      type: Function as PropType<(key: string) => void>,
-    },
-  },
+  props: cardProps,
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
diff --git a/components/card/index.ts b/components/card/index.ts
index 423afa31c..e22e3cf00 100644
--- a/components/card/index.ts
+++ b/components/card/index.ts
@@ -3,6 +3,8 @@ import Card from './Card';
 import Meta from './Meta';
 import Grid from './Grid';
 
+export type {CardProps} from './Card'
+
 Card.Meta = Meta;
 Card.Grid = Grid;
 
@@ -14,6 +16,8 @@ Card.install = function(app: App) {
   return app;
 };
 
+export {Meta as CardMeta, Grid as CardGrid}
+
 export default Card as typeof Card &
   Plugin & {
     readonly Meta: typeof Meta;
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 58efc83ed..573d3efa8 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -1,4 +1,4 @@
-import { inject, provide, PropType, defineComponent, CSSProperties } from 'vue';
+import { inject, provide, PropType, defineComponent, CSSProperties, ExtractPropTypes } from 'vue';
 import PropTypes from '../_util/vue-types';
 import VcCascader from '../vc-cascader';
 import arrayTreeFilter from 'array-tree-filter';
@@ -99,7 +99,7 @@ export interface FilteredOptionsType extends EmptyFilteredOptionsType {
 // }).loose;
 function noop() {}
 
-const CascaderProps = {
+const cascaderProps = {
   /** 可选项数据源 */
   options: { type: Array as PropType<CascaderOptionType[]>, default: [] },
   /** 默认的选中项 */
@@ -154,6 +154,8 @@ const CascaderProps = {
   'onUpdate:value': PropTypes.func,
 };
 
+export type CascaderProps = Partial<ExtractPropTypes<typeof cascaderProps>>;
+
 // We limit the filtered item count by default
 const defaultLimit = 50;
 
@@ -214,7 +216,7 @@ const Cascader = defineComponent({
   name: 'ACascader',
   mixins: [BaseMixin],
   inheritAttrs: false,
-  props: CascaderProps,
+  props: cascaderProps,
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
diff --git a/components/checkbox/index.ts b/components/checkbox/index.ts
index c57b9fbc7..7c3ca61ed 100644
--- a/components/checkbox/index.ts
+++ b/components/checkbox/index.ts
@@ -10,7 +10,7 @@ Checkbox.install = function(app: App) {
   app.component(CheckboxGroup.name, CheckboxGroup);
   return app;
 };
-
+export { CheckboxGroup };
 export default Checkbox as typeof Checkbox &
   Plugin & {
     readonly Group: typeof CheckboxGroup;
diff --git a/components/col/index.ts b/components/col/index.ts
index 28d92d49a..5c0d36735 100644
--- a/components/col/index.ts
+++ b/components/col/index.ts
@@ -1,4 +1,4 @@
 import { Col } from '../grid';
 import { withInstall } from '../_util/type';
-
+export type {ColProps} from '../grid'
 export default withInstall(Col);
diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
index 91239faa2..4fcfab774 100644
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, defineComponent, inject, PropType } from 'vue';
+import { CSSProperties, defineComponent, ExtractPropTypes, inject, PropType } from 'vue';
 import animation from '../_util/openAnimation';
 import { getOptionProps, getComponent, isValidElement, getSlot } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
@@ -20,22 +20,27 @@ export interface PanelProps {
   extra?: VueNode;
 }
 type ActiveKeyType = Array<string | number> | string | number;
+
+const collapseProps = {
+  prefixCls: PropTypes.string,
+  activeKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
+  defaultActiveKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
+  accordion: PropTypes.looseBool,
+  destroyInactivePanel: PropTypes.looseBool,
+  bordered: PropTypes.looseBool.def(true),
+  expandIcon: PropTypes.func,
+  openAnimation: PropTypes.object.def(animation),
+  expandIconPosition: PropTypes.oneOf(tuple('left', 'right')).def('left'),
+  'onUpdate:activeKey': PropTypes.func,
+  onChange: PropTypes.func,
+};
+
+export type CollapseProps = Partial<ExtractPropTypes<typeof collapseProps>>;
+
 export default defineComponent({
   name: 'ACollapse',
   inheritAttrs: false,
-  props: {
-    prefixCls: PropTypes.string,
-    activeKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
-    defaultActiveKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
-    accordion: PropTypes.looseBool,
-    destroyInactivePanel: PropTypes.looseBool,
-    bordered: PropTypes.looseBool.def(true),
-    expandIcon: PropTypes.func,
-    openAnimation: PropTypes.object.def(animation),
-    expandIconPosition: PropTypes.oneOf(tuple('left', 'right')).def('left'),
-    'onUpdate:activeKey': PropTypes.func,
-    onChange: PropTypes.func,
-  },
+  props: collapseProps,
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx
index ef34ee8a6..feb4698a6 100644
--- a/components/collapse/CollapsePanel.tsx
+++ b/components/collapse/CollapsePanel.tsx
@@ -1,27 +1,30 @@
-import { defineComponent, inject } from 'vue';
+import { defineComponent, ExtractPropTypes, inject } from 'vue';
 import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
 import VcCollapse from '../vc-collapse';
 import { defaultConfigProvider } from '../config-provider';
 import PropTypes from '../_util/vue-types';
 
+const collapsePanelProps = {
+  openAnimation: PropTypes.object,
+  prefixCls: PropTypes.string,
+  header: PropTypes.VNodeChild,
+  headerClass: PropTypes.string,
+  showArrow: PropTypes.looseBool,
+  isActive: PropTypes.looseBool,
+  destroyInactivePanel: PropTypes.looseBool,
+  disabled: PropTypes.looseBool,
+  accordion: PropTypes.looseBool,
+  forceRender: PropTypes.looseBool,
+  expandIcon: PropTypes.func,
+  extra: PropTypes.VNodeChild,
+  panelKey: PropTypes.VNodeChild,
+};
+
+export type CollapsePanelProps = Partial<ExtractPropTypes<typeof collapsePanelProps>>;
 export default defineComponent({
   name: 'ACollapsePanel',
   inheritAttrs: false,
-  props: {
-    openAnimation: PropTypes.object,
-    prefixCls: PropTypes.string,
-    header: PropTypes.VNodeChild,
-    headerClass: PropTypes.string,
-    showArrow: PropTypes.looseBool,
-    isActive: PropTypes.looseBool,
-    destroyInactivePanel: PropTypes.looseBool,
-    disabled: PropTypes.looseBool,
-    accordion: PropTypes.looseBool,
-    forceRender: PropTypes.looseBool,
-    expandIcon: PropTypes.func,
-    extra: PropTypes.VNodeChild,
-    panelKey: PropTypes.VNodeChild,
-  },
+  props: collapsePanelProps,
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
diff --git a/components/collapse/index.ts b/components/collapse/index.ts
index d31b48f54..ca5d6d774 100644
--- a/components/collapse/index.ts
+++ b/components/collapse/index.ts
@@ -1,6 +1,9 @@
 import { App, Plugin } from 'vue';
 import Collapse from './Collapse';
 import CollapsePanel from './CollapsePanel';
+export type {CollapseProps} from './Collapse'
+export type {CollapsePanelProps} from './CollapsePanel'
+
 
 Collapse.Panel = CollapsePanel;
 
@@ -11,6 +14,7 @@ Collapse.install = function(app: App) {
   return app;
 };
 
+export {CollapsePanel}
 export default Collapse as typeof Collapse &
   Plugin & {
     readonly Panel: typeof CollapsePanel;
diff --git a/components/components.ts b/components/components.ts
new file mode 100644
index 000000000..16f3e4638
--- /dev/null
+++ b/components/components.ts
@@ -0,0 +1,178 @@
+
+export type { AffixProps } from './affix';
+export { default as Affix } from './affix';
+
+export type { AnchorProps, AnchorLinkProps } from './anchor';
+export { default as Anchor, AnchorLink } from './anchor';
+
+export type { AutoCompleteProps } from './auto-complete';
+export {default as AutoComplete, AutoCompleteOptGroup, AutoCompleteOption } from './auto-complete'
+
+export type { AlertProps } from './alert';
+export { default as Alert } from './alert';
+
+export type { AvatarProps } from './avatar';
+export { default as Avatar, AvatarGroup } from './avatar';
+
+export type { BackTopProps } from './back-top';
+export { default as BackTop } from './back-top';
+
+export type { BadgeProps } from './badge';
+export { default as Badge, BadgeRibbon } from './badge';
+
+export type { BreadcrumbProps, BreadcrumbItemProps, BreadcrumbSeparatorProps } from './breadcrumb';
+export { default as Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from './breadcrumb';
+
+export type { ButtonProps } from './button';
+export { default as Button, ButtonGroup } from './button';
+
+export type { CalendarProps } from './calendar';
+export { default as Calendar } from './calendar';
+
+export type { CardProps } from './card';
+export { default as Card, CardGrid, CardMeta } from './card';
+
+export type { CollapseProps, CollapsePanelProps } from './collapse';
+export { default as Collapse, CollapsePanel } from './collapse';
+
+export type { CarouselProps } from './carousel';
+export { default as Carousel } from './carousel';
+
+export type { CascaderProps } from './cascader';
+export { default as Cascader } from './cascader';
+
+export { default as Checkbox, CheckboxGroup } from './checkbox';
+
+export type { ColProps } from './col';
+export { default as Col } from './col';
+
+export type { CommentProps } from './comment';
+export { default as Comment } from './comment';
+
+export { default as ConfigProvider } from './config-provider';
+
+export { default as DatePicker, RangePicker, MonthPicker, WeekPicker } from './date-picker';
+
+export type { DescriptionsProps } from './descriptions';
+export { default as Descriptions, DescriptionsItem } from './descriptions';
+
+export type { DividerProps } from './divider';
+export { default as Divider } from './divider';
+
+export type { DropdownProps } from './dropdown';
+export { default as Dropdown, DropdownButton } from './dropdown';
+
+export { default as Drawer } from './drawer';
+
+export type { EmptyProps } from './empty';
+export { default as Empty } from './empty';
+
+export type { FormProps, FormItemProps } from './form';
+export { default as Form, FormItem } from './form';
+
+export { default as Grid } from './grid';
+
+export { default as Input, InputGroup, InputPassword, InputSearch, TextArea } from './input';
+
+export type { ImageProps } from './image';
+export { default as Image, ImagePreviewGroup } from './image';
+
+export type { InputNumberProps } from './input-number';
+export { default as InputNumber } from './input-number';
+
+export type { LayoutProps } from './layout';
+export { default as Layout, LayoutHeader, LayouSider, LayouFooter, LayouContent } from './layout';
+
+export type { ListProps } from './list';
+export { default as List, ListItem, ListItemMeta } from './list';
+
+export type {  MessageArgsProps } from './message';
+export { default as message } from './message';
+
+export type { MenuProps, MenuTheme, SubMenuProps, MenuItemProps } from './menu';
+export { default as Menu, MenuDivider, MenuItem, MenuItemGroup, SubMenu } from './menu';
+
+export type { MentionsProps } from './mentions';
+export { default as Mentions, MentionsOption } from './mentions';
+
+export type { ModalProps, ModalFuncProps } from './modal';
+export { default as Modal } from './modal';
+
+export type { StatisticProps } from './statistic';
+export { default as Statistic, StatisticCountdown } from './statistic';
+
+export { default as notification } from './notification';
+
+export type { PageHeaderProps } from './page-header';
+export { default as PageHeader } from './page-header';
+
+export type { PaginationProps } from './pagination';
+export { default as Pagination } from './pagination';
+
+export { default as Popconfirm } from './popconfirm';
+
+export { default as Popover } from './popover';
+
+export type { ProgressProps } from './progress';
+export { default as Progress } from './progress';
+
+export { default as Radio, RadioButton, RadioGroup } from './radio';
+
+export type { RateProps } from './rate';
+export { default as Rate } from './rate';
+
+export type { ResultProps } from './result';
+export { default as Result } from './result';
+
+export type { RowProps } from './row';
+export { default as Row } from './row';
+
+export type { SelectProps } from './select';
+export { default as Select, SelectOptGroup, SelectOption } from './select';
+
+export type { SkeletonProps } from './skeleton';
+export { default as Skeleton, SkeletonButton, SkeletonAvatar, SkeletonInput, SkeletonImage } from './skeleton';
+
+export { default as Slider } from './slider';
+
+export type { SpaceProps } from './space';
+export { default as Space } from './space';
+
+export type { SpinProps } from './spin';
+export { default as Spin } from './spin';
+
+export { default as Steps, Step } from './steps';
+
+export type { SwitchProps } from './switch';
+export { default as Switch } from './switch';
+
+export { default as Table, TableColumn, TableColumnGroup } from './table';
+
+export type { TransferProps } from './transfer';
+export { default as Transfer } from './transfer';
+
+export { default as Tree, TreeNode, DirectoryTree } from './tree';
+
+export type { TreeSelectProps } from './tree-select';
+export { default as TreeSelect, TreeSelectNode } from './tree-select';
+
+export { default as Tabs, TabPane, TabContent } from './tabs';
+
+export type { TagProps } from './tag';
+export { default as Tag, CheckableTag } from './tag';
+
+export type { TimePickerProps } from './time-picker';
+export { default as TimePicker } from './time-picker';
+
+export type { TimelineProps, TimelineItemProps } from './timeline';
+export { default as Timeline, TimelineItem } from './timeline';
+
+export type { TooltipProps } from './tooltip';
+export { default as Tooltip } from './tooltip';
+
+export type { TypographyProps } from './typography';
+export { default as Typography, TypographyLink, TypographyParagraph, TypographyText, TypographyTitle } from './typography';
+
+export type { UploadProps } from './upload';
+
+export { default as Upload } from './upload';
diff --git a/components/date-picker/index.ts b/components/date-picker/index.ts
index 8841fdc87..c4131233c 100755
--- a/components/date-picker/index.ts
+++ b/components/date-picker/index.ts
@@ -56,4 +56,6 @@ DatePicker.install = function(app: App) {
   return app;
 };
 
+export { RangePicker, MonthPicker, WeekPicker };
+
 export default DatePicker as typeof DatePicker & Plugin;
diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
index c995726eb..aa04386cb 100644
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@@ -249,7 +249,6 @@ Descriptions.install = function(app: App) {
   app.component(Descriptions.Item.name, Descriptions.Item);
   return app;
 };
-
 export default Descriptions as typeof Descriptions &
   Plugin & {
     readonly Item: typeof DescriptionsItem;
diff --git a/components/dropdown/dropdown-button.tsx b/components/dropdown/dropdown-button.tsx
index c2c0455e3..d3eb21762 100644
--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@@ -1,4 +1,4 @@
-import { provide, inject, defineComponent, VNode } from 'vue';
+import { provide, inject, defineComponent, VNode, ExtractPropTypes } from 'vue';
 import Button from '../button';
 import classNames from '../_util/classNames';
 import buttonTypes from '../button/buttonTypes';
@@ -14,7 +14,7 @@ import { tuple } from '../_util/type';
 const ButtonTypesProps = buttonTypes();
 const DropdownProps = getDropdownProps();
 const ButtonGroup = Button.Group;
-const DropdownButtonProps = {
+const dropdownButtonProps = {
   ...ButtonGroupProps,
   ...DropdownProps,
   type: PropTypes.oneOf(tuple('primary', 'ghost', 'dashed', 'danger', 'default')).def('default'),
@@ -30,11 +30,11 @@ const DropdownButtonProps = {
   onVisibleChange: PropTypes.func,
   'onUpdate:visible': PropTypes.func,
 };
-export { DropdownButtonProps };
+export type DropdownButtonProps = Partial<ExtractPropTypes<typeof dropdownButtonProps>>;
 export default defineComponent({
   name: 'ADropdownButton',
   inheritAttrs: false,
-  props: DropdownButtonProps,
+  props: dropdownButtonProps,
   emits: ['click', 'visibleChange', 'update:visible'],
   setup() {
     return {
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 143ed3d31..4dd9e4433 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -1,4 +1,4 @@
-import { provide, inject, cloneVNode, defineComponent, VNode } from 'vue';
+import { provide, inject, cloneVNode, defineComponent, VNode, ExtractPropTypes } from 'vue';
 import RcDropdown from '../vc-dropdown/src/index';
 import DropdownButton from './dropdown-button';
 import PropTypes from '../_util/vue-types';
@@ -15,16 +15,19 @@ import getDropdownProps from './getDropdownProps';
 import { defaultConfigProvider } from '../config-provider';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 
-const DropdownProps = getDropdownProps();
+const dropdownProps = getDropdownProps();
+
+export type DropdownProps = Partial<ExtractPropTypes<typeof dropdownProps>>;
+
 const Dropdown = defineComponent({
   name: 'ADropdown',
   inheritAttrs: false,
   props: {
-    ...DropdownProps,
+    ...dropdownProps,
     prefixCls: PropTypes.string,
     mouseEnterDelay: PropTypes.number.def(0.15),
     mouseLeaveDelay: PropTypes.number.def(0.1),
-    placement: DropdownProps.placement.def('bottomLeft'),
+    placement: dropdownProps.placement.def('bottomLeft'),
     onVisibleChange: PropTypes.func,
     'onUpdate:visible': PropTypes.func,
   },
@@ -114,4 +117,3 @@ const Dropdown = defineComponent({
 
 Dropdown.Button = DropdownButton;
 export default Dropdown;
-export { DropdownProps };
diff --git a/components/dropdown/index.ts b/components/dropdown/index.ts
index 4503365bb..d6eb1f0fc 100644
--- a/components/dropdown/index.ts
+++ b/components/dropdown/index.ts
@@ -2,8 +2,8 @@ import { App, Plugin } from 'vue';
 import Dropdown from './dropdown';
 import DropdownButton from './dropdown-button';
 
-export { DropdownProps } from './dropdown';
-export { DropdownButtonProps } from './dropdown-button';
+export type { DropdownProps } from './dropdown';
+export type { DropdownButtonProps } from './dropdown-button';
 
 Dropdown.Button = DropdownButton;
 
@@ -14,6 +14,8 @@ Dropdown.install = function(app: App) {
   return app;
 };
 
+export {DropdownButton}
+
 export default Dropdown as typeof Dropdown &
   Plugin & {
     readonly Button: typeof DropdownButton;
diff --git a/components/empty/index.tsx b/components/empty/index.tsx
index d6d35fe91..f53905235 100644
--- a/components/empty/index.tsx
+++ b/components/empty/index.tsx
@@ -11,7 +11,7 @@ import { withInstall } from '../_util/type';
 const defaultEmptyImg = <DefaultEmptyImg />;
 const simpleEmptyImg = <SimpleEmptyImg />;
 
-export interface TransferLocale {
+interface Locale {
   description?: string;
 }
 
@@ -45,7 +45,7 @@ const Empty: EmptyType = (props, { slots = {}, attrs }) => {
   return (
     <LocaleReceiver
       componentName="Empty"
-      children={(locale: TransferLocale) => {
+      children={(locale: Locale) => {
         const prefixCls = getPrefixCls('empty', customizePrefixCls);
         const des = typeof description !== 'undefined' ? description : locale.description;
         const alt = typeof des === 'string' ? des : 'empty';
diff --git a/components/form/index.tsx b/components/form/index.tsx
index c322a387b..f0e648d92 100644
--- a/components/form/index.tsx
+++ b/components/form/index.tsx
@@ -1,8 +1,9 @@
 import { App, Plugin } from 'vue';
-import Form from './Form';
+import Form, {formProps} from './Form';
+import FormItem, {formItemProps} from './FormItem';
 
-export { FormProps, formProps } from './Form';
-export { FormItemProps, formItemProps } from './FormItem';
+export type { FormProps } from './Form';
+export type { FormItemProps } from './FormItem';
 
 /* istanbul ignore next */
 Form.install = function(app: App) {
@@ -11,6 +12,7 @@ Form.install = function(app: App) {
   return app;
 };
 
+export { FormItem, formItemProps, formProps };
 export default Form as typeof Form &
   Plugin & {
     readonly Item: typeof Form.Item;
diff --git a/components/image/index.tsx b/components/image/index.tsx
index e572227be..af9f10dc3 100644
--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@@ -34,6 +34,8 @@ Image.install = function(app: App) {
   return app;
 };
 
+export { PreviewGroup as ImagePreviewGroup };
+
 export default Image as typeof Image &
   Plugin & {
     readonly PreviewGroup: typeof PreviewGroup;
diff --git a/components/index.ts b/components/index.ts
index 83d7742b5..ec7f25cf6 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,308 +1,29 @@
-/* @remove-on-es-build-begin */
-// this file is not used if use https://github.com/ant-design/babel-plugin-import
-const ENV = process.env.NODE_ENV;
-if (
-  ENV !== 'production' &&
-  ENV !== 'test' &&
-  typeof console !== 'undefined' &&
-  console.warn &&
-  typeof window !== 'undefined'
-) {
-  console.warn(
-    'You are using a whole package of antd, ' +
-      'please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size. Not support Vite !!!',
-  );
-}
-/* @remove-on-es-build-end */
 import { App } from 'vue';
 
-import { default as Affix } from './affix';
-
-import { default as Anchor } from './anchor';
-
-import { default as AutoComplete } from './auto-complete';
-
-import { default as Alert } from './alert';
-
-import { default as Avatar } from './avatar';
-
-import { default as BackTop } from './back-top';
-
-import { default as Badge } from './badge';
-
-import { default as Breadcrumb } from './breadcrumb';
-
-import { default as Button } from './button';
-
-import { default as Calendar } from './calendar';
-
-import { default as Card } from './card';
-
-import { default as Collapse } from './collapse';
-
-import { default as Carousel } from './carousel';
-
-import { default as Cascader } from './cascader';
-
-import { default as Checkbox } from './checkbox';
-
-import { default as Col } from './col';
-
-import { default as DatePicker } from './date-picker';
-
-import { default as Divider } from './divider';
-
-import { default as Dropdown } from './dropdown';
-
-import { default as Form } from './form';
-
-import { default as Icon } from './icon';
-
-import { default as Input } from './input';
-
-import { default as InputNumber } from './input-number';
-
-import { default as Layout } from './layout';
-
-import { default as List } from './list';
-
-import { default as LocaleProvider } from './locale-provider';
-
-import { default as message } from './message';
-
-import { default as Menu } from './menu';
-
-import { default as Mentions } from './mentions';
-
-import { default as Modal } from './modal';
-
-import { default as notification } from './notification';
-
-import { default as Pagination } from './pagination';
-
-import { default as Popconfirm } from './popconfirm';
-
-import { default as Popover } from './popover';
-
-import { default as Progress } from './progress';
-
-import { default as Radio } from './radio';
-
-import { default as Rate } from './rate';
-
-import { default as Row } from './row';
-
-import { default as Select } from './select';
-
-import { default as Slider } from './slider';
-
-import { default as Spin } from './spin';
-
-import { default as Statistic } from './statistic';
-
-import { default as Steps } from './steps';
-
-import { default as Switch } from './switch';
-
-import { default as Table } from './table';
-
-import { default as Transfer } from './transfer';
-
-import { default as Tree } from './tree';
-
-import { default as TreeSelect } from './tree-select';
-
-import { default as Tabs } from './tabs';
-
-import { default as Tag } from './tag';
-
-import { default as TimePicker } from './time-picker';
-
-import { default as Timeline } from './timeline';
-
-import { default as Tooltip } from './tooltip';
-
-// import { default as Mention } from './mention'
-
-import { default as Upload } from './upload';
-
+import * as components from './components';
 import { default as version } from './version';
+export * from './components';
 
-import { default as Drawer } from './drawer';
-
-import { default as Skeleton } from './skeleton';
-
-import { default as Comment } from './comment';
-import { default as Image } from './image';
-// import { default as ColorPicker } from './color-picker';
-
-import { default as ConfigProvider } from './config-provider';
-
-import { default as Empty } from './empty';
-
-import { default as Result } from './result';
-
-import { default as Descriptions } from './descriptions';
-import { default as PageHeader } from './page-header';
-import { default as Space } from './space';
-
-import { default as Typography } from './typography';
-
-const components = [
-  Affix,
-  Anchor,
-  AutoComplete,
-  Alert,
-  Avatar,
-  BackTop,
-  Badge,
-  Breadcrumb,
-  Button,
-  Calendar,
-  Card,
-  Collapse,
-  Carousel,
-  Cascader,
-  Checkbox,
-  Col,
-  DatePicker,
-  Divider,
-  Dropdown,
-  Form,
-  Icon,
-  Input,
-  InputNumber,
-  Layout,
-  List,
-  LocaleProvider,
-  Menu,
-  Mentions,
-  Modal,
-  Pagination,
-  Popconfirm,
-  Popover,
-  Progress,
-  Radio,
-  Rate,
-  Row,
-  Select,
-  Slider,
-  Spin,
-  Statistic,
-  Steps,
-  Switch,
-  Table,
-  Transfer,
-  Tree,
-  TreeSelect,
-  Tabs,
-  Tag,
-  TimePicker,
-  Timeline,
-  Tooltip,
-  Upload,
-  Drawer,
-  Skeleton,
-  Comment,
-  // ColorPicker,
-  ConfigProvider,
-  Empty,
-  Result,
-  Descriptions,
-  PageHeader,
-  Space,
-  Image,
-  Typography,
-];
-
-const install = function(app: App) {
-  components.forEach(component => {
-    app.use(component);
+export const install = function(app: App) {
+  Object.keys(components).forEach(key => {
+    const component = components[key];
+    if (component.install) {
+      app.use(component);
+    }
   });
 
-  app.config.globalProperties.$message = message;
-  app.config.globalProperties.$notification = notification;
-  app.config.globalProperties.$info = Modal.info;
-  app.config.globalProperties.$success = Modal.success;
-  app.config.globalProperties.$error = Modal.error;
-  app.config.globalProperties.$warning = Modal.warning;
-  app.config.globalProperties.$confirm = Modal.confirm;
-  app.config.globalProperties.$destroyAll = Modal.destroyAll;
+  app.config.globalProperties.$message = components.message;
+  app.config.globalProperties.$notification = components.notification;
+  app.config.globalProperties.$info = components.Modal.info;
+  app.config.globalProperties.$success = components.Modal.success;
+  app.config.globalProperties.$error = components.Modal.error;
+  app.config.globalProperties.$warning = components.Modal.warning;
+  app.config.globalProperties.$confirm = components.Modal.confirm;
+  app.config.globalProperties.$destroyAll = components.Modal.destroyAll;
   return app;
 };
 
-/* istanbul ignore if */
-
-export {
-  version,
-  install,
-  message,
-  notification,
-  Affix,
-  Anchor,
-  AutoComplete,
-  Alert,
-  Avatar,
-  BackTop,
-  Badge,
-  Breadcrumb,
-  Button,
-  Calendar,
-  Card,
-  Collapse,
-  Carousel,
-  Cascader,
-  Checkbox,
-  Col,
-  DatePicker,
-  Divider,
-  Dropdown,
-  Form,
-  Icon,
-  Input,
-  InputNumber,
-  Layout,
-  List,
-  LocaleProvider,
-  Menu,
-  Mentions,
-  Modal,
-  Pagination,
-  Popconfirm,
-  Popover,
-  Progress,
-  Radio,
-  Rate,
-  Row,
-  Select,
-  Slider,
-  Spin,
-  Statistic,
-  Steps,
-  Switch,
-  Table,
-  Transfer,
-  Tree,
-  TreeSelect,
-  Tabs,
-  Tag,
-  TimePicker,
-  Timeline,
-  Tooltip,
-  Upload,
-  Drawer,
-  Skeleton,
-  Comment,
-  // ColorPicker,
-  ConfigProvider,
-  Empty,
-  Result,
-  Descriptions,
-  PageHeader,
-  Space,
-  Image,
-  Typography,
-};
+export { version };
 
 export default {
   version,
diff --git a/components/input/index.ts b/components/input/index.ts
index 57bdc3eec..235e42207 100644
--- a/components/input/index.ts
+++ b/components/input/index.ts
@@ -20,6 +20,8 @@ Input.install = function(app: App) {
   return app;
 };
 
+export { Group as InputGroup, Search as InputSearch, TextArea, Password as InputPassword };
+
 export default Input as typeof Input &
   Plugin & {
     readonly Group: typeof Group;
diff --git a/components/layout/index.ts b/components/layout/index.ts
index 000f47ea7..036eccf54 100644
--- a/components/layout/index.ts
+++ b/components/layout/index.ts
@@ -16,6 +16,12 @@ Layout.install = function(app: App) {
   app.component(Layout.Content.name, Layout.Content);
   return app;
 };
+const LayoutHeader = Layout.Header;
+const LayouFooter = Layout.Footer;
+const LayouSider = Layout.Sider;
+const LayouContent = Layout.Content;
+
+export { LayoutHeader, LayouSider, LayouFooter, LayouContent };
 export default Layout as typeof Layout &
   Plugin & {
     readonly Sider: typeof Sider;
diff --git a/components/list/index.tsx b/components/list/index.tsx
index 00eaed2e9..e939f2c5d 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -30,7 +30,6 @@ import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
 
 export { ListItemProps } from './Item';
 export { ListItemMetaProps } from './ItemMeta';
-export const ListItemMeta = ItemMeta;
 
 export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
@@ -330,6 +329,8 @@ List.install = function(app: App) {
   return app;
 };
 
+export { ItemMeta as ListItemMeta, Item as ListItem };
+
 export default List as typeof List &
   Plugin & {
     readonly Item: typeof Item & {
diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx
index 803b53641..46a0b7e68 100644
--- a/components/mentions/index.tsx
+++ b/components/mentions/index.tsx
@@ -1,9 +1,18 @@
-import { App, defineComponent, inject, nextTick, PropType, VNodeTypes, Plugin } from 'vue';
+import {
+  App,
+  defineComponent,
+  inject,
+  nextTick,
+  PropType,
+  VNodeTypes,
+  Plugin,
+  ExtractPropTypes,
+} from 'vue';
 import classNames from '../_util/classNames';
 import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
 import VcMentions from '../vc-mentions';
-import { mentionsProps } from '../vc-mentions/src/mentionsProps';
+import { mentionsProps as baseMentionsProps } from '../vc-mentions/src/mentionsProps';
 import Spin from '../spin';
 import BaseMixin from '../_util/BaseMixin';
 import { defaultConfigProvider } from '../config-provider';
@@ -17,7 +26,7 @@ interface MentionsConfig {
   split?: string;
 }
 
-export interface OptionProps {
+export interface MentionsOptionProps {
   value: string;
   disabled: boolean;
   children: VNodeTypes;
@@ -57,28 +66,32 @@ function getMentions(value = '', config: MentionsConfig) {
     .filter(entity => !!entity && !!entity.value);
 }
 
+const mentionsProps = {
+  ...baseMentionsProps,
+  loading: PropTypes.looseBool,
+  onFocus: {
+    type: Function as PropType<(e: FocusEvent) => void>,
+  },
+  onBlur: {
+    type: Function as PropType<(e: FocusEvent) => void>,
+  },
+  onSelect: {
+    type: Function as PropType<(option: MentionsOptionProps, prefix: string) => void>,
+  },
+  onChange: {
+    type: Function as PropType<(text: string) => void>,
+  },
+};
+
+export type MentionsProps = Partial<ExtractPropTypes<typeof mentionsProps>>;
+
 const Mentions = defineComponent({
   name: 'AMentions',
   mixins: [BaseMixin],
   inheritAttrs: false,
   Option: { ...Option, name: 'AMentionsOption' },
   getMentions,
-  props: {
-    ...mentionsProps,
-    loading: PropTypes.looseBool,
-    onFocus: {
-      type: Function as PropType<(e: FocusEvent) => void>,
-    },
-    onBlur: {
-      type: Function as PropType<(e: FocusEvent) => void>,
-    },
-    onSelect: {
-      type: Function as PropType<(option: OptionProps, prefix: string) => void>,
-    },
-    onChange: {
-      type: Function as PropType<(text: string) => void>,
-    },
-  },
+  props: mentionsProps,
   emits: ['update:value', 'change', 'focus', 'blur', 'select'],
   setup() {
     return {
@@ -112,7 +125,7 @@ const Mentions = defineComponent({
         focused: false,
       });
     },
-    handleSelect(...args: [OptionProps, string]) {
+    handleSelect(...args: [MentionsOptionProps, string]) {
       this.$emit('select', ...args);
       this.setState({
         focused: true,
@@ -204,6 +217,8 @@ Mentions.install = function(app: App) {
   return app;
 };
 
+export const MentionsOption = Mentions.Option;
+
 export default Mentions as typeof Mentions &
   Plugin & {
     readonly Option: typeof Option;
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index e5c586ada..c714e0a7e 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -4,6 +4,7 @@ import SubMenu, { SubMenuProps } from './src/SubMenu';
 import ItemGroup, { MenuItemGroupProps } from './src/ItemGroup';
 import Divider from './src/Divider';
 import { App, Plugin } from 'vue';
+import { MenuTheme } from './src/interface';
 /* istanbul ignore next */
 Menu.install = function(app: App) {
   app.component(Menu.name, Menu);
@@ -24,11 +25,14 @@ export {
   MenuItem as Item,
   MenuItem,
   ItemGroup,
+  ItemGroup as MenuItemGroup,
   Divider,
+  Divider as MenuDivider,
   MenuProps,
   SubMenuProps,
   MenuItemProps,
   MenuItemGroupProps,
+  MenuTheme,
 };
 
 export default Menu as typeof Menu &
diff --git a/components/message/index.tsx b/components/message/index.tsx
index 9d52e3cf0..122b2b14f 100644
--- a/components/message/index.tsx
+++ b/components/message/index.tsx
@@ -59,7 +59,7 @@ export interface MessageType {
   promise: Promise<void>;
 }
 
-export interface ArgsProps {
+export interface MessageArgsProps {
   content: VNodeTypes;
   duration: number | null;
   type: NoticeType;
@@ -70,7 +70,7 @@ export interface ArgsProps {
   class?: string;
 }
 
-function notice(args: ArgsProps): MessageType {
+function notice(args: MessageArgsProps): MessageType {
   const duration = args.duration !== undefined ? args.duration : defaultDuration;
   const Icon = iconMap[args.type];
   const iconNode = Icon ? <Icon /> : '';
@@ -115,13 +115,13 @@ function notice(args: ArgsProps): MessageType {
 }
 
 type ConfigDuration = number | (() => void);
-type JointContent = VNodeTypes | ArgsProps;
+type JointContent = VNodeTypes | MessageArgsProps;
 export type ConfigOnClose = () => void;
 
-function isArgsProps(content: JointContent): content is ArgsProps {
+function isArgsProps(content: JointContent): content is MessageArgsProps {
   return (
     Object.prototype.toString.call(content) === '[object Object]' &&
-    !!(content as ArgsProps).content
+    !!(content as MessageArgsProps).content
   );
 }
 
@@ -189,7 +189,7 @@ export interface MessageApi {
   warn(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
   warning(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
   loading(content: JointContent, duration?: ConfigDuration, onClose?: ConfigOnClose): MessageType;
-  open(args: ArgsProps): MessageType;
+  open(args: MessageArgsProps): MessageType;
   config(options: ConfigOptions): void;
   destroy(): void;
 }
diff --git a/components/notification/index.tsx b/components/notification/index.tsx
index 9c24e1880..2b5a27197 100644
--- a/components/notification/index.tsx
+++ b/components/notification/index.tsx
@@ -142,7 +142,7 @@ const typeToIcon = {
   warning: ExclamationCircleOutlined,
 };
 
-export interface ArgsProps {
+export interface NotificationArgsProps {
   message: VNodeTypes;
   description?: VNodeTypes;
   btn?: VNodeTypes;
@@ -162,7 +162,7 @@ export interface ArgsProps {
   closeIcon?: VNodeTypes;
 }
 
-function notice(args: ArgsProps) {
+function notice(args: NotificationArgsProps) {
   const { icon, type, description, message, btn } = args;
   const outerPrefixCls = args.prefixCls || 'ant-notification';
   const prefixCls = `${outerPrefixCls}-notice`;
diff --git a/components/radio/index.ts b/components/radio/index.ts
index 5f3962618..4b8ca8968 100644
--- a/components/radio/index.ts
+++ b/components/radio/index.ts
@@ -16,7 +16,7 @@ Radio.install = function(app: App) {
   return app;
 };
 
-export { Button, Group };
+export { Button, Group, Button as RadioButton, Group as RadioGroup };
 export default Radio as typeof Radio &
   Plugin & {
     readonly Group: typeof Group;
diff --git a/components/row/index.ts b/components/row/index.ts
index 37860b8bd..19df9e2a7 100644
--- a/components/row/index.ts
+++ b/components/row/index.ts
@@ -1,4 +1,6 @@
 import { Row } from '../grid';
 import { withInstall } from '../_util/type';
 
+export type {RowProps} from '../grid'
+
 export default withInstall(Row);
diff --git a/components/select/index.tsx b/components/select/index.tsx
index dc03286e6..5d4497a1e 100644
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -7,6 +7,7 @@ import getIcons from './utils/iconUtil';
 import PropTypes from '../_util/vue-types';
 import { tuple } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
+import { SizeType } from '../config-provider';
 
 type RawValue = string | number;
 
@@ -19,7 +20,6 @@ export interface LabeledValue {
   value: RawValue;
   label: VNodeChild;
 }
-export type SizeType = 'small' | 'middle' | 'large' | undefined;
 export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
 
 export interface InternalSelectProps<VT> extends Omit<RcSelectProps<VT>, 'mode'> {
@@ -206,6 +206,9 @@ Select.install = function(app: App) {
   app.component(Select.OptGroup.displayName, Select.OptGroup);
   return app;
 };
+
+export const SelectOption = Select.Option;
+export const SelectOptGroup = Select.OptGroup;
 export default Select as typeof Select &
   Plugin & {
     readonly Option: typeof Option;
diff --git a/components/skeleton/index.tsx b/components/skeleton/index.tsx
index fb9b876dd..33864b965 100644
--- a/components/skeleton/index.tsx
+++ b/components/skeleton/index.tsx
@@ -21,7 +21,7 @@ Skeleton.install = function(app: App) {
   app.component(Skeleton.Image.name, SkeletonImage);
   return app;
 };
-
+export { SkeletonButton, SkeletonAvatar, SkeletonInput, SkeletonImage };
 export default Skeleton as typeof Skeleton &
   Plugin & {
     readonly Button: typeof SkeletonButton;
diff --git a/components/statistic/Countdown.tsx b/components/statistic/Countdown.tsx
index 97adb7cf8..7f43fcdfb 100644
--- a/components/statistic/Countdown.tsx
+++ b/components/statistic/Countdown.tsx
@@ -2,7 +2,7 @@ import { defineComponent, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue
 import moment from 'moment';
 import interopDefault from '../_util/interopDefault';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import Statistic, { StatisticProps } from './Statistic';
+import Statistic, { statisticProps } from './Statistic';
 import { formatCountdown as formatCD, countdownValueType, FormatConfig } from './utils';
 
 const REFRESH_INTERVAL = 1000 / 30;
@@ -13,7 +13,7 @@ function getTime(value?: countdownValueType) {
 
 export default defineComponent({
   name: 'AStatisticCountdown',
-  props: initDefaultProps(StatisticProps, {
+  props: initDefaultProps(statisticProps, {
     format: 'HH:mm:ss',
   }),
   emits: ['finish', 'change'],
diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx
index b323579b5..ac6284b7f 100644
--- a/components/statistic/Statistic.tsx
+++ b/components/statistic/Statistic.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, ExtractPropTypes, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import StatisticNumber from './Number';
@@ -6,7 +6,7 @@ import { countdownValueType } from './utils';
 import Skeleton from '../skeleton/Skeleton';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
-export const StatisticProps = {
+export const statisticProps = {
   prefixCls: PropTypes.string,
   decimalSeparator: PropTypes.string,
   groupSeparator: PropTypes.string,
@@ -25,9 +25,11 @@ export const StatisticProps = {
   loading: PropTypes.looseBool,
 };
 
+export type StatisticProps = Partial<ExtractPropTypes<typeof statisticProps>>;
+
 export default defineComponent({
   name: 'AStatistic',
-  props: initDefaultProps(StatisticProps, {
+  props: initDefaultProps(statisticProps, {
     decimalSeparator: '.',
     groupSeparator: ',',
     loading: false,
diff --git a/components/statistic/index.ts b/components/statistic/index.ts
index 73b814838..599e70219 100644
--- a/components/statistic/index.ts
+++ b/components/statistic/index.ts
@@ -2,6 +2,8 @@ import { App, Plugin } from 'vue';
 import Statistic from './Statistic';
 import Countdown from './Countdown';
 
+export type {StatisticProps} from './Statistic'
+
 Statistic.Countdown = Countdown;
 /* istanbul ignore next */
 Statistic.install = function(app: App) {
@@ -10,6 +12,8 @@ Statistic.install = function(app: App) {
   return app;
 };
 
+export const StatisticCountdown = Statistic.Countdown
+
 export default Statistic as typeof Statistic &
   Plugin & {
     readonly Countdown: typeof Countdown;
diff --git a/components/steps/index.tsx b/components/steps/index.tsx
index 5bb92cdf5..eaea61945 100644
--- a/components/steps/index.tsx
+++ b/components/steps/index.tsx
@@ -76,6 +76,8 @@ Steps.install = function(app: App) {
   return app;
 };
 
+export const Step = Steps.Step;
+
 export default Steps as typeof Steps &
   Plugin & {
     readonly Step: typeof VcSteps.Step;
diff --git a/components/table/index.tsx b/components/table/index.tsx
index 21dd7bde3..7de85c65b 100644
--- a/components/table/index.tsx
+++ b/components/table/index.tsx
@@ -100,6 +100,9 @@ Table.install = function(app: App) {
   return app;
 };
 
+export const TableColumn = Table.Column;
+export const TableColumnGroup = Table.ColumnGroup;
+
 export default Table as typeof Table &
   Plugin & {
     readonly Column: typeof Column;
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index bdd3a9a5c..716e0faaa 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -146,6 +146,8 @@ Tag.install = function(app: App) {
   return app;
 };
 
+export { CheckableTag };
+
 export default Tag as typeof Tag &
   Plugin & {
     readonly CheckableTag: typeof CheckableTag;
diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx
index 24031bced..eda8a9bce 100644
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@@ -1,5 +1,5 @@
 import omit from 'omit.js';
-import { defineComponent, inject, provide } from 'vue';
+import { defineComponent, ExtractPropTypes, inject, provide } from 'vue';
 import VcTimePicker from '../vc-time-picker';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import BaseMixin from '../_util/BaseMixin';
@@ -29,7 +29,7 @@ export function generateShowHourMinuteSecond(format: string) {
   };
 }
 
-export const TimePickerProps = () => ({
+export const timePickerProps = () => ({
   size: PropTypes.oneOf(tuple('large', 'default', 'small')),
   value: TimeOrTimesType,
   defaultValue: TimeOrTimesType,
@@ -74,11 +74,13 @@ export const TimePickerProps = () => ({
   onOpenChange: PropTypes.func,
 });
 
+export type TimePickerProps = Partial<ExtractPropTypes<ReturnType<typeof timePickerProps>>>;
+
 const TimePicker = defineComponent({
   name: 'ATimePicker',
   mixins: [BaseMixin],
   inheritAttrs: false,
-  props: initDefaultProps(TimePickerProps(), {
+  props: initDefaultProps(timePickerProps(), {
     align: {
       offset: [0, -2],
     },
diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
index de32d3958..4f86c4f78 100644
--- a/components/timeline/TimelineItem.tsx
+++ b/components/timeline/TimelineItem.tsx
@@ -6,7 +6,7 @@ import initDefaultProps from '../_util/props-util/initDefaultProps';
 import { defaultConfigProvider } from '../config-provider';
 import { tuple } from '../_util/type';
 
-export const timeLineItemProps = {
+export const timelineItemProps = {
   prefixCls: PropTypes.string,
   color: PropTypes.string,
   dot: PropTypes.any,
@@ -14,11 +14,11 @@ export const timeLineItemProps = {
   position: PropTypes.oneOf(tuple('left', 'right', '')).def(''),
 };
 
-export type TimeLineItemProps = Partial<ExtractPropTypes<typeof timeLineItemProps>>;
+export type TimelineItemProps = Partial<ExtractPropTypes<typeof timelineItemProps>>;
 
 export default defineComponent({
   name: 'ATimelineItem',
-  props: initDefaultProps(timeLineItemProps, {
+  props: initDefaultProps(timelineItemProps, {
     color: 'blue',
     pending: false,
   }),
diff --git a/components/timeline/index.tsx b/components/timeline/index.tsx
index f48d4e282..d174a985c 100644
--- a/components/timeline/index.tsx
+++ b/components/timeline/index.tsx
@@ -2,8 +2,8 @@ import { App, Plugin } from 'vue';
 import Timeline from './Timeline';
 import TimelineItem from './TimelineItem';
 
-export { TimelineProps } from './Timeline';
-export { TimeLineItemProps } from './TimelineItem';
+export type { TimelineProps } from './Timeline';
+export type { TimelineItemProps } from './TimelineItem';
 
 Timeline.Item = TimelineItem;
 
@@ -13,7 +13,7 @@ Timeline.install = function(app: App) {
   app.component(TimelineItem.name, TimelineItem);
   return app;
 };
-
+export {TimelineItem}
 export default Timeline as typeof Timeline &
   Plugin & {
     readonly Item: typeof TimelineItem;
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 8ed512f2f..233948d9b 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -203,6 +203,8 @@ TreeSelect.install = function(app: App) {
   return app;
 };
 
+export const TreeSelectNode = TreeSelect.TreeNode;
+
 export default TreeSelect as typeof TreeSelect &
   Plugin & {
     readonly TreeNode: typeof TreeNode;
diff --git a/components/tree/index.tsx b/components/tree/index.tsx
index eb73978ae..9feb7508c 100644
--- a/components/tree/index.tsx
+++ b/components/tree/index.tsx
@@ -12,6 +12,8 @@ Tree.install = function(app: App) {
   return app;
 };
 
+export const TreeNode = Tree.TreeNode;
+export { DirectoryTree };
 export default Tree as typeof Tree &
   Plugin & {
     readonly TreeNode: any;
diff --git a/components/typography/Typography.tsx b/components/typography/Typography.tsx
index 4a6d5da47..dc7c33f27 100644
--- a/components/typography/Typography.tsx
+++ b/components/typography/Typography.tsx
@@ -1,11 +1,6 @@
-import Text from './Text';
-import Title from './Title';
-import Paragraph from './Paragraph';
 import PropTypes from '../_util/vue-types';
-import { defineComponent, HTMLAttributes, App, Plugin } from 'vue';
+import { defineComponent, HTMLAttributes } from 'vue';
 import useConfigInject from '../_util/hooks/useConfigInject';
-import Link from './Link';
-import Base from './Base';
 import classNames from '../_util/classNames';
 
 export interface TypographyProps extends HTMLAttributes {
@@ -18,11 +13,6 @@ interface InternalTypographyProps extends TypographyProps {
 
 const Typography = defineComponent<InternalTypographyProps>({
   name: 'ATypography',
-  Base,
-  Text,
-  Title,
-  Paragraph,
-  Link,
   inheritAttrs: false,
   setup(props, { slots, attrs }) {
     const { prefixCls } = useConfigInject('typography', props);
@@ -47,20 +37,4 @@ Typography.props = {
   component: PropTypes.string,
 };
 
-Typography.install = function(app: App) {
-  app.component(Typography.name, Typography);
-  app.component(Typography.Text.displayName, Text);
-  app.component(Typography.Title.displayName, Title);
-  app.component(Typography.Paragraph.displayName, Paragraph);
-  app.component(Typography.Link.displayName, Link);
-  return app;
-};
-
-export default Typography as typeof Typography &
-  Plugin & {
-    readonly Text: typeof Text;
-    readonly Title: typeof Title;
-    readonly Paragraph: typeof Paragraph;
-    readonly Link: typeof Link;
-    readonly Base: typeof Base;
-  };
+export default Typography;
diff --git a/components/typography/index.tsx b/components/typography/index.tsx
index 5110e07b6..546fc1ade 100644
--- a/components/typography/index.tsx
+++ b/components/typography/index.tsx
@@ -1,3 +1,41 @@
+import { App, Plugin } from 'vue';
+import Base from './Base';
+import Link from './Link';
+import Paragraph from './Paragraph';
+import Text from './Text';
+import Title from './Title';
 import Typography from './Typography';
 
-export default Typography;
+export type {TypographyProps} from './Typography'
+
+
+Typography.Text = Text
+Typography.Title = Title
+Typography.Paragraph = Paragraph
+Typography.Link = Link
+Typography.Base = Base
+
+Typography.install = function(app: App) {
+  app.component(Typography.name, Typography);
+  app.component(Typography.Text.displayName, Text);
+  app.component(Typography.Title.displayName, Title);
+  app.component(Typography.Paragraph.displayName, Paragraph);
+  app.component(Typography.Link.displayName, Link);
+  return app;
+};
+
+export {
+  Text as TypographyText,
+  Title as TypographyTitle,
+  Paragraph as TypographyParagraph,
+  Link as TypographyLink,
+}
+
+export default Typography as typeof Typography &
+  Plugin & {
+    readonly Text: typeof Text;
+    readonly Title: typeof Title;
+    readonly Paragraph: typeof Paragraph;
+    readonly Link: typeof Link;
+    readonly Base: typeof Base;
+  };
diff --git a/components/upload/index.tsx b/components/upload/index.tsx
index 59418e57a..3e910e001 100644
--- a/components/upload/index.tsx
+++ b/components/upload/index.tsx
@@ -13,6 +13,8 @@ Upload.install = function(app: App) {
   return app;
 };
 
+export const UploadDragger = Dragger;
+
 export default Upload as typeof Upload &
   Plugin & {
     readonly Dragger: typeof Dragger;