diff --git a/BootstrapBlazor.Extensions.sln b/BootstrapBlazor.Extensions.sln
index ee9136e0..5985e3cc 100644
--- a/BootstrapBlazor.Extensions.sln
+++ b/BootstrapBlazor.Extensions.sln
@@ -188,6 +188,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.Html2Pdf.Pl
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.JitsiMeet", "src\components\BootstrapBlazor.JitsiMeet\BootstrapBlazor.JitsiMeet.csproj", "{08458CA3-BF81-48E8-870D-9389DC037808}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapBlazor.PdfViewer", "src\components\BootstrapBlazor.PdfViewer\BootstrapBlazor.PdfViewer.csproj", "{4757B038-70E4-40B0-9B73-700EE5632B07}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -510,6 +512,10 @@ Global
 		{08458CA3-BF81-48E8-870D-9389DC037808}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{08458CA3-BF81-48E8-870D-9389DC037808}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{08458CA3-BF81-48E8-870D-9389DC037808}.Release|Any CPU.Build.0 = Release|Any CPU
+		{4757B038-70E4-40B0-9B73-700EE5632B07}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{4757B038-70E4-40B0-9B73-700EE5632B07}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{4757B038-70E4-40B0-9B73-700EE5632B07}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{4757B038-70E4-40B0-9B73-700EE5632B07}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -598,6 +604,7 @@ Global
 		{CED55D86-57CF-CB0D-E880-370C44C0DB1F} = {FF1089BE-C704-4374-B629-C57C08E1798F}
 		{F3043A78-1942-4524-BDC4-7E88F56DF3D5} = {FF1089BE-C704-4374-B629-C57C08E1798F}
 		{08458CA3-BF81-48E8-870D-9389DC037808} = {FF1089BE-C704-4374-B629-C57C08E1798F}
+		{4757B038-70E4-40B0-9B73-700EE5632B07} = {FF1089BE-C704-4374-B629-C57C08E1798F}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {D5EB1960-6F30-4CE1-B375-EAE1F787D6FF}
diff --git a/src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj b/src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj
new file mode 100644
index 00000000..6c69df1e
--- /dev/null
+++ b/src/components/BootstrapBlazor.PdfViewer/BootstrapBlazor.PdfViewer.csproj
@@ -0,0 +1,21 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <Version>9.0.0-beta01</Version>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Pdf Viewer</PackageTags>
+    <Description>Bootstrap UI components extensions of Pdf Viewer</Description>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Using Include="BootstrapBlazor.Components" />
+    <Using Include="Microsoft.JSInterop" />
+  </ItemGroup>
+
+</Project>
diff --git a/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor
new file mode 100644
index 00000000..050c4968
--- /dev/null
+++ b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor
@@ -0,0 +1,5 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapModuleComponentBase
+@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.PdfViewer/PdfViewer.razor.js", JSObjectReference = true, AutoInvokeDispose = false)]
+
+<div @attributes="AdditionalAttributes" id="@Id" data-bb-url="@Url" class="@ClassString" style="@StyleString"></div>
diff --git a/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.cs b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.cs
new file mode 100644
index 00000000..d80548eb
--- /dev/null
+++ b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.cs
@@ -0,0 +1,62 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using Microsoft.AspNetCore.Components;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// PdfViewer component for displaying PDF files in a Blazor application.
+/// </summary>
+public partial class PdfViewer
+{
+    /// <summary>
+    /// Gets or sets the url for the PDF file to be displayed.
+    /// </summary>
+    [Parameter]
+    public string? Url { get; set; }
+
+    /// <summary>
+    /// Gets or sets the viewer height. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? Height { get; set; }
+
+    private string? ClassString => CssBuilder.Default("bb-pdf-viewer-container")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private string? StyleString => CssBuilder.Default()
+        .AddClass($"--bb-pdf-viewer-height: {Height};", !string.IsNullOrEmpty(Height))
+        .Build();
+
+    private string? _url;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            _url = Url;
+        }
+
+        if (_url != Url)
+        {
+            _url = Url;
+            await InvokeVoidAsync("loadPdf", Id, _url);
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id);
+}
diff --git a/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js
new file mode 100644
index 00000000..d043fd1c
--- /dev/null
+++ b/src/components/BootstrapBlazor.PdfViewer/PdfViewer.razor.js
@@ -0,0 +1,34 @@
+import { addLink } from "../BootstrapBlazor/modules/utility.js"
+import Data from "../BootstrapBlazor/modules/data.js"
+
+export async function init(id) {
+    await addLink("./_content/BootstrapBlazor.PdfViewer/pdf-viewer.css");
+
+    const el = document.getElementById(id);
+    const pdfViewer = { el };
+    Data.set(id, pdfViewer);
+
+    const url = el.getAttribute('data-bb-url');
+    loadPdf(id, url);
+}
+
+export function loadPdf(id, url) {
+    const pdfViewer = Data.get(id);
+    const { el } = pdfViewer;
+    if (url) {
+        const { frame } = pdfViewer;
+        const viewer = frame || createFrame(el);
+        viewer.src = url;
+    }
+    else {
+        delete pdfViewer.frame;
+        el.innerHTML = '';
+    }
+}
+
+const createFrame = el => {
+    const frame = document.createElement('iframe');
+    frame.classList.add('bb-pdf-viewer');
+    el.appendChild(frame);
+    return frame;
+}
diff --git a/src/components/BootstrapBlazor.PdfViewer/_Imports.razor b/src/components/BootstrapBlazor.PdfViewer/_Imports.razor
new file mode 100644
index 00000000..d46585f8
--- /dev/null
+++ b/src/components/BootstrapBlazor.PdfViewer/_Imports.razor
@@ -0,0 +1,2 @@
+@using BootstrapBlazor.Components;
+@using Microsoft.AspNetCore.Components.Web
diff --git a/src/components/BootstrapBlazor.PdfViewer/wwwroot/pdf-viewer.css b/src/components/BootstrapBlazor.PdfViewer/wwwroot/pdf-viewer.css
new file mode 100644
index 00000000..dd1c8e9f
--- /dev/null
+++ b/src/components/BootstrapBlazor.PdfViewer/wwwroot/pdf-viewer.css
@@ -0,0 +1,9 @@
+.bb-pdf-viewer-container {
+    width: 100%;
+    height: var(--bb-pdf-viewer-height, 500px);
+}
+
+.bb-pdf-viewer {
+    width: 100%;
+    height: 100%;
+}