diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
index 025dd736245..7e4cd76ca5e 100644
--- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
+++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -55,6 +55,7 @@
     <PackageReference Include="BootstrapBlazor.Player" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.RDKit" Version="9.0.2" />
     <PackageReference Include="BootstrapBlazor.SignaturePad" Version="9.0.0" />
+    <PackageReference Include="BootstrapBlazor.SmilesDrawer" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.Sortable" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.Splitting" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.SvgEditor" Version="9.0.2" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/SmilesDrawers.razor b/src/BootstrapBlazor.Server/Components/Samples/SmilesDrawers.razor
new file mode 100644
index 00000000000..0c073114d5e
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/SmilesDrawers.razor
@@ -0,0 +1,23 @@
+@page "/smiles-drawer"
+@inject IStringLocalizer<SmilesDrawers> Localizer
+
+<h3>@Localizer["SmilesDrawerTitle"]</h3>
+
+<h4>@Localizer["SmilesDrawerDescription"]</h4>
+
+<PackageTips Name="BootstrapBlazor.SmilesDrawer" />
+
+<DemoBlock Title="@Localizer["SmilesDrawerNormalTitle"]"
+           Introduction="@Localizer["SmilesDrawerNormalIntro"]"
+           Name="Normal">
+    <SmilesDrawer Smiles="CC(=O)Oc1ccccc1C(=O)O"></SmilesDrawer>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["SmilesDrawerSizeTitle"]"
+           Introduction="@Localizer["SmilesDrawerSizeIntro"]"
+           Name="Size">
+    <section ignore>
+        <Button Text="Update Size" OnClick="OnClickUpdateSize"></Button>
+    </section>
+    <SmilesDrawer Smiles="CC(=O)Oc1ccccc1C(=O)O" Options="_options"></SmilesDrawer>
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/SmilesDrawers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/SmilesDrawers.razor.cs
new file mode 100644
index 00000000000..d06b56e86f2
--- /dev/null
+++ b/src/BootstrapBlazor.Server/Components/Samples/SmilesDrawers.razor.cs
@@ -0,0 +1,19 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// SmileDrawer 组件示例
+/// </summary>
+public partial class SmilesDrawers
+{
+    private SmilesDrawerOptions _options = new() { Theme = "light", Width = 120, Height = 120 };
+
+    private void OnClickUpdateSize()
+    {
+        _options = new SmilesDrawerOptions { Theme = "light", Width = 200, Height = 200 };
+    }
+}
diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
index e2ca50da387..c6e9915099a 100644
--- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
+++ b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -708,6 +708,11 @@ void AddData(DemoMenuItem item)
                     Url = "segmented"
                 },
                 new()
+                {
+                    Text = Localizer["SmilesDrawer"],
+                    Url = "smiles-drawer"
+                },
+                new()
                 {
                     Text = Localizer["SignaturePad"],
                     Url = "signature-pad",
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 90901bcf22e..88533511ab6 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4779,7 +4779,8 @@
     "SortableList": "SortableList",
     "WinBox": "WinBox",
     "Player": "Player",
-    "RDKit": "RDKit"
+    "RDKit": "RDKit",
+    "SmilesDrawer": "SmilesDrawer"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -6849,5 +6850,13 @@
     "RDKitSmartsLabel": "Show Smarts",
     "RDKitSizeTitle": "Size",
     "RDKitSizeIntro": "Set the width and height of the molecular formula by setting the <code>Width</code> and <code>Height</code> values"
+  },
+  "BootstrapBlazor.Server.Components.Samples.SmilesDrawers": {
+    "SmilesDrawerTitle": "SmilesDrawer",
+    "SmilesDrawerDescription": "A small, highly performant JavaScript component for parsing and drawing SMILES strings",
+    "SmilesDrawerNormalTitle": "Basic usage",
+    "SmilesDrawerNormalIntro": "Set the molecular formula through <code>Smiles</code> and draw the component",
+    "SmilesDrawerSizeTitle": "Size",
+    "SmilesDrawerSizeIntro": "Set the width and height of the molecular formula by setting the <code>Width</code> and <code>Height</code> values"
   }
 }
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 7fcc1c7a2ba..cb00161bb74 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4779,7 +4779,8 @@
     "SortableList": "拖拽组件 SortableList",
     "WinBox": "窗口 WinBox",
     "Player": "播放器 Player",
-    "RDKit": "分子图组件 RDKit"
+    "RDKit": "分子式组件 RDKit",
+    "SmilesDrawer": "分子式组件 SmilesDrawer"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -6840,7 +6841,7 @@
     "AttributeOnPostDataAsync": "Frame 加载页面传递过来的数据"
   },
   "BootstrapBlazor.Server.Components.Samples.RDKits": {
-    "RDKitTitle": "RDKit 分子式组件",
+    "RDKitTitle": "RDKit.js 分子图组件",
     "RDKitDescription": "RDKit 是一个开源的化学信息学工具包，用于分子建模和化学信息学",
     "RDKitNormalTitle": "基础用法",
     "RDKitNormalIntro": "通过 <code>Smiles</code> 设置分子式，组件画图",
@@ -6849,5 +6850,13 @@
     "RDKitSmartsLabel": "显示 Smarts",
     "RDKitSizeTitle": "尺寸",
     "RDKitSizeIntro": "通过设置 <code>Width</code> <code>Height</code> 值设置分子式宽高"
+  },
+  "BootstrapBlazor.Server.Components.Samples.SmilesDrawers": {
+    "SmilesDrawerTitle": "SmilesDrawer 分子图组件",
+    "SmilesDrawerDescription": "SmilesDrawer 是一个开源的化学信息学工具包，用于分子建模和化学信息学",
+    "SmilesDrawerNormalTitle": "基础用法",
+    "SmilesDrawerNormalIntro": "通过 <code>Smiles</code> 设置分子式，组件画图",
+    "SmilesDrawerSizeTitle": "尺寸",
+    "SmilesDrawerSizeIntro": "通过设置 <code>Width</code> <code>Height</code> 值设置分子式宽高"
   }
 }
diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json
index 74c6f6490b3..e918d91ccf5 100644
--- a/src/BootstrapBlazor.Server/docs.json
+++ b/src/BootstrapBlazor.Server/docs.json
@@ -221,7 +221,8 @@
     "sortable-list": "SortableLists",
     "win-box": "WinBoxes",
     "player": "Players",
-    "rdkit": "Rdkits"
+    "rdkit": "Rdkits",
+    "smiles-drawer": "SmilesDrawers"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",