diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
new file mode 100644
index 00000000..61792d0c
--- /dev/null
+++ b/src/components/Alert.tsx
@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+interface AlertProps {
+  variant?: 'outline' | 'dash' | 'soft';
+  color?: 'info' | 'success' | 'warning' | 'error';
+  children?: ReactNode;
+  className?: string;
+}
+
+const Alert = ({ children, variant, color, className }: AlertProps) => {
+  const alertBaseClassName = cn('alert', {
+    'alert-soft': variant === 'soft',
+    'alert-outline': variant === 'outline',
+    'alert-dash': variant === 'dash',
+
+    'alert-info': color === 'info',
+    'alert-success': color === 'success',
+    'alert-warning': color === 'warning',
+    'alert-error': color === 'error',
+  });
+
+  return <div className={cn(alertBaseClassName, className)}>{children}</div>;
+};
+
+export default Alert;