diff --git a/packages/elements-next/src/components/headings/headings.mdx b/packages/elements-next/src/components/headings/headings.mdx
index faeec8a79e..267e953741 100644
--- a/packages/elements-next/src/components/headings/headings.mdx
+++ b/packages/elements-next/src/components/headings/headings.mdx
@@ -1,19 +1,22 @@
 ---
-name: Headings
+name: Heading
 route: /headings
 ---
 
 import { Playground, Props } from 'docz'
-import { HeadingMain } from './headings'
+import { Heading } from './headings'
 import { DocsWrapper } from '@/utils/docs-wrapper'
 
-# Headings
+# Heading
 
-<Props of={HeadingMain} />
+<Props of={Heading.Main} />
 
 <Playground>
   <DocsWrapper>
-    <HeadingMain>Heading Main</HeadingMain>
+    <Heading.Main>Heading Main</Heading.Main>
+    <Heading.SubMain>SubHeading Main</Heading.SubMain>
+    <Heading.Secondary>Heading Secondary</Heading.Secondary>
+    <Heading.SubSecondary>SubHeading Secondary</Heading.SubSecondary>
   </DocsWrapper>
 </Playground>
 
diff --git a/packages/elements-next/src/components/headings/headings.tsx b/packages/elements-next/src/components/headings/headings.tsx
index fae79a79b4..31ac9d0864 100644
--- a/packages/elements-next/src/components/headings/headings.tsx
+++ b/packages/elements-next/src/components/headings/headings.tsx
@@ -30,3 +30,12 @@ export const HeadingSecondary: React.FC<HeadingProps> = ({ children, isTextCente
 export const SubHeadingSecondary: React.FC<HeadingProps> = ({ children, isTextCentered, className }) => (
   <h6 className={cx(elHeadingMain, isTextCentered && elIsTextCentered, className)}>{children}</h6>
 )
+
+export const Heading = {
+  Main: HeadingMain,
+  SubMain: SubHeadingMain,
+  Secondary: HeadingSecondary,
+  SubSecondary: SubHeadingSecondary,
+} as { [key: string]: React.ReactNode }
+
+export default Heading
diff --git a/packages/elements-next/src/components/headings/index.ts b/packages/elements-next/src/components/headings/index.ts
index 7231cb2bbd..e1d41aca0a 100644
--- a/packages/elements-next/src/components/headings/index.ts
+++ b/packages/elements-next/src/components/headings/index.ts
@@ -1 +1 @@
-export * from './headings'
+export { default } from './headings'
diff --git a/packages/elements-next/src/components/modal/modal.mdx b/packages/elements-next/src/components/modal/modal.mdx
index 224c6bc101..4e2a6ef1c2 100644
--- a/packages/elements-next/src/components/modal/modal.mdx
+++ b/packages/elements-next/src/components/modal/modal.mdx
@@ -8,11 +8,18 @@ import { Modal } from './modal'
 import { DocsWrapper } from '@/utils/docs-wrapper'
 
 # Modal
-
+## Document
 <Props of={Modal} />
 
+## Usage
 <Playground>
-  <DocsWrapper>
-    <Modal title="example">Heading Main</Modal>
-  </DocsWrapper>
+  {() => {
+    const [isShowModal, setIsShowModal] = React.useState(false)
+    return (
+      <DocsWrapper>
+        <Modal visible={isShowModal} isCentered={true} title="example" destroyOnClose={true} onClose={() => setIsShowModal(false)}>Heading Main</Modal>
+        <button onClick={() => setIsShowModal(true)}>Show Modal</button>
+      </DocsWrapper>
+    )
+  }}
 </Playground>
diff --git a/packages/elements-next/src/components/modal/modal.tsx b/packages/elements-next/src/components/modal/modal.tsx
index 4a6b452ed7..f028bf8a9f 100644
--- a/packages/elements-next/src/components/modal/modal.tsx
+++ b/packages/elements-next/src/components/modal/modal.tsx
@@ -3,18 +3,150 @@ import Dialog from 'rc-dialog'
 import { cx } from 'linaria'
 import IDialogPropTypes from 'rc-dialog/lib/IDialogPropTypes'
 import { modalContainer, modalCentered } from './__styles__'
+import '../../../../../node_modules/rc-dialog/assets/index.css'
+
+declare type IStringOrHtmlElement = string | HTMLElement
 
 export interface ModalProps extends IDialogPropTypes {
+  /**
+   * This is property to set Modal center of the screen
+   */
   isCentered?: boolean
+  /**
+   * The dialog dom node's prefixCls
+   */
+  prefixCls?: string
+  /**
+   * Additional className for dialog
+   */
+  className?: string
+  /**
+   * Additional className for dialog wrap
+   */
+  wrapClassName?: string
+  /**
+   * Root style for dialog element.Such as width, height
+   */
+  style?: React.CSSProperties
+  zIndex?: number
+  /**
+   * Body style for dialog body element.Such as height
+   */
+  bodyStyle?: {}
+  /**
+   * Style for mask element.
+   */
+  maskStyle?: {}
+  /**
+   * Current dialog's visible status
+   */
+  visible?: boolean
+  /**
+   * part of dialog animation css class name
+   */
+  animation?: any
+  /**
+   * Part of dialog's mask animation css class name
+   */
+  maskAnimation?: any
+  /**
+   * whether support press esc to close
+   */
+  keyboard?: boolean
+  /**
+   * whether show mask
+   */
+  mask?: boolean
+  /**
+   * Children of the component
+   */
+  children?: any
+  /**
+   * called when close animation end
+   */
+  afterClose?: () => any
+  /**
+   * called when click close button or mask
+   */
+  onClose?: (e: React.SyntheticEvent<HTMLDivElement>) => any
+  /**
+   * whether show close button
+   */
+  closable?: boolean
+  /**
+   * whether click mask to close
+   */
+  maskClosable?: boolean
+  /**
+   * to unmount child compenents on onClose
+   */
+  destroyOnClose?: boolean
+  /**
+   * set pageX and pageY of current mouse(it will cause transform origin to be set).
+   */
+  mousePosition?: {
+    x: number
+    y: number
+  }
+  /**
+   * Title of the dialog
+   */
+  title?: React.ReactNode
+  /**
+   * footer of the dialog
+   */
+  footer?: React.ReactNode
+  /**
+   * dialog animation css class name
+   */
+  transitionName?: string
+  /**
+   * mask animation css class name
+   */
+  maskTransitionName?: string
+  /**
+   * Style object for wrap
+   */
+  wrapStyle?: {}
+  /**
+   * width of the modal
+   */
+  width?: number
+  /**
+   * height of the modal
+   */
+  height?: number
+  /**
+   * Props for body
+   */
+  bodyProps?: any
+  /**
+   * Props for mask
+   */
+  maskProps?: any
+  /**
+   * Props for wrap
+   */
+  wrapProps?: any
+  /**
+   * to determine where Dialog will be mounted
+   */
+  getContainer?: IStringOrHtmlElement | (() => IStringOrHtmlElement) | false
+  /**
+   * specific the close icon.
+   */
+  closeIcon?: React.ReactNode
+  /**
+   * Create dialog dom node before dialog first show
+   */
+  forceRender?: boolean
+  /**
+   * focus trigger element when dialog closed
+   */
+  focusTriggerAfterClose?: boolean
 }
 
-export const Modal: React.FC<ModalProps> = ({
-  children,
-  className,
-  wrapClassName,
-  isCentered = false,
-  ...restProps
-}) => {
+export const Modal: React.FC<ModalProps> = ({ children, className, wrapClassName, isCentered, ...restProps }) => {
   return (
     <Dialog
       {...restProps}
@@ -26,4 +158,20 @@ export const Modal: React.FC<ModalProps> = ({
   )
 }
 
+Modal.defaultProps = {
+  prefixCls: 'rc-dialog',
+  style: {},
+  bodyStyle: {},
+  maskStyle: {},
+  visible: false,
+  closable: true,
+  mask: true,
+  maskClosable: true,
+  keyboard: true,
+  destroyOnClose: false,
+  forceRender: false,
+  focusTriggerAfterClose: true,
+  isCentered: false,
+}
+
 export default React.memo(Modal)