diff --git a/apps/docs/source.config.ts b/apps/docs/source.config.ts
index e36d365353..dc6a9c14ae 100644
--- a/apps/docs/source.config.ts
+++ b/apps/docs/source.config.ts
@@ -1,27 +1,27 @@
-import remarkDirective from 'remark-directive';
+import remarkDirective from "remark-directive";
 import {
   remarkDirectiveAdmonition,
   remarkMdxFiles,
-} from 'fumadocs-core/mdx-plugins';
-import { remarkImage } from 'fumadocs-core/mdx-plugins';
+} from "fumadocs-core/mdx-plugins";
+import { remarkImage } from "fumadocs-core/mdx-plugins";
 import {
   defineConfig,
   defineDocs,
   frontmatterSchema,
   metaSchema,
-} from 'fumadocs-mdx/config';
-import lastModified from 'fumadocs-mdx/plugins/last-modified';
-import { z } from 'zod';
-import convert from 'npm-to-yarn';
+} from "fumadocs-mdx/config";
+import lastModified from "fumadocs-mdx/plugins/last-modified";
+import { z } from "zod";
+import convert from "npm-to-yarn";
 
 // You can customise Zod schemas for frontmatter and `meta.json` here
 // see https://fumadocs.dev/docs/mdx/collections
 export const docs = defineDocs({
-  dir: 'content/docs',
+  dir: "content/docs",
   docs: {
     schema: frontmatterSchema.extend({
       image: z.string().optional(),
-      badge: z.enum(['early-access', 'deprecated', 'preview']).optional(),
+      badge: z.enum(["early-access", "deprecated", "preview"]).optional(),
       url: z.string(),
       metaTitle: z.string(),
       metaDescription: z.string(),
@@ -37,11 +37,11 @@ export const docs = defineDocs({
 
 // v6 docs collection
 export const docsV6 = defineDocs({
-  dir: 'content/docs.v6',
+  dir: "content/docs.v6",
   docs: {
     schema: frontmatterSchema.extend({
       image: z.string().optional(),
-      badge: z.enum(['early-access', 'deprecated', 'preview']).optional(),
+      badge: z.enum(["early-access", "deprecated", "preview"]).optional(),
       url: z.string(),
       metaTitle: z.string().optional(),
       metaDescription: z.string().optional(),
@@ -60,7 +60,22 @@ export default defineConfig({
   mdxOptions: {
     remarkPlugins: [
       remarkDirective,
-      remarkDirectiveAdmonition,
+      [
+        remarkDirectiveAdmonition,
+        {
+          types: {
+            note: "info",
+            tip: "info",
+            info: "info",
+            warn: "warning",
+            warning: "warning",
+            danger: "error",
+            success: "success",
+            ppg: "ppg",
+            error: "error",
+          },
+        },
+      ],
       [remarkImage, { useImport: false }],
       remarkMdxFiles,
     ],
@@ -69,19 +84,19 @@ export default defineConfig({
     },
     remarkNpmOptions: {
       persist: {
-        id: 'package-manager',
+        id: "package-manager",
       },
       packageManagers: [
-        { command: (cmd: string) => convert(cmd, 'npm'), name: 'npm' },
-        { command: (cmd: string) => convert(cmd, 'pnpm'), name: 'pnpm' },
-        { command: (cmd: string) => convert(cmd, 'yarn'), name: 'yarn' },
+        { command: (cmd: string) => convert(cmd, "npm"), name: "npm" },
+        { command: (cmd: string) => convert(cmd, "pnpm"), name: "pnpm" },
+        { command: (cmd: string) => convert(cmd, "yarn"), name: "yarn" },
         {
           command: (cmd: string) => {
-            const converted = convert(cmd, 'bun');
+            const converted = convert(cmd, "bun");
             if (!converted) return undefined;
-            return converted.replace(/^bun x /, 'bunx --bun ');
+            return converted.replace(/^bun x /, "bunx --bun ");
           },
-          name: 'bun',
+          name: "bun",
         },
       ],
     },
diff --git a/apps/docs/src/mdx-components.tsx b/apps/docs/src/mdx-components.tsx
index 3c8c3b1e5d..03c7f6cf39 100644
--- a/apps/docs/src/mdx-components.tsx
+++ b/apps/docs/src/mdx-components.tsx
@@ -27,10 +27,13 @@ import {
   TableCell,
   TableCaption,
   Input,
+  Alert,
 } from "@prisma-docs/eclipse";
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
-  const mdxComponents = {
+  const pageContext = (components as any)?._pageContext;
+
+  return {
     ...(icons as unknown as MDXComponents),
     ...defaultMdxComponents,
     // Fumadocs tabs for manual usage (with items prop)
@@ -50,11 +53,6 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     APIPage,
     img: (props: any) => <ImageZoom {...(props as any)} />,
     input: (props: any) => <Input {...props} />,
-  };
-
-  const pageContext = (components as any)?._pageContext;
-
-  return {
     ...mdxComponents,
     pre: ({ ref: _ref, ...props }) => (
       <CodeBlock {...props}>
@@ -69,5 +67,29 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     th: ({ ref: _ref, ...props }) => <TableHead {...props} />,
     td: ({ ref: _ref, ...props }) => <TableCell {...props} />,
     caption: ({ ref: _ref, ...props }) => <TableCaption {...props} />,
+    // Override Fumadocs Callout components with Eclipse Alert for admonitions (:::ppg, :::error, :::success, :::warning)
+    CalloutTitle: ({ children }: any) => <>{children}</>,
+    CalloutDescription: ({ children }: any) => <>{children}</>,
+    CalloutContainer: ({ type, children, icon, ...props }: any) => {
+      const variantMap: Record<
+        string,
+        "ppg" | "error" | "success" | "warning"
+      > = {
+        ppg: "ppg",
+        error: "error",
+        success: "success",
+        warning: "warning",
+        info: "ppg",
+        note: "ppg",
+        tip: "success",
+        danger: "error",
+      };
+
+      return (
+        <Alert variant={variantMap[type] || "ppg"} icon={icon} {...props}>
+          {children}
+        </Alert>
+      );
+    },
   };
 }
diff --git a/apps/eclipse/content/design-system/molecules/alert.mdx b/apps/eclipse/content/design-system/molecules/alert.mdx
new file mode 100644
index 0000000000..ff9757893f
--- /dev/null
+++ b/apps/eclipse/content/design-system/molecules/alert.mdx
@@ -0,0 +1,369 @@
+---
+title: Alert
+description: A versatile alert component for displaying important messages and contextual information with support for different severity levels and custom icons.
+---
+
+import { Alert } from "@prisma-docs/eclipse";
+import { Terminal, AlertCircle, CheckCircle2, AlertTriangle } from "lucide-react";
+
+### Usage
+
+**Basic Alert**
+
+The Alert component displays important information with a default info icon and the PPG variant.
+
+```tsx
+import { Alert } from "@prisma-docs/eclipse";
+
+export function BasicAlert() {
+  return (
+    <Alert>
+      This is a basic alert message with regular content.
+    </Alert>
+  );
+}
+```
+
+<div className="not-prose my-6">
+  <p className="text-sm font-semibold mb-4">Live Example:</p>
+</div>
+
+<Alert>
+  This is a basic alert message with regular content.
+</Alert>
+
+**Alert Variants**
+
+The Alert component supports four variants: `ppg`, `error`, `success`, and `warning`.
+
+```tsx
+import { Alert } from "@prisma-docs/eclipse";
+
+export function AlertVariants() {
+  return (
+    <>
+      <Alert variant="ppg">
+        PPG variant - for general information and tips.
+      </Alert>
+
+      <Alert variant="success">
+        Success variant - for positive confirmations.
+      </Alert>
+
+      <Alert variant="warning">
+        Warning variant - for important notices.
+      </Alert>
+
+      <Alert variant="error">
+        Error variant - for errors and critical information.
+      </Alert>
+    </>
+  );
+}
+```
+
+<div className="not-prose my-6 space-y-4">
+  <p className="text-sm font-semibold mb-4">Live Examples:</p>
+
+  <Alert variant="ppg">
+    PPG variant - for general information and tips.
+  </Alert>
+
+  <Alert variant="success">
+    Success variant - for positive confirmations.
+  </Alert>
+
+  <Alert variant="warning">
+    Warning variant - for important notices.
+  </Alert>
+
+  <Alert variant="error">
+    Error variant - for errors and critical information.
+  </Alert>
+</div>
+
+**Custom Icons**
+
+You can customize the icon by passing a custom icon component or pass `null` to hide the icon.
+
+```tsx
+import { Alert } from "@prisma-docs/eclipse";
+import { Terminal, AlertCircle, CheckCircle2, AlertTriangle } from "lucide-react";
+
+export function CustomIconAlerts() {
+  return (
+    <>
+      <Alert variant="ppg" icon={<Terminal className="h-4 w-4" />}>
+        Alert with a custom terminal icon.
+      </Alert>
+
+      <Alert variant="error" icon={<AlertCircle className="h-4 w-4" />}>
+        Alert with a custom error icon.
+      </Alert>
+
+      <Alert variant="success" icon={<CheckCircle2 className="h-4 w-4" />}>
+        Alert with a custom success icon.
+      </Alert>
+
+      <Alert variant="warning" icon={<AlertTriangle className="h-4 w-4" />}>
+        Alert with a custom warning icon.
+      </Alert>
+
+      <Alert variant="ppg" icon={null}>
+        Alert without an icon.
+      </Alert>
+    </>
+  );
+}
+```
+
+<div className="not-prose my-6 space-y-4">
+  <p className="text-sm font-semibold mb-4">Live Examples:</p>
+
+  <Alert variant="ppg" icon={<Terminal className="h-4 w-4" />}>
+    Alert with a custom terminal icon.
+  </Alert>
+
+  <Alert variant="error" icon={<AlertCircle className="h-4 w-4" />}>
+    Alert with a custom error icon.
+  </Alert>
+
+  <Alert variant="success" icon={<CheckCircle2 className="h-4 w-4" />}>
+    Alert with a custom success icon.
+  </Alert>
+
+  <Alert variant="warning" icon={<AlertTriangle className="h-4 w-4" />}>
+    Alert with a custom warning icon.
+  </Alert>
+
+  <Alert variant="ppg" icon={null}>
+    Alert without an icon.
+  </Alert>
+</div>
+
+**Rich MDX Content**
+
+The Alert component accepts and renders any MDX content including headings, paragraphs, lists, links, and code.
+
+```tsx
+import { Alert } from "@prisma-docs/eclipse";
+
+export function RichContentAlert() {
+  return (
+    <Alert variant="ppg">
+      **Getting Started**
+      
+      Follow these steps to get started:
+      
+      1. Install the package: `npm install @prisma/client`
+      2. Initialize Prisma: `npx prisma init`
+      3. Define your schema and run migrations
+      
+      For more information, visit the [documentation](https://prisma.io/docs).
+    </Alert>
+  );
+}
+```
+
+:::ppg
+**Getting Started**
+
+Follow these steps to get started:
+
+ 1. Install the package: `npm install @prisma/client`
+ 2. Initialize Prisma: `npx prisma init`
+ 3. Define your schema and run migrations
+
+For more information, visit the [documentation](https://prisma.io/docs).
+:::
+
+**Complex Content Examples**
+
+```tsx
+import { Alert } from "@prisma-docs/eclipse";
+
+export function ComplexAlerts() {
+  return (
+    <>
+      <Alert variant="warning">
+        ### Important Update
+        
+        This feature will be deprecated in version 6.0. Please migrate to the new API:
+        
+        - Old: `prisma.user.findMany()`
+        - New: `prisma.user.findMany({ where: {} })`
+      </Alert>
+
+      <Alert variant="error">
+        **Connection Error**
+        
+        Unable to connect to the database. Please check:
+        
+        - Database credentials in `.env`
+        - Database server is running
+        - Network connectivity
+      </Alert>
+
+      <Alert variant="success">
+        Your migration was successful! The following changes were applied:
+        
+        - Created table `User`
+        - Added index on `email` column
+        - Updated foreign key constraints
+      </Alert>
+    </>
+  );
+}
+```
+
+<div className="not-prose my-6 space-y-4">
+  <p className="text-sm font-semibold mb-4">Live Examples:</p>
+
+  <Alert variant="warning">
+    <div>
+      <h3 className="text-base font-semibold mb-2">Important Update</h3>
+      <p className="mb-2">This feature will be deprecated in version 6.0. Please migrate to the new API:</p>
+      <ul className="list-disc list-inside space-y-1">
+        <li>Old: <code>prisma.user.findMany()</code></li>
+        <li>New: <code>prisma.user.findMany({`{ where: {} }`})</code></li>
+      </ul>
+    </div>
+  </Alert>
+
+  <Alert variant="error">
+    <div>
+      <p className="font-bold mb-2">Connection Error</p>
+      <p className="mb-2">Unable to connect to the database. Please check:</p>
+      <ul className="list-disc list-inside space-y-1">
+        <li>Database credentials in <code>.env</code></li>
+        <li>Database server is running</li>
+        <li>Network connectivity</li>
+      </ul>
+    </div>
+  </Alert>
+
+  <Alert variant="success">
+    <div>
+      <p className="mb-2">Your migration was successful! The following changes were applied:</p>
+      <ul className="list-disc list-inside space-y-1">
+        <li>Created table <code>User</code></li>
+        <li>Added index on <code>email</code> column</li>
+        <li>Updated foreign key constraints</li>
+      </ul>
+    </div>
+  </Alert>
+</div>
+
+### Alert Props
+
+- `variant` - Visual style: `"ppg"`, `"error"`, `"success"`, or `"warning"` (optional, default: "ppg")
+- `icon` - Custom icon component or `null` to hide icon (ReactNode | null, optional, default: InfoIcon)
+- `className` - Additional CSS classes (optional)
+- `children` - Alert content (any valid MDX/React content) (ReactNode, required)
+- Standard HTML div attributes
+
+### Features
+
+- ✅ Four semantic variants: ppg, error, success, warning
+- ✅ Default info icon with customization support
+- ✅ Accepts any MDX content (headings, paragraphs, lists, code, etc.)
+- ✅ Supports rich formatting and links
+- ✅ Accessible with proper ARIA roles
+- ✅ Dark mode support for all variants
+- ✅ Fully customizable with className prop
+- ✅ Built with class-variance-authority for type-safe variants
+
+### Best Practices
+
+- Use `variant="ppg"` for general information, tips, and product-specific notes
+- Use `variant="success"` for positive confirmations and successful operations
+- Use `variant="warning"` for important notices that require attention
+- Use `variant="error"` for errors, failures, and critical information
+- Choose icons that match the message type and variant
+- Pass `icon={null}` if the message is self-explanatory without an icon
+- Use headings (`##`, `###`) to structure complex alert content
+- Include actionable information or next steps when appropriate
+- Keep alerts concise but informative
+- Don't overuse alerts - reserve them for important information
+
+### Common Use Cases
+
+The Alert component is perfect for:
+
+- **Documentation callouts** - Highlight important information in docs
+- **Feature announcements** - Announce new or beta features
+- **Deprecation notices** - Warn about deprecated features
+- **Prerequisites** - List requirements before proceeding
+- **Success confirmations** - Confirm successful actions or operations
+- **Error messages** - Display error details and troubleshooting steps
+- **Warning messages** - Alert users to important considerations
+- **Tips and notes** - Provide helpful tips and additional context
+
+### MDX Admonition Syntax
+
+This Alert component is automatically used for MDX admonition blocks when configured in your MDX components. The following syntaxes are supported:
+
+```mdx
+:::ppg
+This is a PPG alert using MDX admonition syntax.
+
+## You can use any MDX content
+
+Including lists, code, and more!
+:::
+
+:::error
+This is an error alert.
+:::
+
+:::success
+This is a success alert.
+:::
+
+:::warning
+This is a warning alert.
+:::
+
+:::info
+Maps to PPG variant.
+:::
+
+:::note
+Maps to PPG variant.
+:::
+
+:::tip
+Maps to success variant.
+:::
+
+:::danger
+Maps to error variant.
+:::
+```
+
+
+
+<div className="not-prose my-6 space-y-4">
+  <p className="text-sm font-semibold mb-4">Live Example:</p>
+</div>
+
+:::ppg
+
+This demonstrates how the `:::ppg` syntax renders as an Alert component.
+
+You can include:
+
+- Lists
+- **Bold text**
+- `inline code`
+- And more!
+
+:::
+
+### Accessibility
+
+- The Alert component includes `role="alert"` for screen readers
+- Icons are decorative and don't convey meaning alone - always include descriptive text
+- Color is not the only indicator of alert type (icons and context provide additional cues)
+- All variants maintain appropriate color contrast ratios
+- Alert content is keyboard accessible and screen reader friendly
diff --git a/apps/eclipse/content/design-system/molecules/meta.json b/apps/eclipse/content/design-system/molecules/meta.json
index 68e73f73a9..af3ef580f4 100644
--- a/apps/eclipse/content/design-system/molecules/meta.json
+++ b/apps/eclipse/content/design-system/molecules/meta.json
@@ -4,6 +4,7 @@
   "icon": "Component",
   "pages": [
     "accordion",
+    "alert",
     "banner",
     "breadcrumb",
     "card",
diff --git a/packages/eclipse/src/components/alert.tsx b/packages/eclipse/src/components/alert.tsx
new file mode 100644
index 0000000000..92e002cc9d
--- /dev/null
+++ b/packages/eclipse/src/components/alert.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CircleAlert } from "lucide-react";
+
+import { cn } from "../lib/cn";
+
+const alertVariants = cva(
+  "relative w-full rounded-md border px-4 py-4 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg]:w-5 [&>svg]:h-5 [&>*:not(svg)]:pl-7 alert-admonition",
+  {
+    variants: {
+      variant: {
+        ppg: "bg-background-ppg text-foreground-ppg border-none [&>svg]:text-foreground-ppg",
+        error:
+          "bg-background-error border-none text-foreground-error [&>svg]:text-foreground-error",
+        success:
+          "bg-background-success border-none text-foreground-success [&>svg]:text-foreground-success",
+        warning:
+          "bg-background-warning border-none text-foreground-warning [&>svg]:text-foreground-warning",
+      },
+    },
+    defaultVariants: {
+      variant: "ppg",
+    },
+  },
+);
+
+type AlertProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof alertVariants> & {
+    icon?: React.ReactNode;
+  };
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, icon, children, ...props }, ref) => {
+    const IconComponent =
+      icon !== undefined ? icon : <CircleAlert className="h-4 w-4" />;
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+      >
+        {IconComponent}
+        <div className="[&>*]:first:mt-0 [&>*]:last:mb-0 [& strong]:text-inherit">
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+Alert.displayName = "Alert";
+
+export { Alert };
diff --git a/packages/eclipse/src/components/index.ts b/packages/eclipse/src/components/index.ts
index 5b2d1350d8..c67ad4b8f6 100644
--- a/packages/eclipse/src/components/index.ts
+++ b/packages/eclipse/src/components/index.ts
@@ -137,3 +137,5 @@ export {
   PaginationEllipsis,
   PaginationInput,
 } from "./pagination";
+
+export { Alert } from "./alert";