diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json
index 3a189166c..aa2b144fb 100644
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@@ -2291,6 +2291,45 @@
     "ShowDismiss": "Close button",
     "OnDismiss": "Close label callback method"
   },
+  "BootstrapBlazor.Shared.Samples.Timelines": {
+    "Title": "Timeline",
+    "SubTitle": "Visualize time flow information",
+    "BasicUsageTitle": "Basic usage",
+    "BasicUsageIntro": "Timeline can be split into multiple activities arranged in positive or reverse order of timestamps, which are an important feature that distinguishes them from other controls, and should be used with care to distinguish them from steps bar.",
+    "BasicUsageP": "sort:",
+    "CutomNodeStyleTitle": "Customize the node style",
+    "CutomNodeStyleIntro": "You can customize the node color according to the actual scene, or use the icon directly.",
+    "LeftTitle": "Shown on the left",
+    "LeftIntro": "Content takes turns appearing on the left side of the timeline",
+    "LeftP": "Control the content appearing on the left side of the timeline by setting the <code> IsLeft </code> property",
+    "AlternateTitle": "Alternate presentations",
+    "AlternateIntro": "内容在时间轴两侧轮流出现",
+    "AlternateP": "Control the alternating timeline left and right by setting the <code> IsAlternate </code> property",
+    "DispalyCustomComponentTitle": "Show custom components",
+    "DispalyCustomComponentIntro": "Custom components are displayed on the timeline",
+    "DispalyCustomComponentP": "Control the custom components that the timeline displays by setting the <code> CustomerComponent </code> of the <code>TimelineItem </code>",
+    "SelectedItem1": "Positive order",
+    "SelectedItem2": "Reverse order",
+    "TimelineItemContent1": "Creation time",
+    "TimelineItemContent2": "Approved",
+    "TimelineItemContent3": "The event starts on schedule",
+    "TimelineItemContent4": "The default style of the node",
+    "TimelineItemContent5": "Support for custom colors",
+    "TimelineItemContent6": "Icons are supported",
+    "Description1": "Real-time output",
+    "Description2": "Counter",
+    "Description3": "Weather forecast information",
+    "Items": "A collection of data",
+    "IsReverse": "Whether to display in reverse order",
+    "IsLeft": "Whether the left side presents content",
+    "IsAlternate": "Whether to alternate the content",
+    "Color": "Node color",
+    "Content": "The body of the content",
+    "Icon": "Node icon",
+    "Description": "The node description text",
+    "Component": "Node custom components",
+    "AttributeTitle": "TimelineItem attributes"
+  },
   "BootstrapBlazor.Shared.Components.DemoBlock": {
     "Title": "",
     "SubTitle": "Demo"
diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json
index a031c35eb..fdf0f5b93 100644
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@@ -2293,7 +2293,46 @@
     "Icon": "图标",
     "ShowDismiss": "关闭按钮",
     "OnDismiss": "关闭标签回调方法"
-  }
+  },
+  "BootstrapBlazor.Shared.Samples.Timelines": {
+    "Title": "Timeline 时间线",
+    "SubTitle": "可视化地呈现时间流信息",
+    "BasicUsageTitle": "基本用法",
+    "BasicUsageIntro": "Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。",
+    "BasicUsageP": "排序：",
+    "CutomNodeStyleTitle": "⾃定义节点样式",
+    "CutomNodeStyleIntro": "可根据实际场景⾃定义节点颜⾊，或直接使⽤图标。",
+    "LeftTitle": "左侧展现",
+    "LeftIntro": "内容在时间轴左侧轮流出现",
+    "LeftP": "通过设置 <code>IsLeft</code> 属性来控制内容出现在时间线左侧",
+    "AlternateTitle": "交替展现",
+    "AlternateIntro": "内容在时间轴两侧轮流出现",
+    "AlternateP": "通过设置 <code>IsAlternate</code> 属性来控制时间线左右交替展现",
+    "DispalyCustomComponentTitle": "展现自定义组件",
+    "DispalyCustomComponentIntro": "时间轴上展现自定义组件",
+    "DispalyCustomComponentP": "通过设置 <code>TimelineItem</code> 的 <code>CustomerComponent</code> 来控制时间线展现的自定义组件",
+    "SelectedItem1": "正序",
+    "SelectedItem2": "倒序",
+    "TimelineItemContent1": "创建时间",
+    "TimelineItemContent2": "通过审核",
+    "TimelineItemContent3": "活动按期开始",
+    "TimelineItemContent4": "默认样式的节点",
+    "TimelineItemContent5": "支持自定义颜色",
+    "TimelineItemContent6": "支持使用图标",
+    "Description1": "实时输出",
+    "Description2": "计数器",
+    "Description3": "天气预报信息",
+    "Items": "数据集合",
+    "IsReverse": "是否倒序显示",
+    "IsLeft": "是否左侧展现内容",
+    "IsAlternate": "是否交替展现内容",
+    "Color": "节点颜色",
+    "Content": "内容正文",
+    "Icon": "节点图标",
+    "Description": "节点描述文字",
+    "Component": "节点自定义组件",
+    "AttributeTitle": "TimelineItem 属性"
+  },
   "BootstrapBlazor.Shared.Components.DemoBlock": {
     "Title": "未设置",
     "SubTitle": "示例"
diff --git a/src/BootstrapBlazor.Shared/Samples/Timelines.razor b/src/BootstrapBlazor.Shared/Samples/Timelines.razor
index 543205db8..f4a6cac7b 100644
--- a/src/BootstrapBlazor.Shared/Samples/Timelines.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Timelines.razor
@@ -1,36 +1,37 @@
 @page "/timelines"
+@inject IStringLocalizer<Timelines> Localizer
 
-<h3>Timeline 时间线</h3>
+<h3>@Localizer["Title"]</h3>
 
-<h4>可视化地呈现时间流信息</h4>
+<h4>@Localizer["SubTitle"]</h4>
 
-<DemoBlock Title="基本用法" Introduction="Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，时间戳是其区分于其他控件的重要特征，使⽤时注意与 Steps 步骤条等区分。" Name="Normal">
+<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
     <div class="d-flex mb-3">
-        <label class="me-1">排序：</label>
+        <label class="me-1">@Localizer["BasicUsageP"]</label>
         <RadioList TValue="SelectedItem" OnSelectedChanged="@OnStateChanged" Items="@Items"></RadioList>
     </div>
     <Timeline Items="TimelineItems" IsReverse="@IsReverse"></Timeline>
 </DemoBlock>
 
-<DemoBlock Title="⾃定义节点样式" Introduction="可根据实际场景⾃定义节点颜⾊，或直接使⽤图标。" Name="CutomNodeStyle">
+<DemoBlock Title="@Localizer["CutomNodeStyleTitle"]" Introduction="@Localizer["CutomNodeStyleIntro"]" Name="CutomNodeStyle">
     <Timeline Items="CustomerTimelineItems" />
 </DemoBlock>
 
-<DemoBlock Title="左侧展现" Introduction="内容在时间轴左侧轮流出现" Name="Left">
-    <p>通过设置 <code>IsLeft</code> 属性来控制内容出现在时间线左侧</p>
+<DemoBlock Title="@Localizer["LeftTitle"]" Introduction="@Localizer["LeftIntro"]" Name="Left">
+    <p>@((MarkupString)Localizer["LeftP"].Value)</p>
     <Timeline Items="AlternateTimelineItems" IsLeft="true" />
 </DemoBlock>
 
-<DemoBlock Title="交替展现" Introduction="内容在时间轴两侧轮流出现" Name="Alternate">
-    <p>通过设置 <code>IsAlternate</code> 属性来控制时间线左右交替展现</p>
+<DemoBlock Title="@Localizer["AlternateTitle"]" Introduction="@Localizer["AlternateIntro"]" Name="Alternate">
+    <p>@((MarkupString)Localizer["AlternateP"].Value)</p>
     <Timeline Items="AlternateTimelineItems" IsAlternate="true" />
 </DemoBlock>
 
-<DemoBlock Title="展现自定义组件" Introduction="时间轴上展现自定义组件" Name="DispalyCustomComponent">
-    <p>通过设置 <code>TimelineItem</code> 的 <code>CustomerComponent</code> 来控制时间线展现的自定义组件</p>
+<DemoBlock Title="@Localizer["DispalyCustomComponentTitle"]" Introduction="@Localizer["DispalyCustomComponentIntro"]" Name="DispalyCustomComponent">
+    <p>@((MarkupString)Localizer["DispalyCustomComponentP"].Value)</p>
     <Timeline Items="GetCustomerComponentTimelineItems()" />
 </DemoBlock>
 
 <AttributeTable Items="GetAttributes()" />
 
-<AttributeTable Items="GetTimelineItemAttributes()" Title="TimelineItem 属性" />
+<AttributeTable Items="GetTimelineItemAttributes()" Title="@Localizer["AttributeTitle"]" />
diff --git a/src/BootstrapBlazor.Shared/Samples/Timelines.razor.cs b/src/BootstrapBlazor.Shared/Samples/Timelines.razor.cs
index 6c41a6195..5e53954c5 100644
--- a/src/BootstrapBlazor.Shared/Samples/Timelines.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/Timelines.razor.cs
@@ -64,6 +64,12 @@ namespace BootstrapBlazor.Shared.Samples
                 }
                 while (!_cancelTokenSource.IsCancellationRequested);
             });
