diff --git a/src/Alert/demos/Playground.tsx b/src/Alert/demos/Playground.tsx
new file mode 100644
index 0000000..35564d6
--- /dev/null
+++ b/src/Alert/demos/Playground.tsx
@@ -0,0 +1,35 @@
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import type { AlertProps } from '@yuntijs/ui';
+import { Alert } from '@yuntijs/ui';
+
+export default () => {
+  const store = useCreateStore();
+  const control: AlertProps | any = useControls(
+    {
+      message:
+        'Info Description Info Description Info Description Info Description Info Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info Description',
+      showIcon: true,
+      iconPlacement: {
+        options: ['top', 'center'],
+        value: 'center',
+      },
+      type: {
+        options: ['success', 'info', 'warning', 'error'],
+        value: 'info',
+      },
+      bordered: {
+        options: ['dashed', 'solid', 'none'],
+        value: 'dashed',
+      },
+      closable: false,
+      description: '',
+      banner: false,
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store}>
+      <Alert {...control} />
+    </StoryBook>
+  );
+};
diff --git a/src/Alert/demos/index.tsx b/src/Alert/demos/index.tsx
new file mode 100644
index 0000000..ef53a9e
--- /dev/null
+++ b/src/Alert/demos/index.tsx
@@ -0,0 +1,10 @@
+import { Alert } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <Alert
+      message="Info Description Info Description Info Description Info Description Info Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info Description"
+      showIcon
+    />
+  );
+};
diff --git a/src/Alert/index.md b/src/Alert/index.md
new file mode 100644
index 0000000..f0154b8
--- /dev/null
+++ b/src/Alert/index.md
@@ -0,0 +1,30 @@
+---
+nav: Components
+group: Feedback
+title: Alert
+description: Display warning messages that require attention.
+---
+
+## Usage
+
+based on antd [Alert](https://ant.design/components/alert-cn/) component.
+
+### Simple usage
+
+```jsx | pure
+import { Alert } from '@yuntijs/ui';
+
+export default () => {
+  return <Alert message="Info Description" showIcon />;
+};
+```
+
+<code src="./demos/index.tsx" center></code>
+
+## Playground
+
+<code src="./demos/Playground.tsx" nopadding></code>
+
+## APIs
+
+<API></API>
diff --git a/src/Alert/index.tsx b/src/Alert/index.tsx
new file mode 100644
index 0000000..b5c9243
--- /dev/null
+++ b/src/Alert/index.tsx
@@ -0,0 +1,27 @@
+import { Alert as AntdAlert, type AlertProps as AntdAlertProps } from 'antd';
+import React from 'react';
+
+import { useStyles } from './style';
+
+export interface CustomAlertProps {
+  /** position of icon */
+  iconPlacement?: 'top' | 'center';
+  /** border type of Alert */
+  bordered?: 'dashed' | 'solid' | 'none';
+}
+export interface AlertProps extends AntdAlertProps, CustomAlertProps {}
+
+type ComposedAlertProps = React.FC<AlertProps> & {
+  ErrorBoundary: typeof AntdAlert.ErrorBoundary;
+};
+
+export const Alert: ComposedAlertProps = props => {
+  const { iconPlacement = 'center', bordered = 'dashed', className, ...otherProps } = props;
+
+  const { styles, cx } = useStyles({ iconPlacement, bordered });
+
+  return <AntdAlert {...otherProps} className={cx(styles.custom, className)} />;
+};
+Alert.ErrorBoundary = AntdAlert.ErrorBoundary;
+
+export default Alert;
diff --git a/src/Alert/style.ts b/src/Alert/style.ts
new file mode 100644
index 0000000..2b8be9c
--- /dev/null
+++ b/src/Alert/style.ts
@@ -0,0 +1,27 @@
+import { createStyles } from 'antd-style';
+
+import { CustomAlertProps } from './index';
+
+export const useStyles = createStyles(
+  ({ css }, { iconPlacement = 'center', bordered = 'dashed' }: CustomAlertProps) => {
+    return {
+      custom: css`
+        border-style: ${bordered} !important;
+        ${iconPlacement === 'center' &&
+        css`
+          display: flex;
+          align-items: center;
+        `}
+        ${iconPlacement === 'top' &&
+        css`
+          display: flex;
+          align-items: flex-start !important;
+          &-icon {
+            margin-top: 5px;
+          }
+        `}
+      `,
+    };
+  },
+  { hashPriority: 'low' }
+);
diff --git a/src/index.ts b/src/index.ts
index 64c1fc5..e3f8a4e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,5 +5,22 @@ export * from './MonacoEditor';
 export * from './SliderInput';
 export * from './Tree';
 
+// ~ custom antd
+export * from './Alert';
+
+// ~ antd
+export {
+  Affix,
+  type AffixProps,
+  Anchor,
+  type AnchorProps,
+  App,
+  type AppProps,
+  AutoComplete,
+  type AutoCompleteProps,
+  Avatar,
+  type AvatarProps,
+} from 'antd';
+
 // ~ antd-style
 export { useResponsive, useTheme, useThemeMode } from 'antd-style';