UI: Include Callout as default MDX component

.changeset/popular-squids-repair.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': minor
+---
+
+Include `Callout` as default MDX component

apps/docs/content/docs/ui/markdown.mdx

@@ -94,11 +94,9 @@ A [`Card`](/docs/ui/mdx/card) component is included by default. Similar to links
 
 ### Callouts
 
-Useful for adding tips/warnings, you have to import them.
+Useful for adding tips/warnings, it is included by default.
 
 ```mdx
-import { Callout } from 'fumadocs-ui/components/callout';
-
 <Callout title="Title" type="info">
   Hello World
 </Callout>

packages/ui/src/components/callout.tsx

@@ -11,6 +11,10 @@ type CalloutProps = Omit<
    * @defaultValue info
    */
   type?: 'info' | 'warn' | 'error';
+
+  /**
+   * Force an icon
+   */
   icon?: ReactNode;
 };
 
@@ -20,7 +24,7 @@ export const Callout = forwardRef<HTMLDivElement, CalloutProps>(
       <div
         ref={ref}
         className={cn(
-          'my-6 flex flex-row gap-2 rounded-lg border bg-fd-card p-3 text-sm text-fd-muted-foreground shadow-md',
+          'my-6 flex flex-row gap-2 rounded-lg border bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md',
           className,
         )}
         {...props}
@@ -35,13 +39,11 @@ export const Callout = forwardRef<HTMLDivElement, CalloutProps>(
               <AlertOctagon className="size-5 fill-red-500 text-fd-card" />
             ),
           }[type]}
-        <div className="w-0 flex-1">
-          {title ? (
-            <div className="mb-2 font-medium text-fd-card-foreground">
-              {title}
-            </div>
-          ) : null}
-          <div className="prose-no-margin">{children}</div>
+        <div className="min-w-0 flex-1">
+          {title ? <p className="mb-2 font-medium">{title}</p> : null}
+          <div className="text-fd-muted-foreground prose-no-margin">
+            {children}
+          </div>
         </div>
       </div>
     );

packages/ui/src/mdx.tsx

@@ -9,6 +9,7 @@ import type {
 import NextImage from 'next/image';
 import type { ImageProps } from 'next/image';
 import { Card, Cards } from '@/components/card';
+import { Callout } from '@/components/callout';
 import { Heading } from '@/components/heading';
 import { defaultImageSizes } from '@/utils/shared';
 
@@ -53,6 +54,7 @@ const defaultMdxComponents = {
     <Heading as="h6" {...props} />
   ),
   table: Table,
+  Callout,
 };
 
 /**