+
+            Items = new SelectedItem[]
+            {
+                new SelectedItem("1",Localizer["SelectedItem1"]){ Active=true },
+                new SelectedItem("2",Localizer["SelectedItem2"])
+            };
         }
 
         /// <summary>
@@ -74,7 +80,7 @@ namespace BootstrapBlazor.Shared.Samples
 
         public Task OnStateChanged(IEnumerable<SelectedItem> values, SelectedItem value)
         {
-            IsReverse = value.Text == "倒序";
+            IsReverse = value.Text == Localizer["SelectedItem2"];
             StateHasChanged();
             return Task.CompletedTask;
         }
@@ -82,28 +88,24 @@ namespace BootstrapBlazor.Shared.Samples
         /// <summary>
         /// 
         /// </summary>
-        private IEnumerable<SelectedItem> Items { get; set; } = new SelectedItem[]
-        {
-            new SelectedItem("1","正序"){ Active=true },
-            new SelectedItem("2","倒序")
-        };
+        private IEnumerable<SelectedItem> Items { get; set; }
 
         /// <summary>
         /// 
         /// </summary>
-        private readonly IEnumerable<TimelineItem> TimelineItems = new TimelineItem[]
+        private IEnumerable<TimelineItem> TimelineItems => new TimelineItem[]
         {
             new TimelineItem {
-                Content = "创建时间",
+                Content = Localizer["TimelineItemContent1"],
                 Description = DateTime.Now.ToString("yyyy-MM-dd")
             },
             new TimelineItem{
-                Content = "通过审核",
+                Content =  Localizer["TimelineItemContent2"],
                 Description = DateTime.Now.AddDays(1).ToString("yyyy-MM-dd")
             },
             new TimelineItem
             {
-                Content = "活动按期开始",
+                Content =  Localizer["TimelineItemContent3"],
                 Description = DateTime.Now.AddDays(2).ToString("yyyy-MM-dd")
             }
         };
