diff --git a/src/BootstrapBlazor.Shared/Samples/Dialogs.razor b/src/BootstrapBlazor.Shared/Samples/Dialogs.razor
index dafd97533d7511394f59280b2f3635c2e370ec63..d7055341bb51a36f80105a44e280cae747c71fdb 100644
--- a/src/BootstrapBlazor.Shared/Samples/Dialogs.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Dialogs.razor
@@ -4,6 +4,27 @@
 
 <h4>通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互</h4>
 
+<p>组件使用介绍：</p>
+
+<p class="code-label">1. 注入服务 <code>DialogService</code></p>
+<Pre>@@inject DialogService DialogService</Pre>
+<Pre>[Inject]
+[NotNull]
+private DialogService? DialogService { get; set; }
+</Pre>
+<p class="code-label">2. 调用其实例 <code>api</code></p>
+<Pre>var op = new DialogOption()
+{
+    Title = "数据查询窗口",
+    ShowFooter = false,
+    BodyContext = DataPrimaryId
+};
+op.Component = BootstrapDynamicComponent.CreateComponent&lt;DataDialogComponent&gt;(new Dictionary&lt;string, object?&gt;
+{
+    [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
+});
+await DialogService.Show(op);</Pre>
+
 <DemoBlock Title="基本用法" Introduction="通过设置 <code>DialogOption</code> 属性对模态框进行基本属性设置" Name="Keyboard">
     <div>
         <p>通过设置 <code>DialogOption</code> <code>IsKeyboard</code> 参数，开启弹窗是否支持 <kbd>ESC</kbd>，请点击后面按钮设置后再点击 <b>弹窗</b> 按钮测试效果</p>
diff --git a/src/BootstrapBlazor.Shared/Samples/Messages.razor b/src/BootstrapBlazor.Shared/Samples/Messages.razor
index 3d37168edf95eb67ab0197fbe62f060681298f99..707f69a4b9b4b1deedf4a1df27cfd93dc268188b 100644
--- a/src/BootstrapBlazor.Shared/Samples/Messages.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Messages.razor
@@ -4,6 +4,20 @@
 
 <h4>常用于主动操作后的反馈提示。与 Toast 的区别是后者更多用于系统级通知的被动提醒</h4>
 
+<p>组件使用介绍：</p>
+
+<p class="code-label">1. 注入服务 <code>MessageService</code></p>
+<Pre>@@inject MessageService MessageService</Pre>
+<Pre>[Inject]
+[NotNull]
+private MessageService? MessageService { get; set; }
+</Pre>
+<p class="code-label">2. 调用其实例 <code>api</code></p>
+<Pre>await MessageService.Show(new MessageOption()
+{
+    Content = "这是一条提示消息"
+});</Pre>
+
 <DemoBlock Title="基础用法" Introduction="从顶部出现，4 秒后自动消失" Name="Normal">
     <button class="btn btn-primary" @onclick="@ShowMessage">打开消息提示</button>
 </DemoBlock>
diff --git a/src/BootstrapBlazor.Shared/Samples/SweetAlerts.razor b/src/BootstrapBlazor.Shared/Samples/SweetAlerts.razor
index 7a34d55a69c51cab9bb4e642619d94342147109b..87521a9581256acd586ce978a0b3648d4f7a9a83 100644
--- a/src/BootstrapBlazor.Shared/Samples/SweetAlerts.razor
+++ b/src/BootstrapBlazor.Shared/Samples/SweetAlerts.razor
@@ -4,6 +4,24 @@
 
 <h4>模态对话框，多用于动作过程中进行询问后继续，或者显示执行结果</h4>
 
+<p>组件使用介绍：</p>
+
+<p class="code-label">1. 注入服务 <code>SwalService</code></p>
+<Pre>@@inject SwalService SwalService</Pre>
+<Pre>[Inject]
+[NotNull]
+private SwalService? SwalService { get; set; }
+</Pre>
+<p class="code-label">2. 调用其实例 <code>api</code></p>
+<Pre>var op = new SwalOption()
+{
+    Category = SwalCategory.Success,
+    Title = "我是 Title",
+    Content = "我是 Content",
+    ShowClose = false
+};
+await SwalService.Show(op);</Pre>
+
 <DemoBlock Title="基础用法" Introduction="通过注入服务调用 <code>Swal</code> 来弹出一个对话框" Name="Normal">
     <div class="row g-3">
         <div class="col-4 align-self-center text-center">
diff --git a/src/BootstrapBlazor.Shared/Samples/Toasts.razor b/src/BootstrapBlazor.Shared/Samples/Toasts.razor
index f3ace85e200caaf3308a481483ad2871c18671b9..de9d267117dc1f081b3aca1f2284b4fd50fd11bc 100644
--- a/src/BootstrapBlazor.Shared/Samples/Toasts.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Toasts.razor
@@ -6,6 +6,17 @@
 
 <h4>提供轻量级 Toast 弹窗</h4>
 
+<p>组件使用介绍：</p>
+
+<p class="code-label">1. 注入服务 <code>ToastService</code></p>
+<Pre>@@inject ToastService ToastService</Pre>
+<Pre>[Inject]
+[NotNull]
+private ToastService? ToastService { get; set; }
+</Pre>
+<p class="code-label">2. 调用其实例 <code>api</code></p>
+<Pre>await ToastService.Success("Title", "Content", autoHide: true);</Pre>
+
 <DemoBlock Title="基础用法" Introduction="用户操作时，右下角给予适当的提示信息" Name="Normal">
     <div class="row g-3 overflow-hidden">
         <div class="col-12 col-lg-6 col-xl-3">
@@ -90,14 +101,6 @@
 }
 </Pre>
 
-<Tips class="mt-3">
-    <p>
-        需要在使用本组件的页面中内置 <code>Toast</code> 组件，或者在 <code>MainLayout</code> 主布局组件中内置，示例代码如下：
-    </p>
-</Tips>
-
-<Pre>&lt;Toast /&gt;</Pre>
-
 <Tips>特别说明: 可以通过 <code>BootstrapBlazorOptions</code> 全局统一配置参数可以设置整个系统内的 <code>Toast</code> 组件 <code>Delay</code> 参数值</Tips>
 
 <p>通过配置文件 <code>appsetting.json</code> 文件配置，适用于 <code>Server-Side App</code></p>