diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index e2b95689a6..b680d9d931 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -11,6 +11,18 @@ declare module '@docusaurus/theme-classic' {
};
}
+declare module '@theme/Admonition' {
+ import type {ReactNode} from 'react';
+
+ export interface Props {
+ readonly children: ReactNode;
+ readonly type: 'note' | 'tip' | 'danger' | 'info' | 'caution';
+ readonly icon?: ReactNode;
+ readonly title?: string;
+ }
+ export default function Admonition(props: Props): JSX.Element;
+}
+
declare module '@theme/AnnouncementBar' {
const AnnouncementBar: () => JSX.Element | null;
export default AnnouncementBar;
diff --git a/packages/docusaurus-theme-classic/src/theme/Admonition/index.tsx b/packages/docusaurus-theme-classic/src/theme/Admonition/index.tsx
new file mode 100644
index 0000000000..137e03574e
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/Admonition/index.tsx
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import {Props} from '@theme/Admonition';
+
+const icons = {
+ note: (
+
+ ),
+ tip: (
+
+ ),
+ danger: (
+
+ ),
+ info: (
+
+ ),
+ caution: (
+
+ ),
+};
+
+const ifmClassNames = {
+ note: 'secondary',
+ tip: 'success',
+ danger: 'danger',
+ info: 'info',
+ caution: 'warning',
+};
+
+export default function Admonition({
+ children,
+ type,
+ title = type,
+ icon = icons[type],
+}: Props): JSX.Element {
+ return (
+
+
+
+ {icon}
+ {title}
+
+
+
{children}
+
+ );
+}
diff --git a/website/docs/guides/markdown-features/markdown-features-admonitions.mdx b/website/docs/guides/markdown-features/markdown-features-admonitions.mdx
index 7f14c4726d..d2a0cc1aa3 100644
--- a/website/docs/guides/markdown-features/markdown-features-admonitions.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-admonitions.mdx
@@ -143,3 +143,43 @@ import TabItem from '@theme/TabItem';
```
:::
+
+## Usage in JSX
+
+Outside of Markdown, you can use the `@theme/Admonitions` component to get the same output.
+
+```jsx title="MyReactPage.jsx"
+import Admonition from '@theme/Admonitions';
+
+export default function MyReactPage() {
+ return (
+
+
+
Some information
+
+
+ );
+}
+```
+
+The types that are accepted are the same as above: `note`, `tip`, `danger`, `info`, `caution`. Optionally, you can specify an icon by passing a JSX element or a string, or a title:
+
+```jsx title="MyReactPage.jsx"
+
+
+ Use plugins to introduce shorter syntax for the most commonly used JSX
+ elements in your project.
+
+
+```
+
+```mdx-code-block
+import Admonition from '@theme/Admonition';
+import BrowserWindow from '@site/src/components/BrowserWindow';
+
+
+
+
Use plugins to introduce shorter syntax for the most commonly used JSX elements in your project.