@@ -111,24 +113,24 @@ namespace BootstrapBlazor.Shared.Samples
         /// <summary>
         /// 
         /// </summary>
-        private readonly IEnumerable<TimelineItem> CustomerTimelineItems = new TimelineItem[]
+        private IEnumerable<TimelineItem> CustomerTimelineItems => new TimelineItem[]
         {
             new TimelineItem
             {
-                Content = "默认样式的节点",
+                Content = Localizer["TimelineItemContent4"],
                 Description = DateTime.Now.ToString("yyyy-MM-dd")
             },
             new TimelineItem
             {
                 Color = Color.Success,
-                Content = "支持自定义颜色",
+                Content = Localizer["TimelineItemContent5"],
                 Description = DateTime.Now.AddDays(2).ToString("yyyy-MM-dd")
             },
             new TimelineItem
             {
                 Color = Color.Danger,
                 Icon = "fa fa-fw fa-fa",
-                Content = "支持使用图标",
+                Content = Localizer["TimelineItemContent6"],
                 Description = DateTime.Now.AddDays(3).ToString("yyyy-MM-dd")
             }
         };
@@ -145,19 +147,19 @@ namespace BootstrapBlazor.Shared.Samples
                 {
                     [nameof(BootstrapBlazor.Components.Console.Items)] = Messages
                 }),
-                Description = "实时输出"
+                Description = Localizer["Description1"]
             },
             new TimelineItem
             {
                 Color = Color.Info,
                 Component = BootstrapDynamicComponent.CreateComponent<Counter>(),
-                Description = "计数器"
+                Description = Localizer["Description2"]
             },
             new TimelineItem
             {
                 Color = Color.Warning,
                 Component = BootstrapDynamicComponent.CreateComponent<FetchData>(),
-                Description = "天气预报信息"
+                Description = Localizer["Description3"]
             }
         };
 
@@ -196,33 +198,33 @@ namespace BootstrapBlazor.Shared.Samples
         /// 获得属性方法
         /// </summary>
         /// <returns></returns>
-        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
         {
             // TODO: 移动到数据库中
             new AttributeItem() {
                 Name = "Items",
-                Description = "数据集合",
+                Description = Localizer["Items"],
                 Type = "IEnumerable<TimelineItem>",
                 ValueList = "—",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = "IsReverse",
-                Description = "是否倒序显示",
+                Description = Localizer["IsReverse"],
                 Type = "boolean",
                 ValueList = "true|false",
                 DefaultValue = "false"
             },
             new AttributeItem() {
                 Name = "IsLeft",
-                Description = "是否左侧展现内容",
+                Description = Localizer["IsLeft"],
                 Type = "boolean",
                 ValueList = "true|false",
                 DefaultValue = "false"
             },
             new AttributeItem() {
                 Name = "IsAlternate",
-                Description = "是否交替展现内容",
+                Description = Localizer["IsAlternate"],
                 Type = "boolean",
                 ValueList = "true|false",
                 DefaultValue = "false"
@@ -233,40 +235,40 @@ namespace BootstrapBlazor.Shared.Samples
         /// 获得属性方法
         /// </summary>
         /// <returns></returns>
-        private static IEnumerable<AttributeItem> GetTimelineItemAttributes() => new AttributeItem[]
+        private IEnumerable<AttributeItem> GetTimelineItemAttributes() => new AttributeItem[]
         {
             // TODO: 移动到数据库中
             new AttributeItem() {
                 Name = nameof(TimelineItem.Color),
-                Description = "节点颜色",
+                Description = Localizer["Color"],
                 Type = "Color",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = nameof(TimelineItem.Content),
-                Description = "内容正文",
+                Description = Localizer["Content"],
                 Type = "string",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = nameof(TimelineItem.Icon),
-                Description = "节点图标",
+                Description = Localizer["Icon"],
                 Type = "string",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = nameof(TimelineItem.Description),
-                Description = "节点描述文字",
+                Description = Localizer["Description"],
                 Type = "string",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = nameof(TimelineItem.Component),
-                Description = "节点自定义组件",
+                Description = Localizer["Component"],
                 Type = nameof(BootstrapDynamicComponent),
                 ValueList = " — ",
                 DefaultValue = " — "