diff --git a/components/AntBlazor.xml b/components/AntBlazor.xml
index 556ac9d45..ae2751989 100644
--- a/components/AntBlazor.xml
+++ b/components/AntBlazor.xml
@@ -195,7 +195,7 @@
         </member>
         <member name="P:AntDesign.AntCarousel.DotPosition">
             <summary>
-            The position of the dots, which can be one of Top, Bottom, Left or Right, <see cref="T:AntDesign.AntCarouselDotPosition"/>
+            The position of the dots, which can be one of Top, Bottom, Left or Right, <see cref="T:AntDesign.CarouselDotPosition"/>
             </summary>
         </member>
         <member name="P:AntDesign.AntCarousel.Autoplay">
@@ -205,7 +205,7 @@
         </member>
         <member name="P:AntDesign.AntCarousel.Effect">
             <summary>
-            Transition effect, <see cref="T:AntDesign.AntCarouselEffect"/>
+            Transition effect, <see cref="T:AntDesign.CarouselEffect"/>
             </summary>
         </member>
         <member name="P:AntDesign.AntDomComponentBase.Ref">
@@ -311,12 +311,12 @@
             "ltr"|"rtl"
             </summary>
         </member>
-        <member name="P:AntDesign.AntRow.Align">
+        <member name="P:AntDesign.Row.Align">
             <summary>
             'top' | 'middle' | 'bottom'
             </summary>
         </member>
-        <member name="P:AntDesign.AntRow.Justify">
+        <member name="P:AntDesign.Row.Justify">
             <summary>
             'start' | 'end' | 'center' | 'space-around' | 'space-between'
             </summary>
diff --git a/components/affix/AntAffix.razor b/components/affix/Affix.razor
similarity index 100%
rename from components/affix/AntAffix.razor
rename to components/affix/Affix.razor
diff --git a/components/affix/AntAffix.razor.cs b/components/affix/Affix.razor.cs
similarity index 99%
rename from components/affix/AntAffix.razor.cs
rename to components/affix/Affix.razor.cs
index 0f57d6822..58fa11fca 100644
--- a/components/affix/AntAffix.razor.cs
+++ b/components/affix/Affix.razor.cs
@@ -9,7 +9,7 @@ using Microsoft.AspNetCore.Components;
 
 namespace AntDesign
 {
-    public partial class AntAffix : AntDomComponentBase
+    public partial class Affix : AntDomComponentBase
     {
         private const string PrefixCls = "ant-affix";
         private const string RootScollSelector = "window";
diff --git a/components/alert/Alert.razor b/components/alert/Alert.razor
index 34db4ff87..e368cf9e1 100644
--- a/components/alert/Alert.razor
+++ b/components/alert/Alert.razor
@@ -7,7 +7,7 @@
         @if (ShowIcon)
         {
             <span role="img" aria-label="@IconType" class="@($"anticon anticon-{IconType} ant-alert-icon")">
-                <AntIcon type="@IconType" fill="currentColor"/>
+                <Icon type="@IconType" fill="currentColor"/>
             </span>
         }
         @if (!string.IsNullOrEmpty(Message))
diff --git a/components/avatar/Avatar.razor b/components/avatar/Avatar.razor
index 7dfa914ea..9f8eff54e 100644
--- a/components/avatar/Avatar.razor
+++ b/components/avatar/Avatar.razor
@@ -4,7 +4,7 @@
 <span class="@ClassMapper.Class" style="@Style" id="@Id" @ref="Ref">
     @if (!string.IsNullOrEmpty(Icon) && _hasIcon)
     {
-        <AntIcon type="@Icon" />
+        <Icon type="@Icon" />
     }
     @if (!string.IsNullOrEmpty(Src) && _hasSrc)
     {
diff --git a/components/back-top/AntBackTop.razor b/components/back-top/BackTop.razor
similarity index 99%
rename from components/back-top/AntBackTop.razor
rename to components/back-top/BackTop.razor
index f9fbedcf6..aa902d7c0 100644
--- a/components/back-top/AntBackTop.razor
+++ b/components/back-top/BackTop.razor
@@ -4,5 +4,6 @@
 <div class="@BackTopClassMapper.Class" @onclick="_=>OnClick()">
     <div class="@BackTopContentClassMapper.Class">
         <div class="@BackTopIconClassMapper.Class"></div>
+ 
     </div>
 </div>
diff --git a/components/back-top/AntBackTop.razor.cs b/components/back-top/BackTop.razor.cs
similarity index 81%
rename from components/back-top/AntBackTop.razor.cs
rename to components/back-top/BackTop.razor.cs
index 488d75515..f347991e6 100644
--- a/components/back-top/AntBackTop.razor.cs
+++ b/components/back-top/BackTop.razor.cs
@@ -1,10 +1,11 @@
-using Microsoft.AspNetCore.Components;
+using AntDesign.JsInterop;
+using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public partial class AntBackTop : AntDomComponentBase
+    public partial class BackTop : AntDomComponentBase
     {
         [Parameter]
         public string Title { get; set; }
@@ -17,7 +18,7 @@ namespace AntDesign
 
         protected async Task OnClick()
         {
-            await JsInvokeAsync(JSInteropConstants.backTop, "BodyContainer");
+            await JsInvokeAsync<DomRect>(JSInteropConstants.backTop, "BodyContainer");
         }
 
         protected override void OnInitialized()
diff --git a/components/breadcrumb/BreadcrumbItem.razor b/components/breadcrumb/BreadcrumbItem.razor
index 4e87172dd..01e5b7f8a 100644
--- a/components/breadcrumb/BreadcrumbItem.razor
+++ b/components/breadcrumb/BreadcrumbItem.razor
@@ -9,7 +9,7 @@
             <span class="ant-breadcrumb-link">
                 @ChildContent
             </span>
-            <AntIcon Type="down"></AntIcon>
+            <Icon Type="down"></Icon>
         </span>
     }
     else
diff --git a/components/button/Button.razor b/components/button/Button.razor
index 100f54ff7..1753a628b 100644
--- a/components/button/Button.razor
+++ b/components/button/Button.razor
@@ -5,11 +5,11 @@
     <button class="@ClassMapper.Class" style="@Style" id="@Id" type="@HtmlType" @onclick="HandleOnClick" disabled="@Disabled">
         @if (Loading)
         {
-            <AntIcon Type="loading"></AntIcon>
+            <Icon Type="loading"></Icon>
         }
         @if (!string.IsNullOrEmpty(Icon))
         {
-            <AntIcon Type="@Icon" Style="@IconStyle"></AntIcon>
+            <Icon Type="@Icon" Style="@IconStyle"></Icon>
         }
 
         @ChildContent
diff --git a/components/button/Button.razor.cs b/components/button/Button.razor.cs
index e90eddead..4ba306c77 100644
--- a/components/button/Button.razor.cs
+++ b/components/button/Button.razor.cs
@@ -66,7 +66,7 @@ namespace AntDesign
 
         [Inject] private NavigationManager NavigationManger { get; set; }
 
-        public IList<AntIcon> Icons { get; set; } = new List<AntIcon>();
+        public IList<Icon> Icons { get; set; } = new List<Icon>();
 
         //public AntNavLink Link { get; set; }
 
diff --git a/components/card/AntCard.razor b/components/card/Card.razor
similarity index 97%
rename from components/card/AntCard.razor
rename to components/card/Card.razor
index bb6943a44..c8a1f0a55 100644
--- a/components/card/AntCard.razor
+++ b/components/card/Card.razor
@@ -50,7 +50,7 @@
             }
             else
             {
-                <AntCardLoading></AntCardLoading>
+                <CardLoading></CardLoading>
             }
         </div>
 
diff --git a/components/card/AntCard.razor.cs b/components/card/Card.razor.cs
similarity index 92%
rename from components/card/AntCard.razor.cs
rename to components/card/Card.razor.cs
index 9835eec11..7d474c5f9 100644
--- a/components/card/AntCard.razor.cs
+++ b/components/card/Card.razor.cs
@@ -4,7 +4,7 @@ using OneOf;
 
 namespace AntDesign
 {
-    public partial class AntCard : AntDomComponentBase
+    public partial class Card : AntDomComponentBase
     {
         [Parameter]
         public RenderFragment ChildContent { get; set; }
@@ -45,7 +45,7 @@ namespace AntDesign
         [Parameter]
         public RenderFragment AntCardTab { get; set; }
 
-        internal IList<AntCardGrid> Grids { get; set; } = new List<AntCardGrid>();
+        internal IList<CardGrid> Grids { get; set; } = new List<CardGrid>();
 
         protected void SetClassMap()
         {
diff --git a/components/card/AntCardGrid.razor b/components/card/CardGrid.razor
similarity index 100%
rename from components/card/AntCardGrid.razor
rename to components/card/CardGrid.razor
diff --git a/components/card/AntCardLoading.razor b/components/card/CardLoading.razor
similarity index 100%
rename from components/card/AntCardLoading.razor
rename to components/card/CardLoading.razor
diff --git a/components/card/AntCardMeta.razor b/components/card/CardMeta.razor
similarity index 100%
rename from components/card/AntCardMeta.razor
rename to components/card/CardMeta.razor
diff --git a/components/divider/AntDivider.razor b/components/divider/Divider.razor
similarity index 84%
rename from components/divider/AntDivider.razor
rename to components/divider/Divider.razor
index 521e1ee40..0fed62dd5 100644
--- a/components/divider/AntDivider.razor
+++ b/components/divider/Divider.razor
@@ -24,6 +24,8 @@
 
     [Parameter] public string Text { get; set; }
 
+    [Parameter] public Boolean Plain { get; set; } = false;
+
     /// <summary>
     ///  'horizontal' | 'vertical'
     /// </summary>
@@ -41,7 +43,9 @@
         ClassMapper.Clear()
             .Add("ant-divider")
             .Add($"ant-divider-{this.Type}")
+            .If("ant-divider-with-text", () => Text != null || ChildContent != null)
             .If($"ant-divider-with-text-{this.Orientation}", () => Text != null || ChildContent != null)
+            .If($"ant-divider-plain", () => Plain == true || Text != null || ChildContent != null)
             .If("ant-divider-dashed", () => Dashed)
             ;
     }
diff --git a/components/drawer/Drawer.razor b/components/drawer/Drawer.razor
index 756032cf8..9b02dd7b8 100644
--- a/components/drawer/Drawer.razor
+++ b/components/drawer/Drawer.razor
@@ -29,7 +29,7 @@
                         @if (Closable)
                         {
                             <button @onclick="_=>CloseClick()" aria-label="Close" class="ant-drawer-close">
-                                <AntIcon type="close"></AntIcon>
+                                <Icon type="close"></Icon>
                             </button>
                         }
                     </div>
diff --git a/components/icon/AntIcon.razor b/components/icon/Icon.razor
similarity index 100%
rename from components/icon/AntIcon.razor
rename to components/icon/Icon.razor
diff --git a/components/icon/AntIcon.razor.cs b/components/icon/Icon.razor.cs
similarity index 95%
rename from components/icon/AntIcon.razor.cs
rename to components/icon/Icon.razor.cs
index b685ef6cc..d6f959d59 100644
--- a/components/icon/AntIcon.razor.cs
+++ b/components/icon/Icon.razor.cs
@@ -9,7 +9,7 @@ using OneOf;
 
 namespace AntDesign
 {
-    public partial class AntIcon : AntDomComponentBase
+    public partial class Icon : AntDomComponentBase
     {
         [Parameter]
         public bool Spin { get; set; }
@@ -24,7 +24,7 @@ namespace AntDesign
         /// 'fill' | 'outline' | 'twotone';
         /// </summary>
         [Parameter]
-        public string Theme { get; set; } = AntIconThemeType.Outline;
+        public string Theme { get; set; } = IconThemeType.Outline;
 
         [Parameter]
         public string TwotoneColor { get; set; }
@@ -79,7 +79,7 @@ namespace AntDesign
 
             _baseUrl = NavigationManager.ToAbsoluteUri(NavigationManager.BaseUri);
 
-            if (this is AntIcon icon)
+            if (this is Icon icon)
             {
                 Button?.Icons.Add(icon);
             }
diff --git a/components/icon/AntIconThemeType.cs b/components/icon/IconThemeType.cs
similarity index 86%
rename from components/icon/AntIconThemeType.cs
rename to components/icon/IconThemeType.cs
index fcd544e3c..bda0bcc33 100644
--- a/components/icon/AntIconThemeType.cs
+++ b/components/icon/IconThemeType.cs
@@ -5,10 +5,10 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public static class AntIconThemeType
+    public static class IconThemeType
     {
         public const string Fill = "fill";
         public const string Outline = "outline";
         public const string Twotone = "twotone";
     }
-}
\ No newline at end of file
+}
diff --git a/components/input-number/InputNumber.razor b/components/input-number/InputNumber.razor
index 380fdf142..4aa889032 100644
--- a/components/input-number/InputNumber.razor
+++ b/components/input-number/InputNumber.razor
@@ -3,8 +3,8 @@
 
 <div class="@ClassMapper.Class" style="@Style" id="@Id">
     <div class="ant-input-number-handler-wrap">
-        <AntIcon class="@GetIconClass("up")" Type="up" OnClick="Increase" />
-        <AntIcon class="@GetIconClass("down")" Type="down" OnClick="Decrease" />
+        <Icon class="@GetIconClass("up")" Type="up" OnClick="Increase" />
+        <Icon class="@GetIconClass("down")" Type="down" OnClick="Decrease" />
     </div>
     <div class="ant-input-number-input-wrap">
         <Input class="ant-input-number-input" @bind-Value="@CurrentValueAsString" Type="number" OnInput="(e)=>OnInput(e)" />
diff --git a/components/input/Input.cs b/components/input/Input.cs
index 15b55f5da..7ea47d10f 100644
--- a/components/input/Input.cs
+++ b/components/input/Input.cs
@@ -172,7 +172,7 @@ namespace AntDesign
         {
             Suffix = (builder) =>
             {
-                builder.OpenComponent<AntIcon>(31);
+                builder.OpenComponent<Icon>(31);
                 builder.AddAttribute(32, "Type", "close-circle");
                 if (string.IsNullOrEmpty(Value))
                 {
diff --git a/components/input/InputPassword.razor.cs b/components/input/InputPassword.razor.cs
index 841d93880..bf622d613 100644
--- a/components/input/InputPassword.razor.cs
+++ b/components/input/InputPassword.razor.cs
@@ -36,7 +36,7 @@ namespace AntDesign
                     int i = 0;
                     builder.OpenElement(i++, "span");
                     builder.AddAttribute(i++, "class", $"{PrefixCls}-suffix");
-                    builder.OpenComponent<AntIcon>(i++);
+                    builder.OpenComponent<Icon>(i++);
                     builder.AddAttribute(i++, "class", $"{PrefixCls}-password-icon");
                     builder.AddAttribute(i++, "type", _eyeIcon);
                     builder.AddAttribute(i++, "onclick", CallbackFactory.Create(this, ToggleVisibility));
diff --git a/components/input/Search.razor.cs b/components/input/Search.razor.cs
index b679daadc..350456d37 100644
--- a/components/input/Search.razor.cs
+++ b/components/input/Search.razor.cs
@@ -26,7 +26,7 @@ namespace AntDesign
             {
                 Suffix = new RenderFragment((builder) =>
                 {
-                    builder.OpenComponent<AntIcon>(35);
+                    builder.OpenComponent<Icon>(35);
                     builder.AddAttribute(36, "class", $"{PrefixCls}-search-icon");
                     builder.AddAttribute(37, "type", "search");
                     builder.AddAttribute(38, "onclick", CallbackFactory.Create<MouseEventArgs>(this, HandleSearch));
diff --git a/components/layout/Sider.razor b/components/layout/Sider.razor
index b5ca46cf0..1b12d1382 100644
--- a/components/layout/Sider.razor
+++ b/components/layout/Sider.razor
@@ -6,7 +6,7 @@
     {
         <span class="ant-layout-sider-zero-width-trigger ant-layout-sider-zero-width-trigger-left"
               @onclick="ToggleCollapsed">
-            <AntIcon Type="bars" />
+            <Icon Type="bars" />
         </span>
     }
     <CascadingValue Value="this">
diff --git a/components/layout/Sider.razor.cs b/components/layout/Sider.razor.cs
index 04f2e0b01..8992f5bd3 100644
--- a/components/layout/Sider.razor.cs
+++ b/components/layout/Sider.razor.cs
@@ -64,7 +64,7 @@ namespace AntDesign
 
         private RenderFragment defaultTrigger => builder =>
         {
-            builder.OpenComponent<AntIcon>(1);
+            builder.OpenComponent<Icon>(1);
             builder.AddAttribute(2, "Type", isCollapsed ? "right" : "left");
             builder.AddAttribute(3, "Theme", "outline");
             builder.CloseComponent();
@@ -123,4 +123,4 @@ namespace AntDesign
             StateHasChanged();
         }
     }
-}
+}
\ No newline at end of file
diff --git a/components/list/AntList.razor b/components/list/AntList.razor
index cb3f97866..87681b257 100644
--- a/components/list/AntList.razor
+++ b/components/list/AntList.razor
@@ -41,14 +41,14 @@
     @<Template>
         @if (content.Grid != null)
         {
-            <AntRow Gutter="content.Grid.Gutter">
+            <Row Gutter="content.Grid.Gutter">
                 @foreach (var item in content.DataSource)
                 {
                     <AntListItem>
                         @content.Item(item)
                     </AntListItem>
                 }
-            </AntRow>
+            </Row>
         }
         else
         {
diff --git a/components/list/AntListItem.razor b/components/list/AntListItem.razor
index 3f5e0f4c1..e9fd565f5 100644
--- a/components/list/AntListItem.razor
+++ b/components/list/AntListItem.razor
@@ -9,11 +9,11 @@
 }
 else
 {
-    <AntCol Flex="1" Style="@ColStyle">
-        <div class="@ClassMapper.Class" style="@Style" Id="@Id">
-            @itemChildren(this)
-        </div>
-    </AntCol>
+<AntDesign.Col Flex="1" Style="@ColStyle">
+    <div class="@ClassMapper.Class" style="@Style" Id="@Id">
+        @itemChildren(this)
+    </div>
+</AntDesign.Col>
 
 }
 @code{
diff --git a/components/message/MessageItem.razor b/components/message/MessageItem.razor
index 97d732e53..83a1edd54 100644
--- a/components/message/MessageItem.razor
+++ b/components/message/MessageItem.razor
@@ -9,28 +9,28 @@
                 {
                     case MessageType.Success:
                         {
-                            <AntIcon Type="check-circle" Theme="fill" Class="anticon anticon-check-circle" ></AntIcon>
+                            <Icon Type="check-circle" Theme="fill" Class="anticon anticon-check-circle" ></Icon>
 
                             break;
                         }
                     case MessageType.Warning:
                         {
-                            <AntIcon Type="exclamation-circle" Theme="fill" Class="anticon anticon-exclamation-circle"></AntIcon>
+                            <Icon Type="exclamation-circle" Theme="fill" Class="anticon anticon-exclamation-circle"></Icon>
                             break;
                         }
                     case MessageType.Error:
                         {
-                            <AntIcon Type="close-circle" Theme="fill"  Class="anticon anticon-close-circle"></AntIcon>
+                            <Icon Type="close-circle" Theme="fill"  Class="anticon anticon-close-circle"></Icon>
                             break;
                         }
                     case MessageType.Info:
                         {
-                            <AntIcon Type="info-circle" Theme="fill" Class="anticon anticon-info-circle"></AntIcon>
+                            <Icon Type="info-circle" Theme="fill" Class="anticon anticon-info-circle"></Icon>
                             break;
                         }
                     default:
                         {
-                            <AntIcon Type="loading" Theme="outline" Class="anticon anticon-loading"></AntIcon>
+                            <Icon Type="loading" Theme="outline" Class="anticon anticon-loading"></Icon>
                             break;
                         }
                 }
diff --git a/components/modal/Modal.razor.cs b/components/modal/Modal.razor.cs
index 08e85f856..4e32041b5 100644
--- a/components/modal/Modal.razor.cs
+++ b/components/modal/Modal.razor.cs
@@ -32,7 +32,7 @@ namespace AntDesign
 
         private static readonly RenderFragment _defaultCloseIcon = (builder) =>
         {
-            builder.OpenComponent<AntIcon>(0);
+            builder.OpenComponent<Icon>(0);
             builder.AddAttribute(1, "Type", "Close");
             builder.AddAttribute(2, "Theme", "Outline");
             builder.CloseComponent();
diff --git a/components/modal/ModalService.cs b/components/modal/ModalService.cs
index d117586ca..e32bbfe11 100644
--- a/components/modal/ModalService.cs
+++ b/components/modal/ModalService.cs
@@ -25,7 +25,7 @@ namespace AntDesign
             }
             options.Icon = (builder) =>
             {
-                builder.OpenComponent<AntIcon>(0);
+                builder.OpenComponent<Icon>(0);
                 builder.AddAttribute(1, "Type", "info-circle");
                 builder.AddAttribute(2, "Theme", "outline");
                 builder.CloseComponent();
@@ -44,7 +44,7 @@ namespace AntDesign
             }
             options.Icon = (builder) =>
             {
-                builder.OpenComponent<AntIcon>(0);
+                builder.OpenComponent<Icon>(0);
                 builder.AddAttribute(1, "Type", "check-circle");
                 builder.AddAttribute(2, "Theme", "outline");
                 builder.CloseComponent();
@@ -63,7 +63,7 @@ namespace AntDesign
             }
             options.Icon = (builder) =>
             {
-                builder.OpenComponent<AntIcon>(0);
+                builder.OpenComponent<Icon>(0);
                 builder.AddAttribute(1, "Type", "close-circle");
                 builder.AddAttribute(2, "Theme", "outline");
                 builder.CloseComponent();
@@ -82,7 +82,7 @@ namespace AntDesign
             }
             options.Icon = (builder) =>
             {
-                builder.OpenComponent<AntIcon>(0);
+                builder.OpenComponent<Icon>(0);
                 builder.AddAttribute(1, "Type", "exclamation-circle");
                 builder.AddAttribute(2, "Theme", "outline");
                 builder.CloseComponent();
diff --git a/components/modal/config/DialogOptions.cs b/components/modal/config/DialogOptions.cs
index 8211a7c85..c02468712 100644
--- a/components/modal/config/DialogOptions.cs
+++ b/components/modal/config/DialogOptions.cs
@@ -23,7 +23,7 @@ namespace AntDesign
 
         private static readonly RenderFragment _defaultCloseIcon = (builder) =>
         {
-            builder.OpenComponent<AntIcon>(0);
+            builder.OpenComponent<Icon>(0);
             builder.AddAttribute(1, "Type", "Close");
             builder.AddAttribute(2, "Theme", "Outline");
             builder.CloseComponent();
diff --git a/components/notification/Notification.razor.cs b/components/notification/Notification.razor.cs
index 26d290adf..52f3672a0 100644
--- a/components/notification/Notification.razor.cs
+++ b/components/notification/Notification.razor.cs
@@ -86,7 +86,7 @@ namespace AntDesign
 
         private RenderFragment _defaultCloseIcon = (builder) =>
         {
-            builder.OpenComponent<AntIcon>(0);
+            builder.OpenComponent<Icon>(0);
             builder.AddAttribute(1, "Type", "close");
             builder.CloseComponent();
         };
diff --git a/components/notification/NotificationItem.razor b/components/notification/NotificationItem.razor
index 858b183db..a225b2978 100644
--- a/components/notification/NotificationItem.razor
+++ b/components/notification/NotificationItem.razor
@@ -21,7 +21,7 @@
                     case NotificationType.Success:
                         {
                             <span role="img" aria-label="check-circle" class="anticon anticon-check-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-success">
-                                <AntIcon Type="check-circle" Theme="outline"></AntIcon>
+                                <Icon Type="check-circle" Theme="outline"></Icon>
                             </span>
 
                             break;
@@ -29,7 +29,7 @@
                     case NotificationType.Warning:
                         {
                             <span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-warning">
-                                <AntIcon Type="exclamation-circle" Theme="outline"></AntIcon>
+                                <Icon Type="exclamation-circle" Theme="outline"></Icon>
                             </span>
 
                             break;
@@ -37,7 +37,7 @@
                     case NotificationType.Error:
                         {
                             <span role="img" aria-label="close-circle" class="anticon anticon-close-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-error">
-                                <AntIcon Type="close-circle" Theme="outline"></AntIcon>
+                                <Icon Type="close-circle" Theme="outline"></Icon>
                             </span>
 
                             break;
@@ -45,7 +45,7 @@
                     case NotificationType.Info:
                         {
                             <span role="img" aria-label="info-circle" class="anticon anticon-info-circle @(ClassPrefix)-notice-icon @(ClassPrefix)-notice-icon-info">
-                                <AntIcon Type="info-circle" Theme="outline"></AntIcon>
+                                <Icon Type="info-circle" Theme="outline"></Icon>
                             </span>
 
                             break;
diff --git a/components/pagination/PaginationItem.razor b/components/pagination/PaginationItem.razor
index bf254d8c7..1fad4fc84 100644
--- a/components/pagination/PaginationItem.razor
+++ b/components/pagination/PaginationItem.razor
@@ -32,20 +32,20 @@
                     @switch (type)
                     {
                         case "prev":
-                            <AntIcon Type="left"></AntIcon>
+                            <Icon Type="left"></Icon>
                             break;
                         case "next":
-                            <AntIcon Type="right"></AntIcon>
+                            <Icon Type="right"></Icon>
                             break;
                         default:
                             <div class="ant-pagination-item-container">
                                 @if (type == "prev_5")
                                 {
-                                    <AntIcon Type="double-left" Class="ant-pagination-item-link-icon"></AntIcon>
+                                    <Icon Type="double-left" Class="ant-pagination-item-link-icon"></Icon>
                                 }
                                 else if (type == "next_5")
                                 {
-                                    <AntIcon Type="double-right" Class="ant-pagination-item-link-icon"></AntIcon>
+                                    <Icon Type="double-right" Class="ant-pagination-item-link-icon"></Icon>
                                 }
                                 <span class="ant-pagination-item-ellipsis">•••</span>
                             </div>
diff --git a/components/progress/Progress.razor b/components/progress/Progress.razor
index ab62f58d5..aa5adbe79 100644
--- a/components/progress/Progress.razor
+++ b/components/progress/Progress.razor
@@ -36,13 +36,13 @@
                 @if (Status == ProgressStatus.Success)
                 {
                     <span class="ant-progress-text">
-                        <AntIcon Type="check-circle" Theme="@AntIconThemeType.Fill" />
+                        <Icon Type="check-circle" Theme="@IconThemeType.Fill" />
                     </span>
                 }
                 else if (Status == ProgressStatus.Exception)
                 {
                     <span class="ant-progress-text">
-                        <AntIcon Type="close-circle" Theme="@AntIconThemeType.Fill" />
+                        <Icon Type="close-circle" Theme="@IconThemeType.Fill" />
                     </span>
                 }
                 else
@@ -77,13 +77,13 @@
             @if (Status == ProgressStatus.Success && !_format)
             {
                 <span class="ant-progress-text">
-                    <AntIcon Type="check-circle" Theme="@AntIconThemeType.Fill" />
+                    <Icon Type="check-circle" Theme="@IconThemeType.Fill" />
                 </span>
             }
             else if (Status == ProgressStatus.Exception && !_format)
             {
                 <span class="ant-progress-text">
-                    <AntIcon Type="close-circle" Theme="@AntIconThemeType.Fill" />
+                    <Icon Type="close-circle" Theme="@IconThemeType.Fill" />
                 </span>
             }
             else
@@ -106,13 +106,13 @@
             @if (Status == ProgressStatus.Success && !_format)
             {
                 <span class="ant-progress-text">
-                    <AntIcon Type="check-circle" Theme="@AntIconThemeType.Fill" />
+                    <Icon Type="check-circle" Theme="@IconThemeType.Fill" />
                 </span>
             }
             else if (Status == ProgressStatus.Exception && !_format)
             {
                 <span class="ant-progress-text">
-                    <AntIcon Type="close-circle" Theme="@AntIconThemeType.Fill" />
+                    <Icon Type="close-circle" Theme="@IconThemeType.Fill" />
                 </span>
             }
             else
@@ -127,13 +127,13 @@
         if (Status == ProgressStatus.Success)
         {
             <span class="ant-progress-text">
-                <AntIcon Type="check-circle" Theme="@AntIconThemeType.Fill" />
+                <Icon Type="check-circle" Theme="@IconThemeType.Fill" />
             </span>
         }
         else if (Status == ProgressStatus.Exception)
         {
             <span class="ant-progress-text">
-                <AntIcon Type="close-circle" Theme="@AntIconThemeType.Fill" />
+                <Icon Type="close-circle" Theme="@IconThemeType.Fill" />
             </span>
         }
         else
diff --git a/components/rate/RateItem.razor b/components/rate/RateItem.razor
index f77241493..1c4712fff 100644
--- a/components/rate/RateItem.razor
+++ b/components/rate/RateItem.razor
@@ -12,7 +12,7 @@
                 }
                 else
                 {
-                    <AntIcon Type="star" Theme="fill"></AntIcon>
+                    <Icon Type="star" Theme="fill"></Icon>
                 }
             </div>
             <div class="ant-rate-star-second" @onclick="@(async e => await item.OnClick(false))" @onmouseover="@(async e => await item.OnHover(false))">
@@ -22,7 +22,7 @@
                 }
                 else
                 {
-                    <AntIcon Type="star" Theme="fill"></AntIcon>
+                    <Icon Type="star" Theme="fill"></Icon>
                 }
             </div>
         </div>
diff --git a/components/result/Result.razor.cs b/components/result/Result.razor.cs
index 85cf43331..0f5146aee 100644
--- a/components/result/Result.razor.cs
+++ b/components/result/Result.razor.cs
@@ -41,7 +41,7 @@ namespace AntDesign
         {
             var iconType = DetermineIconType();
 
-            builder.OpenComponent<AntIcon>(1);
+            builder.OpenComponent<Icon>(1);
             builder.AddAttribute(2, "Type", iconType.type);
             builder.AddAttribute(2, "Theme", iconType.theme);
             builder.CloseComponent();
diff --git a/components/steps/AntStep.razor b/components/steps/Step.razor
similarity index 89%
rename from components/steps/AntStep.razor
rename to components/steps/Step.razor
index c8abda008..86d7fd4b2 100644
--- a/components/steps/AntStep.razor
+++ b/components/steps/Step.razor
@@ -16,11 +16,11 @@
                         {
                             if (Status == "finish")
                             {
-                                <AntIcon type="check"></AntIcon>
+                                <Icon type="check"></Icon>
                             }
                             else if (Status == "error")
                             {
-                                <AntIcon type="close"></AntIcon>
+                                <Icon type="close"></Icon>
                             }
                             else if (Status == "process" || Status == "wait")
                             {
@@ -31,11 +31,11 @@
                         {
                             if (Status == "error")
                             {
-                                <AntIcon type="close"></AntIcon>
+                                <Icon type="close"></Icon>
                             }
                             else
                             {
-                                <AntIcon type="@Icon"></AntIcon>
+                                <Icon type="@Icon"></Icon>
                             }
 
                         }
diff --git a/components/steps/AntStep.razor.cs b/components/steps/Step.razor.cs
similarity index 97%
rename from components/steps/AntStep.razor.cs
rename to components/steps/Step.razor.cs
index 140b281e1..4e6616eb8 100644
--- a/components/steps/AntStep.razor.cs
+++ b/components/steps/Step.razor.cs
@@ -4,7 +4,7 @@ using System.Collections.Generic;
 
 namespace AntDesign
 {
-    public partial class AntStep : AntDomComponentBase
+    public partial class Step : AntDomComponentBase
     {
         private string _status = "wait";
         private bool _isCustomStatus;
@@ -36,7 +36,7 @@ namespace AntDesign
         internal string Direction { get; set; } = "horizontal";
 
         [CascadingParameter]
-        public AntSteps Parent { get; set; }
+        public Steps Parent { get; set; }
 
         [Parameter]
         public string Icon { get; set; }
diff --git a/components/steps/AntSteps.razor b/components/steps/Steps.razor
similarity index 100%
rename from components/steps/AntSteps.razor
rename to components/steps/Steps.razor
diff --git a/components/steps/AntSteps.razor.cs b/components/steps/Steps.razor.cs
similarity index 95%
rename from components/steps/AntSteps.razor.cs
rename to components/steps/Steps.razor.cs
index 8f5253a19..9fcda6ea6 100644
--- a/components/steps/AntSteps.razor.cs
+++ b/components/steps/Steps.razor.cs
@@ -5,13 +5,13 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public partial class AntSteps : AntDomComponentBase
+    public partial class Steps : AntDomComponentBase
     {
         private bool _showProgressDot;
         private RenderFragment _progressDot;
         public EventHandler Handler { get; }
 
-        internal List<AntStep> _children = new List<AntStep>();
+        internal List<Step> _children = new List<Step>();
         [Parameter] public int Current { get; set; }
 
         [Parameter]
@@ -69,7 +69,7 @@ namespace AntDesign
                 _children[i].Index = i + this.StartIndex;
                 _children[i].GroupCurrentIndex = this.Current;
                 _children[i].Last = _children.Count == i + 1;
-                AntStep.MarkForCheck();
+                Step.MarkForCheck();
             }
         }
 
diff --git a/components/tabs/AntTabPane.razor b/components/tabs/TabPane.razor
similarity index 100%
rename from components/tabs/AntTabPane.razor
rename to components/tabs/TabPane.razor
diff --git a/components/tabs/AntTabPane.razor.cs b/components/tabs/TabPane.razor.cs
similarity index 85%
rename from components/tabs/AntTabPane.razor.cs
rename to components/tabs/TabPane.razor.cs
index 634154765..37cc9cece 100644
--- a/components/tabs/AntTabPane.razor.cs
+++ b/components/tabs/TabPane.razor.cs
@@ -2,20 +2,20 @@
 
 namespace AntDesign
 {
-    public partial class AntTabPane : AntDomComponentBase
+    public partial class TabPane : AntDomComponentBase
     {
         private const string PrefixCls = "ant-tabs-tab";
-        private AntTabs _parent;
+        private Tabs _parent;
 
         internal ClassMapper _classMapper = new ClassMapper();
 
         internal bool IsActive { get; set; }
 
-        public AntTabPane()
+        public TabPane()
         {
         }
 
-        public AntTabPane(string key, RenderFragment tab, RenderFragment childContent)
+        public TabPane(string key, RenderFragment tab, RenderFragment childContent)
         {
             this.Key = key;
             this.Tab = tab;
@@ -23,7 +23,7 @@ namespace AntDesign
         }
 
         [CascadingParameter]
-        internal AntTabs Parent
+        internal Tabs Parent
         {
             get
             {
@@ -52,7 +52,7 @@ namespace AntDesign
         public string Key { get; set; }
 
         /// <summary>
-        /// Show text in <see cref="AntTabPane"/>'s head
+        /// Show text in <see cref="TabPane"/>'s head
         /// </summary>
         [Parameter]
         public RenderFragment Tab { get; set; }
diff --git a/components/tabs/AntTabPosition.cs b/components/tabs/TabPosition.cs
similarity index 89%
rename from components/tabs/AntTabPosition.cs
rename to components/tabs/TabPosition.cs
index ea1d3aafd..971e73e6e 100644
--- a/components/tabs/AntTabPosition.cs
+++ b/components/tabs/TabPosition.cs
@@ -6,7 +6,7 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public static class AntTabPosition
+    public static class TabPosition
     {
         public const string Top = "top";
         public const string Right = "right";
diff --git a/components/tabs/AntTabSize.cs b/components/tabs/TabSize.cs
similarity index 89%
rename from components/tabs/AntTabSize.cs
rename to components/tabs/TabSize.cs
index d167521db..5c179cdd9 100644
--- a/components/tabs/AntTabSize.cs
+++ b/components/tabs/TabSize.cs
@@ -6,7 +6,7 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public static class AntTabSize
+    public static class TabSize
     {
         public const string Large = "large";
         public const string Default = "default";
diff --git a/components/tabs/AntTabType.cs b/components/tabs/TabType.cs
similarity index 89%
rename from components/tabs/AntTabType.cs
rename to components/tabs/TabType.cs
index 86f8d9c65..ca4b64acf 100644
--- a/components/tabs/AntTabType.cs
+++ b/components/tabs/TabType.cs
@@ -6,10 +6,10 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public static class AntTabType
+    public static class TabType
     {
         public const string Line = "line";
         public const string Card = "card";
         public const string EditableCard = "editable-card";
     }
-}
\ No newline at end of file
+}
diff --git a/components/tabs/AntTabs.razor b/components/tabs/Tabs.razor
similarity index 83%
rename from components/tabs/AntTabs.razor
rename to components/tabs/Tabs.razor
index 5c6ea5207..bf289bcc2 100644
--- a/components/tabs/AntTabs.razor
+++ b/components/tabs/Tabs.razor
@@ -13,19 +13,19 @@
         </div>
     }
 
-    @if (TabPosition != AntTabPosition.Bottom)
+    @if (TabPosition != AntDesign.TabPosition.Bottom)
     {
         <!--Tab bar-->
         <div tabindex="-1" class="@_barClassMapper.Class" role="tablist">
             <div class="@_navClassMapper.Class">
                 <span class="@_prevClassMapper.Class" unselectable="unselectable" @onclick="OnPrevClicked">
                     <span class="ant-tabs-tab-prev-icon">
-                        <AntIcon class="ant-tabs-tab-prev-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"left":"up")" />
+                        <Icon class="ant-tabs-tab-prev-icon-target" type="@(TabPosition ==  AntDesign.TabPosition.Top || TabPosition ==  AntDesign.TabPosition.Bottom?"left":"up")" />
                     </span>
                 </span>
                 <span class="@_nextClassMapper.Class" unselectable="unselectable" @onclick="OnNextClicked">
                     <span class="ant-tabs-tab-next-icon">
-                        <AntIcon class="ant-tabs-tab-next-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"right":"down")" />
+                        <Icon class="ant-tabs-tab-next-icon-target" type="@(TabPosition ==  AntDesign.TabPosition.Top || TabPosition ==  AntDesign.TabPosition.Bottom?"right":"down")" />
                     </span>
                 </span>
                 <div class="ant-tabs-nav-wrap" @ref="_scrollTabBar">
@@ -43,11 +43,11 @@
                                              ondragover="event.preventDefault();"
                                              @ondragstart="(e)=>HandleDragStart(e, pane)"
                                              @ondrop="(e)=>HandleDrop(pane)">
-                                            @if (Type == AntTabType.EditableCard && pane.Closable)
+                                            @if (Type == TabType.EditableCard && pane.Closable)
                                             {
                                                 <div>
                                                     @pane.Tab
-                                                    <AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
+                                                    <Icon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
                                                 </div>
                                             }
                                             else
@@ -65,11 +65,11 @@
                                              ondragover="event.preventDefault();"
                                              @ondragstart="(e)=>HandleDragStart(e, pane)"
                                              @ondrop="(e)=>HandleDrop(pane)">
-                                            @if (Type == AntTabType.EditableCard && pane.Closable)
+                                            @if (Type == TabType.EditableCard && pane.Closable)
                                             {
                                                 <div>
                                                     @pane.Tab
-                                                    <AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
+                                                    <Icon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
                                                 </div>
                                             }
                                             else
@@ -102,19 +102,19 @@
 
         }
     </div>
-    @if (TabPosition == AntTabPosition.Bottom)
+    @if (TabPosition == AntDesign.TabPosition.Bottom)
     {
         <!--Tab bar-->
         <div tabindex="-1" class="@_barClassMapper.Class" role="tablist">
             <div class="@_navClassMapper.Class">
                 <span class="@_prevClassMapper.Class" unselectable="unselectable" @onclick="OnPrevClicked">
                     <span class="ant-tabs-tab-prev-icon">
-                        <AntIcon class="ant-tabs-tab-prev-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"left":"up")" />
+                        <Icon class="ant-tabs-tab-prev-icon-target" type="@(TabPosition ==  AntDesign.TabPosition.Top || TabPosition ==  AntDesign.TabPosition.Bottom?"left":"up")" />
                     </span>
                 </span>
                 <span class="@_nextClassMapper.Class" unselectable="unselectable" @onclick="OnNextClicked">
                     <span class="ant-tabs-tab-next-icon">
-                        <AntIcon class="ant-tabs-tab-next-icon-target" type="@(TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom?"right":"down")" />
+                        <Icon class="ant-tabs-tab-next-icon-target" type="@(TabPosition ==  AntDesign.TabPosition.Top || TabPosition ==  AntDesign.TabPosition.Bottom?"right":"down")" />
                     </span>
                 </span>
                 <div class="ant-tabs-nav-wrap" @ref="_scrollTabBar">
@@ -132,11 +132,11 @@
                                              ondragover="event.preventDefault();"
                                              @ondragstart="(e)=>HandleDragStart(e, pane)"
                                              @ondrop="(e)=>HandleDrop(pane)">
-                                            @if (Type == AntTabType.EditableCard && pane.Closable)
+                                            @if (Type == TabType.EditableCard && pane.Closable)
                                             {
                                                 <div>
                                                     @pane.Tab
-                                                    <AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
+                                                    <Icon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
                                                 </div>
                                             }
                                             else
@@ -154,11 +154,11 @@
                                              ondragover="event.preventDefault();"
                                              @ondragstart="(e)=>HandleDragStart(e, pane)"
                                              @ondrop="(e)=>HandleDrop(pane)">
-                                            @if (Type == AntTabType.EditableCard && pane.Closable)
+                                            @if (Type == TabType.EditableCard && pane.Closable)
                                             {
                                                 <div>
                                                     @pane.Tab
-                                                    <AntIcon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
+                                                    <Icon class="ant-tabs-close-x" type="close" @onclick="(e)=>RemoveTabPane(pane)" />
                                                 </div>
                                             }
                                             else
diff --git a/components/tabs/AntTabs.razor.cs b/components/tabs/Tabs.razor.cs
similarity index 86%
rename from components/tabs/AntTabs.razor.cs
rename to components/tabs/Tabs.razor.cs
index 1fed27055..8e45cc80a 100644
--- a/components/tabs/AntTabs.razor.cs
+++ b/components/tabs/Tabs.razor.cs
@@ -8,16 +8,16 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public partial class AntTabs : AntDomComponentBase
+    public partial class Tabs : AntDomComponentBase
     {
         private const string PrefixCls = "ant-tabs";
-        private bool IsHorizontal { get => TabPosition == AntTabPosition.Top || TabPosition == AntTabPosition.Bottom; }
+        private bool IsHorizontal { get => TabPosition == AntDesign.TabPosition.Top || TabPosition == AntDesign.TabPosition.Bottom; }
         private ClassMapper _barClassMapper = new ClassMapper();
         private ClassMapper _prevClassMapper = new ClassMapper();
         private ClassMapper _nextClassMapper = new ClassMapper();
         private ClassMapper _navClassMapper = new ClassMapper();
-        private AntTabPane _activePane;
-        private AntTabPane _renderedActivePane;
+        private TabPane _activePane;
+        private TabPane _renderedActivePane;
         private ElementReference _activeTabBar;
         private ElementReference _scrollTabBar;
         private ElementReference _tabBars;
@@ -30,7 +30,7 @@ namespace AntDesign
         private int _navTotal;
         private int _navSection;
         private bool _needRefresh;
-        internal List<AntTabPane> _panes = new List<AntTabPane>();
+        internal List<TabPane> _panes = new List<TabPane>();
 
         #region Parameters
 
@@ -40,7 +40,7 @@ namespace AntDesign
         private string _activeKey;
 
         /// <summary>
-        /// Current <see cref="AntTabPane"/>'s <see cref="AntTabPane.Key"/>
+        /// Current <see cref="TabPane"/>'s <see cref="TabPane.Key"/>
         /// </summary>
         [Parameter]
         public string ActiveKey
@@ -60,7 +60,7 @@ namespace AntDesign
         }
 
         /// <summary>
-        /// Whether to change tabs with animation. Only works while <see cref="TabPosition"/> = <see cref="AntTabPosition.Top"/> or <see cref="AntTabPosition.Bottom"/>
+        /// Whether to change tabs with animation. Only works while <see cref="TabPosition"/> = <see cref="TabPosition.Top"/> or <see cref="TabPosition.Bottom"/>
         /// </summary>
         [Parameter]
         public bool Animated { get; set; } = true;
@@ -72,13 +72,13 @@ namespace AntDesign
         public object RenderTabBar { get; set; }
 
         /// <summary>
-        /// Initial active <see cref="AntTabPane"/>'s <see cref="AntTabPane.Key"/>, if <see cref="ActiveKey"/> is not set
+        /// Initial active <see cref="TabPane"/>'s <see cref="TabPane.Key"/>, if <see cref="ActiveKey"/> is not set
         /// </summary>
         [Parameter]
         public string DefaultActiveKey { get; set; }
 
         /// <summary>
-        /// Hide plus icon or not. Only works while <see cref="Type"/> = <see cref="AntTabType.EditableCard"/>
+        /// Hide plus icon or not. Only works while <see cref="Type"/> = <see cref="TabType.EditableCard"/>
         /// </summary>
         [Parameter]
         public bool HideAdd { get; set; } = false;
@@ -87,7 +87,7 @@ namespace AntDesign
         /// Preset tab bar size
         /// </summary>
         [Parameter]
-        public string Size { get; set; } = AntTabSize.Default;
+        public string Size { get; set; } = TabSize.Default;
 
         /// <summary>
         /// Extra content in tab bar
@@ -111,13 +111,13 @@ namespace AntDesign
         /// Position of tabs
         /// </summary>
         [Parameter]
-        public string TabPosition { get; set; } = AntTabPosition.Top;
+        public string TabPosition { get; set; } = AntDesign.TabPosition.Top;
 
         /// <summary>
         /// Basic style of tabs
         /// </summary>
         [Parameter]
-        public string Type { get; set; } = AntTabType.Line;
+        public string Type { get; set; } = TabType.Line;
 
         /// <summary>
         /// Callback executed when active tab is changed
@@ -126,7 +126,7 @@ namespace AntDesign
         public EventCallback<object> OnChange { get; set; }
 
         /// <summary>
-        /// Callback executed when tab is added or removed. Only works while <see cref="Type"/> = <see cref="AntTabType.EditableCard"/>
+        /// Callback executed when tab is added or removed. Only works while <see cref="Type"/> = <see cref="TabType.EditableCard"/>
         /// </summary>
         [Parameter]
         public EventCallback<object> OnEdit { get; set; }
@@ -156,7 +156,7 @@ namespace AntDesign
         public bool Keyboard { get; set; } = true;
 
         [Parameter]
-        public Func<AntTabPane> CreateTabPane { get; set; }
+        public Func<TabPane> CreateTabPane { get; set; }
 
         [Parameter]
         public bool Draggable { get; set; }
@@ -168,7 +168,7 @@ namespace AntDesign
             _needRefresh = true;
             _renderedActivePane = null;
             string type = parameters.GetValueOrDefault<string>(nameof(Type));
-            if (type == AntTabType.Card)
+            if (type == TabType.Card)
             {
                 // according to ant design documents,
                 // Animated default to false when type="card"
@@ -188,11 +188,11 @@ namespace AntDesign
         {
             base.OnParametersSet();
 
-            if (Type == AntTabType.EditableCard && !HideAdd)
+            if (Type == TabType.EditableCard && !HideAdd)
             {
                 TabBarExtraContent = (b) =>
                 {
-                    b.OpenComponent<AntIcon>(0);
+                    b.OpenComponent<Icon>(0);
                     b.AddAttribute(1, "Type", "plus");
                     b.AddAttribute(2, "class", $"{PrefixCls}-new-tab");
                     b.AddAttribute(3, "onclick", EventCallback.Factory.Create(this, AddTabPane));
@@ -204,18 +204,18 @@ namespace AntDesign
                 .Add(PrefixCls)
                 .Add($"{PrefixCls}-{TabPosition}")
                 .Add($"{PrefixCls}-{Type}")
-                .If($"{PrefixCls}-large", () => Size == AntTabSize.Large)
-                .If($"{PrefixCls}-small", () => Size == AntTabSize.Small)
-                .If($"{PrefixCls}-{AntTabType.Card}", () => Type == AntTabType.EditableCard)
+                .If($"{PrefixCls}-large", () => Size == TabSize.Large)
+                .If($"{PrefixCls}-small", () => Size == TabSize.Small)
+                .If($"{PrefixCls}-{TabType.Card}", () => Type == TabType.EditableCard)
                 .If($"{PrefixCls}-no-animation", () => !Animated);
 
             _barClassMapper.Clear()
                 .Add($"{PrefixCls}-bar")
                 .Add($"{PrefixCls}-{TabPosition}-bar")
                 .Add($"{PrefixCls}-{Type}-bar")
-                .If($"{PrefixCls}-{AntTabType.Card}-bar", () => Type == AntTabType.EditableCard)
-                .If($"{PrefixCls}-large-bar", () => Size == AntTabSize.Large)
-                .If($"{PrefixCls}-small-bar", () => Size == AntTabSize.Small);
+                .If($"{PrefixCls}-{TabType.Card}-bar", () => Type == TabType.EditableCard)
+                .If($"{PrefixCls}-large-bar", () => Size == TabSize.Large)
+                .If($"{PrefixCls}-small-bar", () => Size == TabSize.Small);
 
             _prevClassMapper.Clear()
                 .Add($"{PrefixCls}-tab-prev")
@@ -242,7 +242,7 @@ namespace AntDesign
         /// <param name="tabPane">The AntTabPane to be added</param>
         /// <exception cref="ArgumentNullException">Key is null</exception>
         /// <exception cref="ArgumentException">An AntTabPane with the same key already exists</exception>
-        internal void AddTabPane(AntTabPane tabPane)
+        internal void AddTabPane(TabPane tabPane)
         {
             if (string.IsNullOrEmpty(tabPane.Key))
             {
@@ -265,15 +265,15 @@ namespace AntDesign
         {
             if (CreateTabPane != null)
             {
-                AntTabPane pane = CreateTabPane();
+                TabPane pane = CreateTabPane();
                 Dictionary<string, object> properties = new Dictionary<string, object>
                 {
-                    [nameof(AntTabPane.Parent)] = this,
-                    [nameof(AntTabPane.ForceRender)] = pane.ForceRender,
-                    [nameof(AntTabPane.Key)] = pane.Key,
-                    [nameof(AntTabPane.Tab)] = pane.Tab,
-                    [nameof(AntTabPane.ChildContent)] = pane.ChildContent,
-                    [nameof(AntTabPane.Disabled)] = pane.Disabled
+                    [nameof(TabPane.Parent)] = this,
+                    [nameof(TabPane.ForceRender)] = pane.ForceRender,
+                    [nameof(TabPane.Key)] = pane.Key,
+                    [nameof(TabPane.Tab)] = pane.Tab,
+                    [nameof(TabPane.ChildContent)] = pane.ChildContent,
+                    [nameof(TabPane.Disabled)] = pane.Disabled
                 };
                 pane.SetParametersAsync(ParameterView.FromDictionary(properties));
                 pane.Parent = this;
@@ -281,7 +281,7 @@ namespace AntDesign
             }
         }
 
-        public void RemoveTabPane(AntTabPane pane)
+        public void RemoveTabPane(TabPane pane)
         {
             _needRefresh = true;
             _panes.Remove(pane);
@@ -291,7 +291,7 @@ namespace AntDesign
             }
         }
 
-        private void ActivatePane(AntTabPane tabPane)
+        private void ActivatePane(TabPane tabPane)
         {
             if (!tabPane.Disabled && _panes.Contains(tabPane))
             {
@@ -475,9 +475,9 @@ namespace AntDesign
 
         #region DRAG & DROP
 
-        private AntTabPane _draggingPane;
+        private TabPane _draggingPane;
 
-        private void HandleDragStart(DragEventArgs args, AntTabPane pane)
+        private void HandleDragStart(DragEventArgs args, TabPane pane)
         {
             if (Draggable)
             {
@@ -487,7 +487,7 @@ namespace AntDesign
             }
         }
 
-        private void HandleDrop(AntTabPane pane)
+        private void HandleDrop(TabPane pane)
         {
             if (Draggable && _draggingPane != null)
             {
diff --git a/components/tag/AntTag.razor b/components/tag/Tag.razor
similarity index 73%
rename from components/tag/AntTag.razor
rename to components/tag/Tag.razor
index 5ace62957..4fbbd4311 100644
--- a/components/tag/AntTag.razor
+++ b/components/tag/Tag.razor
@@ -7,12 +7,12 @@
     <div class="@ClassMapper.Class" style="@Style" id="@Id" @ref="Ref" @onclick="ClickTag">
         @if (!string.IsNullOrEmpty(Icon))
         {
-            <AntIcon Type="@Icon"></AntIcon>
+            <Icon Type="@Icon"></Icon>
         }
         @ChildContent
         @if (Mode == "closeable" || Closable)
         {
-            <AntIcon Type="close" TabIndex="-1" @onclick="CloseTag" />
+            <Icon Type="close" TabIndex="-1" @onclick="CloseTag" />
         }
 
     </div>
diff --git a/components/tag/AntTag.razor.cs b/components/tag/Tag.razor.cs
similarity index 98%
rename from components/tag/AntTag.razor.cs
rename to components/tag/Tag.razor.cs
index 75adf6e16..da7486f45 100644
--- a/components/tag/AntTag.razor.cs
+++ b/components/tag/Tag.razor.cs
@@ -8,7 +8,7 @@ using Microsoft.AspNetCore.Components.Web;
 
 namespace AntDesign
 {
-    public partial class AntTag : AntDomComponentBase
+    public partial class Tag : AntDomComponentBase
     {
         [Parameter]
         public RenderFragment ChildContent { get; set; }
diff --git a/components/timeline/AntTimeline.razor b/components/timeline/Timeline.razor
similarity index 91%
rename from components/timeline/AntTimeline.razor
rename to components/timeline/Timeline.razor
index 434cc5f53..83eba4350 100644
--- a/components/timeline/AntTimeline.razor
+++ b/components/timeline/Timeline.razor
@@ -25,6 +25,6 @@
 
 @code{
 
-  private RenderFragment _loadingDot = @<AntIcon type="loading"></AntIcon>;
+  private RenderFragment _loadingDot = @<Icon type="loading"></Icon>;
 
 }
diff --git a/components/timeline/AntTimeline.razor.cs b/components/timeline/Timeline.razor.cs
similarity index 85%
rename from components/timeline/AntTimeline.razor.cs
rename to components/timeline/Timeline.razor.cs
index 5535161b9..d469099f0 100644
--- a/components/timeline/AntTimeline.razor.cs
+++ b/components/timeline/Timeline.razor.cs
@@ -5,7 +5,7 @@ using Microsoft.AspNetCore.Components;
 
 namespace AntDesign
 {
-    public partial class AntTimeline : AntDomComponentBase
+    public partial class Timeline : AntDomComponentBase
     {
         /// <summary>
         /// 'left' | 'alternate' | 'right'
@@ -21,12 +21,12 @@ namespace AntDesign
 
         protected virtual RenderFragment LoadingDot { get; }
 
-        private AntTimelineItem PendingItem
+        private TimelineItem PendingItem
         {
             get
             {
                 if (this.Pending == null) return null;
-                var item = new AntTimelineItem(
+                var item = new TimelineItem(
                     childContent: !_isPendingBoolean ? Pending : null,
                     dot: PendingDot ?? LoadingDot,
                     @class: "ant-timeline-item-pending"
@@ -43,13 +43,13 @@ namespace AntDesign
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
-        private IList<AntTimelineItem> _items = new List<AntTimelineItem>();
+        private IList<TimelineItem> _items = new List<TimelineItem>();
 
-        protected IList<AntTimelineItem> DisplayItems
+        protected IList<TimelineItem> DisplayItems
         {
             get
             {
-                var pitems = PendingItem != null ? new[] { PendingItem } : Array.Empty<AntTimelineItem>();
+                var pitems = PendingItem != null ? new[] { PendingItem } : Array.Empty<TimelineItem>();
                 if (Reverse)
                 {
                     return pitems.Concat(UpdateChildren(_items.Reverse())).ToList();
@@ -86,13 +86,13 @@ namespace AntDesign
                 .If($"{prefix}-reverse", () => Reverse);
         }
 
-        internal void AddItem(AntTimelineItem item)
+        internal void AddItem(TimelineItem item)
         {
             this._items.Add(item);
             StateHasChanged();
         }
 
-        protected IEnumerable<AntTimelineItem> UpdateChildren(IEnumerable<AntTimelineItem> items)
+        protected IEnumerable<TimelineItem> UpdateChildren(IEnumerable<TimelineItem> items)
         {
             if (!items.Any())
                 yield break;
diff --git a/components/timeline/AntTimelineItem.cs b/components/timeline/TimelineItem.cs
similarity index 88%
rename from components/timeline/AntTimelineItem.cs
rename to components/timeline/TimelineItem.cs
index 3a0653547..673a3d9d4 100644
--- a/components/timeline/AntTimelineItem.cs
+++ b/components/timeline/TimelineItem.cs
@@ -3,7 +3,7 @@ using System.Linq;
 
 namespace AntDesign
 {
-    public partial class AntTimelineItem : AntDomComponentBase
+    public partial class TimelineItem : AntDomComponentBase
     {
         [Parameter]
         public RenderFragment ChildContent { get; set; }
@@ -14,7 +14,7 @@ namespace AntDesign
         [Parameter]
         public string Color { get; set; } = "blue";
 
-        [CascadingParameter] public AntTimeline ParentTimeline { get; set; }
+        [CascadingParameter] public Timeline ParentTimeline { get; set; }
 
         internal ClassMapper _headClassMapper = new ClassMapper();
 
@@ -29,12 +29,12 @@ namespace AntDesign
 
         private readonly string[] _defaultColors = new[] { "blue", "red", "green", "gray" };
 
-        public AntTimelineItem()
+        public TimelineItem()
         {
 
         }
 
-        internal AntTimelineItem(RenderFragment childContent, RenderFragment dot, string @class)
+        internal TimelineItem(RenderFragment childContent, RenderFragment dot, string @class)
         {
             this.ChildContent = childContent;
             this.Dot = dot;
diff --git a/components/typography/AntParagraph.cs b/components/typography/Paragraph.cs
similarity index 92%
rename from components/typography/AntParagraph.cs
rename to components/typography/Paragraph.cs
index c318d98f3..b229bc75c 100644
--- a/components/typography/AntParagraph.cs
+++ b/components/typography/Paragraph.cs
@@ -4,7 +4,7 @@ using System;
 
 namespace AntDesign
 {
-    public class AntParagraph : AntTypographyBase
+    public class Paragraph : TypographyBase
     {
         [Parameter]
         public bool Code { get; set; } = false;
@@ -54,9 +54,9 @@ namespace AntDesign
                 {
                     builder.OpenElement(9, "a");
                     builder.AddAttribute(10, "onclick", (Action)(async () => await Copy()));
-                    builder.OpenComponent<AntIcon>(10);
+                    builder.OpenComponent<Icon>(10);
                     builder.AddAttribute(11, "type", "copy");
-                    builder.AddAttribute(12, "theme", AntIconThemeType.Outline);
+                    builder.AddAttribute(12, "theme", IconThemeType.Outline);
                     builder.CloseComponent();
                     builder.CloseElement();
                 }
diff --git a/components/typography/AntText.cs b/components/typography/Text.cs
similarity index 92%
rename from components/typography/AntText.cs
rename to components/typography/Text.cs
index 9989ed240..cf7934eab 100644
--- a/components/typography/AntText.cs
+++ b/components/typography/Text.cs
@@ -6,7 +6,7 @@ using System.Text;
 
 namespace AntDesign
 {
-    public class AntText : AntTypographyBase
+    public class Text : TypographyBase
     {
         [Parameter]
         public bool Code { get; set; }
@@ -56,9 +56,9 @@ namespace AntDesign
                 {
                     builder.OpenElement(7, "a");
                     builder.AddAttribute(8, "onclick", (Action)(async () => await Copy()));
-                    builder.OpenComponent<AntIcon>(9);
+                    builder.OpenComponent<Icon>(9);
                     builder.AddAttribute(10, "type", "copy");
-                    builder.AddAttribute(11, "theme", AntIconThemeType.Outline);
+                    builder.AddAttribute(11, "theme", IconThemeType.Outline);
                     builder.CloseComponent();
                     builder.CloseElement();
                 }
diff --git a/components/typography/AntTitle.cs b/components/typography/Title.cs
similarity index 92%
rename from components/typography/AntTitle.cs
rename to components/typography/Title.cs
index 5c583799e..9be20060e 100644
--- a/components/typography/AntTitle.cs
+++ b/components/typography/Title.cs
@@ -6,7 +6,7 @@ using System.Text;
 
 namespace AntDesign
 {
-    public class AntTitle : AntTypographyBase
+    public class Title : TypographyBase
     {
         [Parameter]
         public int Level { get; set; } = 1;
@@ -53,9 +53,9 @@ namespace AntDesign
                 {
                     builder.OpenElement(6, "a");
                     builder.AddAttribute(7, "onclick", (Action)(async () => await Copy()));
-                    builder.OpenComponent<AntIcon>(8);
+                    builder.OpenComponent<Icon>(8);
                     builder.AddAttribute(9, "type", "copy");
-                    builder.AddAttribute(10, "theme", AntIconThemeType.Outline);
+                    builder.AddAttribute(10, "theme", IconThemeType.Outline);
                     builder.CloseComponent();
                     builder.CloseElement();
                 }
diff --git a/components/typography/AntTypographyBase.cs b/components/typography/TypographyBase.cs
similarity index 97%
rename from components/typography/AntTypographyBase.cs
rename to components/typography/TypographyBase.cs
index d7b2647d7..cf2eea9e5 100644
--- a/components/typography/AntTypographyBase.cs
+++ b/components/typography/TypographyBase.cs
@@ -4,7 +4,7 @@ using System.Threading.Tasks;
 
 namespace AntDesign
 {
-    public abstract class AntTypographyBase : AntDomComponentBase
+    public abstract class TypographyBase : AntDomComponentBase
     {
         [Inject]
         public HtmlRenderService Service { get; set; }
diff --git a/site/AntBlazor.Docs/Demos/Affix/demo/Basic.md b/site/AntBlazor.Docs/Demos/Affix/demo/Basic.md
new file mode 100644
index 000000000..9dae57e92
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Affix/demo/Basic.md
@@ -0,0 +1,13 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+最简单的用法。
+
+
+## en-US
+The simplest usage.
diff --git a/site/AntBlazor.Docs/Demos/Affix/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Affix/demo/Basic.razor
new file mode 100644
index 000000000..716300eb7
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Affix/demo/Basic.razor
@@ -0,0 +1,31 @@
+
+<div>
+	<Affix OffsetTop="@_offsetTop">
+		<Button Type="@ButtonType.Primary" OnClick="AddTop">
+			Affix top
+		</Button>
+	</Affix>
+	<br />
+	<Affix OffsetBottom="@_offsetBottom">
+		<Button Type="@ButtonType.Primary" OnClick="AddBottom">
+			Affix bottom
+		</Button>
+	</Affix>
+</div>
+
+
+@code
+{
+        private uint _offsetTop = 10;
+        private uint _offsetBottom = 10;
+
+        private void AddTop()
+        {
+            _offsetTop += 10;
+        }
+
+        private void AddBottom()
+        {
+            _offsetBottom += 10;
+        }
+}
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Affix/demo/CallBack.md b/site/AntBlazor.Docs/Demos/Affix/demo/CallBack.md
new file mode 100644
index 000000000..b96db7f84
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Affix/demo/CallBack.md
@@ -0,0 +1,13 @@
+---
+order: 1
+title:
+  zh-CN: 固定状态改变的回调
+  en-US: Callback
+---
+
+## zh-CN
+可以获得是否固定的状态。
+
+
+## en-US
+Callback with affixed state.
diff --git a/site/AntBlazor.Docs/Demos/Affix/demo/Callback.razor b/site/AntBlazor.Docs/Demos/Affix/demo/Callback.razor
new file mode 100644
index 000000000..216702921
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Affix/demo/Callback.razor
@@ -0,0 +1,15 @@
+<div>
+<Affix OffsetTop="120" OnChange="OnAffixChange">
+	<Button>
+		120px to affix top
+	</Button>
+</Affix>
+</div>
+
+@code{
+        private void OnAffixChange(bool affixed)
+        {
+            Console.WriteLine(affixed);
+        }
+		
+}
diff --git a/site/AntBlazor.Docs/Demos/Affix/demo/Scroll.md b/site/AntBlazor.Docs/Demos/Affix/demo/Scroll.md
new file mode 100644
index 000000000..f6e6254f6
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Affix/demo/Scroll.md
@@ -0,0 +1,13 @@
+---
+order: 2
+title:
+  zh-CN: 滚动容器
+  en-US: Container to scroll
+---
+
+## zh-CN
+用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。
+
+
+## en-US
+Set a `Target for` `Affix`, which listen to scroll event of target element (default is `window`).
diff --git a/site/AntBlazor.Docs/Demos/Affix/demo/Scroll.razor b/site/AntBlazor.Docs/Demos/Affix/demo/Scroll.razor
new file mode 100644
index 000000000..962b66718
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Affix/demo/Scroll.razor
@@ -0,0 +1,26 @@
+
+<style>
+	.scrollable-container{
+		height: 100px;
+		overflow-y: scroll;
+	}
+	.background {
+		padding-top: 60px;
+		height: 300px;
+		background-image: url("https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg")
+	}
+</style>
+<div class="scrollable-container" @ref="_container">
+	<div class="background">
+		<Affix Target="@_container">
+			<Button Type="@ButtonType.Primary">
+				Fixed at the top of container
+			</Button>
+		</Affix>
+	</div>
+</div>
+
+@code{
+
+        private ElementReference _container;
+	}
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Affix/doc/index.en-US.md b/site/AntBlazor.Docs/Demos/Affix/doc/index.en-US.md
new file mode 100644
index 000000000..b936b1b57
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Affix/doc/index.en-US.md
@@ -0,0 +1,26 @@
+---
+category: Components
+type: Navigation
+title: Affix
+---
+
+Wrap Affix around another component to make it stick the viewport.
+
+## When To Use
+
+- On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
+- Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
+
+
+## API
+
+
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| OffsetBottom | Offset from the bottom of the viewport (in pixels) | int         | -         |
+| OffsetTop   | Offset from the top of the viewport (in pixels)| int         |- |
+| Target | Specifies the scrollable area DOM node | RenderFragment         |-       |
+| OnChange |Callback for when Affix state is changed| Function()  | -  |
+
+Note: Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
diff --git a/site/AntBlazor.Docs/Demos/Affix/doc/index.zh-CN.md b/site/AntBlazor.Docs/Demos/Affix/doc/index.zh-CN.md
new file mode 100644
index 000000000..c4ac12cb2
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Affix/doc/index.zh-CN.md
@@ -0,0 +1,31 @@
+---
+category: Components
+type: 导航
+title: Affix
+subtitle: 固钉
+---
+
+将页面元素钉在可视范围。
+
+## 何时使用
+
+- 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
+- 页面可视范围过小时，慎用此功能以免遮挡页面内容。
+
+
+## API
+
+时间轴
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| OffsetBottom | 距离窗口底部达到指定偏移量后触发 | int         | -         |
+| OffsetTop   | 距离窗口顶部达到指定偏移量后触发| int         |-    |
+| Target | 设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | RenderFragment         |-       |
+| OnChange | 固定状态改变时触发的回调函数| Function()  | -  |
+
+注意：`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
+
+
+## FAQ
+`Affix` 使用 `target` 绑定容器时，元素会跑到容器外。
diff --git a/site/AntBlazor.Docs/Demos/BackTop/demo/Basic.md b/site/AntBlazor.Docs/Demos/BackTop/demo/Basic.md
new file mode 100644
index 000000000..e6e9a1ab3
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/BackTop/demo/Basic.md
@@ -0,0 +1,13 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+最简单的用法。
+
+
+## en-US
+The most basic usage.
diff --git a/site/AntBlazor.Docs/Demos/BackTop/demo/Basic.razor b/site/AntBlazor.Docs/Demos/BackTop/demo/Basic.razor
new file mode 100644
index 000000000..cbca5fbdf
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/BackTop/demo/Basic.razor
@@ -0,0 +1,7 @@
+<div>
+    <div>
+        Scroll down to see the bottom <strong> gray</strong> button
+    </div>
+    <BackTop Title="Scroll down to see the bottom-right gray button." ></BackTop>
+
+</div>
diff --git a/site/AntBlazor.Docs/Demos/BackTop/demo/Scroll.md b/site/AntBlazor.Docs/Demos/BackTop/demo/Scroll.md
new file mode 100644
index 000000000..00b43b973
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/BackTop/demo/Scroll.md
@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 自定义样式
+  en-US: Custom style
+---
+
+## zh-CN
+可以自定义回到顶部按钮的样式，限制宽高：`40px * 40px`。
+
+
+## en-US
+
+You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
diff --git a/site/AntBlazor.Docs/Demos/BackTop/demo/Scroll.razor b/site/AntBlazor.Docs/Demos/BackTop/demo/Scroll.razor
new file mode 100644
index 000000000..74b8afe34
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/BackTop/demo/Scroll.razor
@@ -0,0 +1,33 @@
+<div>
+    <style>
+        .myStyle {
+            height: 40px;
+            width: 40px;
+            line-height: 40;
+            border-radius: 4px;
+            background-color: #1088e9;
+            color: #fff;
+            text-align: center;
+            font-size: 14px;
+        }
+    </style>
+
+    <div style="height:300px; padding: 8px;  overflow:scroll;">
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <div>Scroll to bottom</div>
+        <BackTop Title="Scroll down to see the bottom-right gray button." />
+
+    </div>
+</div>
diff --git a/site/AntBlazor.Docs/Demos/BackTop/doc/index.en-US.md b/site/AntBlazor.Docs/Demos/BackTop/doc/index.en-US.md
new file mode 100644
index 000000000..f159ac534
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/BackTop/doc/index.en-US.md
@@ -0,0 +1,23 @@
+---
+category: Components
+type: Navigation
+title: BackTop
+---
+
+`BackTop` makes it easy to go back to the top of the page.
+
+## When To Use
+
+- When the page content is very long.
+- When you need to go back to the top very frequently in order to view the contents.
+
+
+## API
+
+BackTop
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| Target | 	specifies the scrollable area dom node | RenderFragment         | -         |
+| VisibilityHeight   | the `BackTop` button will not show until the scroll height reaches this value| int         |-    |
+| OnClick | a callback function, which can be executed when you click the button | function         |-       |
diff --git a/site/AntBlazor.Docs/Demos/BackTop/doc/index.zh-CN.md b/site/AntBlazor.Docs/Demos/BackTop/doc/index.zh-CN.md
new file mode 100644
index 000000000..1909c27a0
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/BackTop/doc/index.zh-CN.md
@@ -0,0 +1,24 @@
+---
+category: Components
+type: 导航
+title: BackTop
+subtitle: 回到顶部
+---
+
+返回页面顶部的操作按钮。
+
+## 何时使用
+
+- 当页面内容区域比较长时；
+- 当用户需要频繁返回顶部查看相关内容时。
+
+
+## API
+
+BackTop
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | RenderFragment         | -         |
+| VisibilityHeight   | 滚动高度达到此参数值才出现 `BackTop`| int         |-    |
+| OnClick | 点击按钮的回调函数 | function         |-       |
diff --git a/site/AntBlazor.Docs/Demos/Badge/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Badge/demo/Basic.razor
index 391d10623..b98973aa4 100644
--- a/site/AntBlazor.Docs/Demos/Badge/demo/Basic.razor
+++ b/site/AntBlazor.Docs/Demos/Badge/demo/Basic.razor
@@ -6,7 +6,7 @@
         <a href="#" class="head-example" />
     </Badge>
     @{
-        RenderFragment count = @<AntIcon Type="clock-circle" Fill="#f5222d"/>;
+        RenderFragment count = @<Icon Type="clock-circle" Fill="#f5222d"/>;
     }
     <Badge Count="@(count)">
         <a href="#" class="head-example" />
diff --git a/site/AntBlazor.Docs/Demos/Badge/demo/Change.razor b/site/AntBlazor.Docs/Demos/Badge/demo/Change.razor
index 9d86309d7..250747809 100644
--- a/site/AntBlazor.Docs/Demos/Badge/demo/Change.razor
+++ b/site/AntBlazor.Docs/Demos/Badge/demo/Change.razor
@@ -5,10 +5,10 @@
         </Badge>
         <ButtonGroup>
             <Button @onclick="_=>decline()">
-                <AntIcon Type="minus"></AntIcon>
+                <Icon Type="minus"></Icon>
             </Button>
             <Button @onclick="_=>increase()">
-                <AntIcon Type="plus"></AntIcon>
+                <Icon Type="plus"></Icon>
             </Button>
         </ButtonGroup>
     </div>
diff --git a/site/AntBlazor.Docs/Demos/Badge/demo/Dot.razor b/site/AntBlazor.Docs/Demos/Badge/demo/Dot.razor
index 1a91b70c4..89d4d406c 100644
--- a/site/AntBlazor.Docs/Demos/Badge/demo/Dot.razor
+++ b/site/AntBlazor.Docs/Demos/Badge/demo/Dot.razor
@@ -1,9 +1,9 @@
 <div>
     <Badge Dot>
-        <AntIcon Type="notification"/>
+        <Icon Type="notification"/>
     </Badge>
     <Badge Count="0" Dot>
-        <AntIcon Type="notification" />
+        <Icon Type="notification" />
     </Badge>
     <Badge Dot>
         <a href="#">Link something</a>
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Basic.md b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Basic.md
new file mode 100644
index 000000000..201dda0e7
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Basic.md
@@ -0,0 +1,13 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic Usage
+---
+
+## zh-CN
+最简单的用法。
+
+
+## en-US
+The simplest usage.
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Basic.razor
new file mode 100644
index 000000000..61fa1f778
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Basic.razor
@@ -0,0 +1,13 @@
+<div>
+	<Breadcrumb>
+        <BreadcrumbItem>
+                Home
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+            <a>Application List</a>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+            An Application
+        </BreadcrumbItem>
+</Breadcrumb>
+</div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Dropdownmenu.md b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Dropdownmenu.md
new file mode 100644
index 000000000..115eb8df7
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Dropdownmenu.md
@@ -0,0 +1,13 @@
+---
+order: 4
+title:
+  zh-CN: 带下拉菜单的面包屑
+  en-US: Bread crumbs with drop down menu
+---
+
+## zh-CN
+面包屑支持下拉菜单。
+
+
+## en-US
+Breadcrumbs support drop down menu.
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Dropdownmenu.razor b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Dropdownmenu.razor
new file mode 100644
index 000000000..dca8fb965
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Dropdownmenu.razor
@@ -0,0 +1,26 @@
+<div>
+	<Breadcrumb Separator="/">
+    <BreadcrumbItem>
+        Ant Design Blazor
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        <a>Component</a>
+    </BreadcrumbItem>
+    <BreadcrumbItem >
+        <Menu Mode=MenuMode.Horizontal>
+            <MenuItem Key="mail">
+                <Icon Type="mail" Theme="outline"></Icon>
+                Navigation One
+            </MenuItem>
+            <MenuItem Key="app" Disabled>
+                <Icon Type="appstore" Theme="outline"></Icon>
+                Navigation Two
+            </MenuItem>
+        </Menu>
+    </BreadcrumbItem>
+</Breadcrumb>
+</div>
+
+@code{
+    object abc { get; set; } = new object();
+ }
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Integration.md b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Integration.md
new file mode 100644
index 000000000..ff3297669
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Integration.md
@@ -0,0 +1,13 @@
+---
+order: 2
+title:
+  zh-CN: 其它路由
+  en-US: Other Router Integration
+---
+
+## zh-CN
+和 react-router@4+，或其他路由进行结合使用。
+
+
+## en-US
+Used together with react-router@4+ or other router.
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Integration.razor b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Integration.razor
new file mode 100644
index 000000000..4645e1372
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Integration.razor
@@ -0,0 +1,13 @@
+<div>
+	<Breadcrumb RouteLabel="">
+    <BreadcrumbItem>
+        Home
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        <a>Application List</a>
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        An Application
+    </BreadcrumbItem>
+</Breadcrumb>
+</div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Separator.md b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Separator.md
new file mode 100644
index 000000000..5e57d0643
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Separator.md
@@ -0,0 +1,13 @@
+---
+order: 3
+title:
+  zh-CN: 分隔符
+  en-US: Configuring the Separator
+---
+
+## zh-CN
+使用 separator=">" 可以自定义分隔符。
+
+
+## en-US
+The separator can be customized by setting the separator property: separator=">"
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Separator.razor b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Separator.razor
new file mode 100644
index 000000000..fed0e6647
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/Separator.razor
@@ -0,0 +1,13 @@
+<div>
+    <Breadcrumb Separator=">" Style="color:red">  
+        <BreadcrumbItem>
+            Home
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+            <a>Application List</a>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+            An Application
+        </BreadcrumbItem>
+    </Breadcrumb>
+</div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/demo/With.md b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/With.md
new file mode 100644
index 000000000..24c35f94f
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/With.md
@@ -0,0 +1,13 @@
+---
+order: 1
+title:
+  zh-CN: 带有图标的
+  en-US: With an Icon
+---
+
+## zh-CN
+图标放在文字前面。
+
+
+## en-US
+The icon should be placed in front of the text.
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/demo/With.razor b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/With.razor
new file mode 100644
index 000000000..ba588c7f3
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/demo/With.razor
@@ -0,0 +1,13 @@
+<div>
+	<Breadcrumb>
+    <BreadcrumbItem>
+        <Icon Type="home"></Icon>
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        <a><Icon Type="user"></Icon><span>Application List</span></a>
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        Application
+    </BreadcrumbItem>
+</Breadcrumb>
+</div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/doc/index.en-US.md b/site/AntBlazor.Docs/Demos/Breadcrumb/doc/index.en-US.md
new file mode 100644
index 000000000..deaebfd20
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/doc/index.en-US.md
@@ -0,0 +1,37 @@
+---
+category: Components
+type: Navigation
+title: Breadcrumb
+---
+
+A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
+
+## When To Use
+
+- When the system has more than two layers in a hierarchy.
+- When you need to inform the user of where they are.
+- When the user may need to navigate back to a higher level.
+
+
+## API
+
+
+Breadcrumb
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| ItemRender | Custom item renderer | int   | -         |
+| Params   | Routing parameters| int   |-      |
+| Routes | The routing stack information of router | string         |-       |
+| Separator |Custom separator| string  | -  |
+
+
+BreadcrumbItem
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| Href | Target of hyperlink | int         | -         |
+| Overlay   | The dropdown menu| int         |-         |
+| OnClick | Set the handler to handle click event | function(e)         |-       |
+| DropdownProps |The dropdown props| string  | -  |
+
diff --git a/site/AntBlazor.Docs/Demos/Breadcrumb/doc/index.zh-CN.md b/site/AntBlazor.Docs/Demos/Breadcrumb/doc/index.zh-CN.md
new file mode 100644
index 000000000..5980d423e
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Breadcrumb/doc/index.zh-CN.md
@@ -0,0 +1,38 @@
+---
+category: Components
+type: 导航
+title: Breadcrumb
+subtitle: 面包屑
+---
+
+显示当前页面在系统层级结构中的位置，并能向上返回。
+
+## 何时使用
+
+- 当系统拥有超过两级以上的层级结构时；
+- 当需要告知用户『你在哪里』时；
+- 当需要向上导航的功能时。
+
+
+## API
+
+Breakcrumb
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| ItemRender | 自定义链接函数，和 react-router 配置使用 | int   | -         |
+| Params   | 	路由的参数| int   |-      |
+| Routes | 	router 的路由栈信息 | string         |-       |
+| Separator |分隔符自定义| string  | -  |
+
+
+BreadcrumbItem
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Href | 链接的目的地 | int         | -         |
+| Overlay   | 下拉菜单的内容 | int         |-         |
+| OnClick | 单击事件 | function(e)  |-       |
+| DropdownProps |弹出下拉菜单的自定义配置 | string  | -  |
+
+
diff --git a/site/AntBlazor.Docs/Demos/Card/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Card/demo/Basic.razor
index a9f452075..e4406a4f5 100644
--- a/site/AntBlazor.Docs/Demos/Card/demo/Basic.razor
+++ b/site/AntBlazor.Docs/Demos/Card/demo/Basic.razor
@@ -1,5 +1,5 @@
 <div>
-    <AntCard Bordered Title=@("Default size card")>
+    <Card Bordered Title=@("Default size card")>
         <Extra>
             <a>More</a>
         </Extra>
@@ -8,9 +8,9 @@
             <p>Card content</p>
             <p>Card content</p>
         </Body>
-    </AntCard>
+    </Card>
 
-    <AntCard Bordered Size="small" Title=@("Small size card")>
+    <Card Bordered Size="small" Title=@("Small size card")>
         <Extra>
             <a>More</a>
         </Extra>
@@ -19,16 +19,16 @@
             <p>Card content</p>
             <p>Card content</p>
         </Body>
-    </AntCard>
+    </Card>
 
 
 </div>
 @code
 {
-    private RenderFragment actionSetting =@<Template>  <AntIcon Type="setting" /></Template>;
+    private RenderFragment actionSetting =@<Template>  <Icon Type="setting" /></Template>;
 
-    private RenderFragment actionEdit =@<Template><AntIcon Type="edit" /></Template>;
+    private RenderFragment actionEdit =@<Template><Icon Type="edit" /></Template>;
 
-    private RenderFragment actionEllipsis =@<Template> <AntIcon Type="ellipsis" /></Template>;
+    private RenderFragment actionEllipsis =@<Template> <Icon Type="ellipsis" /></Template>;
 
 }
diff --git a/site/AntBlazor.Docs/Demos/Card/demo/Column.razor b/site/AntBlazor.Docs/Demos/Card/demo/Column.razor
index b4c312078..4b42000f9 100644
--- a/site/AntBlazor.Docs/Demos/Card/demo/Column.razor
+++ b/site/AntBlazor.Docs/Demos/Card/demo/Column.razor
@@ -1,25 +1,25 @@
 <div style="background-color: #ececec; padding: 20px;">
     <Row Gutter="16">
         <Col Span="8">
-            <AntCard Bordered="false" Title=@("Card title")>
+            <Card Bordered="false" Title=@("Card title")>
                 <Body>
                     <p>Card content</p>
                 </Body>
-            </AntCard>
+            </Card>
         </Col>
         <Col Span="8">
-            <AntCard Bordered="false" Title=@("Card title")>
+            <Card Bordered="false" Title=@("Card title")>
                 <Body>
                     <p>Card content</p>
                 </Body>
-            </AntCard>
+            </Card>
         </Col>
         <Col Span="8">
-            <AntCard Bordered="false" Title=@("Card title")>
+            <Card Bordered="false" Title=@("Card title")>
                 <Body>
                     <p>Card content</p>
                 </Body>
-            </AntCard>
+            </Card>
         </Col>
     </Row>
 
diff --git a/site/AntBlazor.Docs/Demos/Card/demo/Customized.razor b/site/AntBlazor.Docs/Demos/Card/demo/Customized.razor
index b8312cf41..56c505d94 100644
--- a/site/AntBlazor.Docs/Demos/Card/demo/Customized.razor
+++ b/site/AntBlazor.Docs/Demos/Card/demo/Customized.razor
@@ -1,12 +1,12 @@
 <div>
-    <AntCard Hoverable Style="width: 240px" Cover="coverTemplate">
-        <AntCardMeta>
+    <Card Hoverable Style="width: 240px" Cover="coverTemplate">
+        <CardMeta>
             <Title>
                 Europe Street beat
             </Title>
             <Description> www.instagram.com</Description>
-        </AntCardMeta>
-    </AntCard>
+        </CardMeta>
+    </Card>
 </div>
 
 
diff --git a/site/AntBlazor.Docs/Demos/Card/demo/Grid.razor b/site/AntBlazor.Docs/Demos/Card/demo/Grid.razor
index 0a1ae227d..27526de96 100644
--- a/site/AntBlazor.Docs/Demos/Card/demo/Grid.razor
+++ b/site/AntBlazor.Docs/Demos/Card/demo/Grid.razor
@@ -1,31 +1,31 @@
 <div>
-    <AntCard Title=@("Card Title")>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+    <Card Title=@("Card Title")>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="false">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="false">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center"Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center"Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
-        <AntCardGrid Style="width:25%;text-align:center" Hoverable="true">
+        </CardGrid>
+        <CardGrid Style="width:25%;text-align:center" Hoverable="true">
             Content
-        </AntCardGrid>
+        </CardGrid>
 
-    </AntCard>
+    </Card>
 </div>
 
 
diff --git a/site/AntBlazor.Docs/Demos/Card/demo/Inner.razor b/site/AntBlazor.Docs/Demos/Card/demo/Inner.razor
index 041f353f7..42f70068d 100644
--- a/site/AntBlazor.Docs/Demos/Card/demo/Inner.razor
+++ b/site/AntBlazor.Docs/Demos/Card/demo/Inner.razor
@@ -1,25 +1,25 @@
 <div>
-    <AntCard Title=@("Card title")>  
+    <Card Title=@("Card title")>  
         <Body>
 
 
-            <AntCard Title=@("Inner card title")>
+            <Card Title=@("Inner card title")>
                 <Extra>   <a slot="extra" href="#">More</a>  </Extra>
                 <Body>                   
                     Inner Card content
                 </Body>
               
-            </AntCard>
-            <AntCard Title=@("Inner card title") Style="margin-top: 16px">
+            </Card>
+            <Card Title=@("Inner card title") Style="margin-top: 16px">
                 <Extra> <a slot="extra" href="#">More</a> </Extra>
                 <Body>
                
                     Inner Card content
                 </Body>             
-            </AntCard>
+            </Card>
 
         </Body>
-    </AntCard>
+    </Card>
 </div>
 
 
diff --git a/site/AntBlazor.Docs/Demos/Card/demo/Loading.razor b/site/AntBlazor.Docs/Demos/Card/demo/Loading.razor
index 4bbc804a5..51f345007 100644
--- a/site/AntBlazor.Docs/Demos/Card/demo/Loading.razor
+++ b/site/AntBlazor.Docs/Demos/Card/demo/Loading.razor
@@ -1,9 +1,9 @@
 <div>
-    <AntCard Loading="loading" Title=@("Card title")>
+    <Card Loading="loading" Title=@("Card title")>
         <p>Card content</p>
         <p>Card content</p>
         <p>Card content</p>
-    </AntCard>
+    </Card>
     <Button Style="margin-top: 16px"  OnClick="handleClick">
         Toggle loading
     </Button>
diff --git a/site/AntBlazor.Docs/Demos/Card/demo/Noborder.razor b/site/AntBlazor.Docs/Demos/Card/demo/Noborder.razor
index c33cab713..20102b3ec 100644
--- a/site/AntBlazor.Docs/Demos/Card/demo/Noborder.razor
+++ b/site/AntBlazor.Docs/Demos/Card/demo/Noborder.razor
@@ -1,11 +1,11 @@
 <div style="background:#ECECEC; padding:30px">
-    <AntCard  Title=@("Card title") Style="width: 300px"> 
+    <Card  Title=@("Card title") Style="width: 300px"> 
         <Body>
             <p>Card content</p>
             <p>Card content</p>
             <p>Card content</p>
         </Body>
-    </AntCard>
+    </Card>
 </div>
 
 
diff --git a/site/AntBlazor.Docs/Demos/Card/demo/Simple.razor b/site/AntBlazor.Docs/Demos/Card/demo/Simple.razor
index 654ba030a..bb1273c46 100644
--- a/site/AntBlazor.Docs/Demos/Card/demo/Simple.razor
+++ b/site/AntBlazor.Docs/Demos/Card/demo/Simple.razor
@@ -1,9 +1,9 @@
 <div>
-    <AntCard Bordered="true" Style="width: 300px">
+    <Card Bordered="true" Style="width: 300px">
         <p>Card content</p>
         <p>Card content</p>
         <p>Card content</p>
-    </AntCard>
+    </Card>
 </div>
 
 
diff --git a/site/AntBlazor.Docs/Demos/Card/demo/Support.razor b/site/AntBlazor.Docs/Demos/Card/demo/Support.razor
index 9edad82a6..f75fa973f 100644
--- a/site/AntBlazor.Docs/Demos/Card/demo/Support.razor
+++ b/site/AntBlazor.Docs/Demos/Card/demo/Support.razor
@@ -1,19 +1,19 @@
 <div>
-    <AntCard Style="width:300px;" Bordered Cover="coverTemplate" Actions="new[] { actionSetting, actionEdit, actionEllipsis }">
-        <AntCardMeta Avatar="avatarTemplate">
+    <Card Style="width:300px;" Bordered Cover="coverTemplate" Actions="new[] { actionSetting, actionEdit, actionEllipsis }">
+        <CardMeta Avatar="avatarTemplate">
             <Title>Meta Card</Title>
             <Description>This is the description</Description>
-        </AntCardMeta>
-    </AntCard>
+        </CardMeta>
+    </Card>
 </div>
 
 @code
 {
-    private RenderFragment actionSetting =@<Template><AntIcon Type="setting" /></Template>;
+    private RenderFragment actionSetting =@<Template><Icon Type="setting" /></Template>;
 
-    private RenderFragment actionEdit =@<Template><AntIcon Type="edit" /></Template>;
+    private RenderFragment actionEdit =@<Template><Icon Type="edit" /></Template>;
 
-    private RenderFragment actionEllipsis =@<Template><AntIcon Type="ellipsis" /></Template>;
+    private RenderFragment actionEllipsis =@<Template><Icon Type="ellipsis" /></Template>;
 
     private RenderFragment avatarTemplate = @<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></Avatar>;
 
diff --git a/site/AntBlazor.Docs/Demos/Card/demo/Tabs.md b/site/AntBlazor.Docs/Demos/Card/demo/Tabs1.md
similarity index 100%
rename from site/AntBlazor.Docs/Demos/Card/demo/Tabs.md
rename to site/AntBlazor.Docs/Demos/Card/demo/Tabs1.md
diff --git a/site/AntBlazor.Docs/Demos/Card/demo/Tabs.razor b/site/AntBlazor.Docs/Demos/Card/demo/Tabs1.razor
similarity index 56%
rename from site/AntBlazor.Docs/Demos/Card/demo/Tabs.razor
rename to site/AntBlazor.Docs/Demos/Card/demo/Tabs1.razor
index e7d30db34..09b95092d 100644
--- a/site/AntBlazor.Docs/Demos/Card/demo/Tabs.razor
+++ b/site/AntBlazor.Docs/Demos/Card/demo/Tabs1.razor
@@ -1,47 +1,47 @@
 <div>
-    <AntCard Style="width:100%" Title=@("Card title")>
+    <Card Style="width:100%" Title=@("Card title")>
         <Extra>
             <a>More</a>
         </Extra>
         <Body>
-            <AntTabs DefaultActiveKey="1">
-                <AntTabPane Key="1">
+            <Tabs DefaultActiveKey="1">
+                <TabPane Key="1">
                     <Tab>Tab 1</Tab>
                     <ChildContent>Content of Tab Pane 1</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="2">
+                </TabPane>
+                <TabPane Key="2">
                     <Tab>Tab 2</Tab>
                     <ChildContent>Content of Tab Pane 2</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="3">
+                </TabPane>
+                <TabPane Key="3">
                     <Tab>Tab 3</Tab>
                     <ChildContent>Content of Tab Pane 3</ChildContent>
-                </AntTabPane>
-            </AntTabs>
+                </TabPane>
+            </Tabs>
         </Body>
-    </AntCard>
+    </Card>
 
-    <AntCard Style="width:100%" >
+    <Card Style="width:100%" >
         <Extra>
             <a>More</a>
         </Extra>
         <Body>
-            <AntTabs DefaultActiveKey="1">
-                <AntTabPane Key="1">
+            <Tabs DefaultActiveKey="1">
+                <TabPane Key="1">
                     <Tab>Article</Tab>
                     <ChildContent>Content of Tab Pane 1</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="2">
+                </TabPane>
+                <TabPane Key="2">
                     <Tab>App</Tab>
                     <ChildContent>Content of Tab Pane 2</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="3">
+                </TabPane>
+                <TabPane Key="3">
                     <Tab>Project</Tab>
                     <ChildContent>Content of Tab Pane 3</ChildContent>
-                </AntTabPane>
-            </AntTabs>
+                </TabPane>
+            </Tabs>
         </Body>
-    </AntCard>
+    </Card>
 </div>
 
 
diff --git a/site/AntBlazor.Docs/Demos/Divider/demo/Horizontal.md b/site/AntBlazor.Docs/Demos/Divider/demo/Horizontal.md
new file mode 100644
index 000000000..cf9eaa4dc
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Divider/demo/Horizontal.md
@@ -0,0 +1,13 @@
+---
+order: 0
+title:
+  zh-CN: 水平分割线
+  en-US: Horizontal
+---
+
+## zh-CN
+默认为水平分割线，可在中间加入文字。
+
+
+## en-US
+Divider is `horizontal` by default. You can add text within Divider.
diff --git a/site/AntBlazor.Docs/Demos/Divider/demo/Horizontal.razor b/site/AntBlazor.Docs/Demos/Divider/demo/Horizontal.razor
new file mode 100644
index 000000000..ffd02eb24
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Divider/demo/Horizontal.razor
@@ -0,0 +1,19 @@
+<div>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider />
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider Dashed />
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+</div>
+
+
+
diff --git a/site/AntBlazor.Docs/Demos/Divider/demo/Title.md b/site/AntBlazor.Docs/Demos/Divider/demo/Title.md
new file mode 100644
index 000000000..5e2e978f9
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Divider/demo/Title.md
@@ -0,0 +1,13 @@
+---
+order: 1
+title:
+  zh-CN: 带文字的分割线
+  en-US: Divider with title
+---
+
+## zh-CN
+分割线中带有文字，可以用 orientation 指定文字位置。
+
+
+## en-US
+Divider with inner title, set orientation="left/right" to align it.
diff --git a/site/AntBlazor.Docs/Demos/Divider/demo/Title.razor b/site/AntBlazor.Docs/Demos/Divider/demo/Title.razor
new file mode 100644
index 000000000..1c93cae28
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Divider/demo/Title.razor
@@ -0,0 +1,24 @@
+<div>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider>Text</Divider>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider Orientation="left" Style="font-weight:bold">Left Text</Divider>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider Orientation="right" Style="font-weight:bold">Right Text</Divider>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+</div>
+
+
+
diff --git a/site/AntBlazor.Docs/Demos/Divider/demo/Vertical.md b/site/AntBlazor.Docs/Demos/Divider/demo/Vertical.md
new file mode 100644
index 000000000..98b85b34c
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Divider/demo/Vertical.md
@@ -0,0 +1,13 @@
+---
+order: 3
+title:
+  zh-CN: 垂直分割线
+  en-US: Vertical
+---
+
+## zh-CN
+使用 type="vertical" 设置为行内的垂直分割线。
+
+
+## en-US
+Use type="vertical" make it vertical.
diff --git a/site/AntBlazor.Docs/Demos/Divider/demo/Vertical.razor b/site/AntBlazor.Docs/Demos/Divider/demo/Vertical.razor
new file mode 100644
index 000000000..ab9b004b3
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Divider/demo/Vertical.razor
@@ -0,0 +1,10 @@
+<div>
+     Text
+    <Divider Type="vertical" />
+    <a href="#">Link</a>
+    <Divider Type="vertical" />
+    <a href="#">Link</a>
+</div>
+
+
+
diff --git a/site/AntBlazor.Docs/Demos/Divider/demo/Without.md b/site/AntBlazor.Docs/Demos/Divider/demo/Without.md
new file mode 100644
index 000000000..2e51dd4c9
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Divider/demo/Without.md
@@ -0,0 +1,13 @@
+---
+order: 2
+title:
+  zh-CN: 分割文字使用正文样式
+  en-US: Text without heading style
+---
+
+## zh-CN
+使用 plain 可以设置为更轻量的分割文字样式。
+
+
+## en-US
+You can use non-heading style of divider text by setting plain.
diff --git a/site/AntBlazor.Docs/Demos/Divider/demo/Without.razor b/site/AntBlazor.Docs/Demos/Divider/demo/Without.razor
new file mode 100644
index 000000000..3f4e84f0a
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Divider/demo/Without.razor
@@ -0,0 +1,28 @@
+<div>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider>Text</Divider>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider Orientation="left" >
+        Left Text
+    </Divider>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider Orientation="right"  Plain="true" >
+        Right Text
+    </Divider>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+        probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+</div>
+
+
+
diff --git a/site/AntBlazor.Docs/Demos/Divider/doc/index.en-US.md b/site/AntBlazor.Docs/Demos/Divider/doc/index.en-US.md
new file mode 100644
index 000000000..1ec5c9a34
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Divider/doc/index.en-US.md
@@ -0,0 +1,26 @@
+---
+category: Components
+type: Layout
+title: Divider
+---
+
+A divider line separates different content.
+
+## When To Use
+
+- Divide sections of article.
+- Divide inline text and links such as the operation column of table.
+
+
+## API
+
+
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| Dashed   | whether line is dashed| boolean         |false|
+| Orientation | position of title inside divider `left`, `right`, `center` | string         |-       |
+| Style |style object of container| CSS properties  | -  |
+| Type |direction type of divider| string | -  |
+| Plain |divider text show as plain style| boolean  | -  |
+
diff --git a/site/AntBlazor.Docs/Demos/Divider/doc/index.zh-CN.md b/site/AntBlazor.Docs/Demos/Divider/doc/index.zh-CN.md
new file mode 100644
index 000000000..40217bf97
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Divider/doc/index.zh-CN.md
@@ -0,0 +1,26 @@
+---
+category: Components
+type: Layout
+title: Divider
+subtitle: 分割线
+---
+
+区隔内容的分割线。
+
+## 何时使用
+
+- 对不同章节的文本段落进行分割。
+- 对行内文字/链接进行分割，例如表格的操作列。
+
+
+## API
+
+时间轴
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Dashed   | 是否虚线| boolean         |false|
+| Orientation | 分割线标题的位置 `left`, `right`, `center` | string         |-       |
+| Style | 分割线样式对象| CSS properties  | -  |
+| Type | 水平还是垂直类型 `horizontal` or `vertical`| string | -  |
+| Plain | 文字是否显示为普通正文样式| boolean  | -  |
diff --git a/site/AntBlazor.Docs/Demos/Drawer/demo/Formindrawer.razor b/site/AntBlazor.Docs/Demos/Drawer/demo/Formindrawer.razor
index 765f2aa75..80eb84ef4 100644
--- a/site/AntBlazor.Docs/Demos/Drawer/demo/Formindrawer.razor
+++ b/site/AntBlazor.Docs/Demos/Drawer/demo/Formindrawer.razor
@@ -4,11 +4,11 @@
         <Template style="height:90%">
             <Row Gutter="16">
                 <Col Span="12">
-                    <AntText>Name</AntText>
+                    <Text>Name</Text>
                     <Input Placeholder="Please enter user name"></Input>
                 </Col>
                 <Col Span="12">
-                    <AntText>Url</AntText>
+                    <Text>Url</Text>
                     <AntDesign.Input Placeholder="please enter url">
                         <AddOnBefore>Http://</AddOnBefore>
                         <AddOnAfter>.Com</AddOnAfter>
@@ -18,11 +18,11 @@
             <br />
             <Row Gutter="16">
                 <Col Span="12">
-                    <AntText>Owner</AntText>
+                    <Text>Owner</Text>
                     <Input Placeholder="Please select a owner"/>
                 </Col>
                 <Col Span="12">
-                    <AntText>Type</AntText>
+                    <Text>Type</Text>
                     <Input Placeholder="please enter url"/>
                 </Col>
             </Row>
@@ -30,7 +30,7 @@
 
             <Row>
                 <Col Span="24">
-                    <AntText>Description</AntText>
+                    <Text>Description</Text>
                     <TextArea Placeholder="Please enter your description">
 
                     </TextArea>
diff --git a/site/AntBlazor.Docs/Demos/Drawer/demo/Userprofile.razor b/site/AntBlazor.Docs/Demos/Drawer/demo/Userprofile.razor
index 17e8420a2..0748e9831 100644
--- a/site/AntBlazor.Docs/Demos/Drawer/demo/Userprofile.razor
+++ b/site/AntBlazor.Docs/Demos/Drawer/demo/Userprofile.razor
@@ -14,117 +14,117 @@
         </AntList>
 
         <Drawer Width="640" Closable="true" Visible="visible" Title='("User Profile")' OnClose="_=>close()">
-            <AntText Strong="true">Personal</AntText>
+            <Text Strong="true">Personal</Text>
             <Row></Row>
             <Row Gutter="12">
                 <Col Span="4">
-                    <AntText Strong="true">Full Name:</AntText>
+                    <Text Strong="true">Full Name:</Text>
                 </Col>
                 <Col Span="8">
-                    <AntText>Henry</AntText>
+                    <Text>Henry</Text>
                 </Col>
                 <Col Span="4">
-                    <AntText Strong="true">Account:</AntText>
+                    <Text Strong="true">Account:</Text>
                 </Col>
                 <Col Span="8">
-                    <AntText>AntDesign@example.com</AntText>
+                    <Text>AntDesign@example.com</Text>
                 </Col>
             </Row>
             <Row Gutter="12">
                 <Col Span="4">
-                    <AntText Strong="true">City:</AntText>
+                    <Text Strong="true">City:</Text>
                 </Col>
                 <Col Span="8">
-                    <AntText>HangZhou</AntText>
+                    <Text>HangZhou</Text>
                 </Col>
                 <Col Span="4">
-                    <AntText Strong="true">Country:</AntText>
+                    <Text Strong="true">Country:</Text>
                 </Col>
                 <Col Span="8">
-                    <AntText>China</AntText>
+                    <Text>China</Text>
                 </Col>
             </Row>
             <Row Gutter="12">
                 <Col Span="4">
-                    <AntText Strong="true">Birthday:</AntText>
+                    <Text Strong="true">Birthday:</Text>
                 </Col>
                 <Col Span="8">
-                    <AntText>February 2,1900</AntText>
+                    <Text>February 2,1900</Text>
                 </Col>
                 <Col Span="4">
-                    <AntText Strong="true">Website:</AntText>
+                    <Text Strong="true">Website:</Text>
                 </Col>
                 <Col Span="8">
-                    <AntText>www.baidu.com</AntText>
+                    <Text>www.baidu.com</Text>
                 </Col>
             </Row>
 
-            <AntDivider></AntDivider>
-            <AntText Strong="true">Company</AntText>
+            <Divider></Divider>
+            <Text Strong="true">Company</Text>
             <Row></Row>
             <Row>
                 <Col Span="4">
-                    <AntText Strong="true">Position:</AntText>
+                    <Text Strong="true">Position:</Text>
                 </Col>
                 <Col Span="8">
-                    <AntText Strong="false">Programmer</AntText>
+                    <Text Strong="false">Programmer</Text>
                 </Col>
                 <Col Span="6">
-                    <AntText Strong="true">Responsibilities:</AntText>
+                    <Text Strong="true">Responsibilities:</Text>
                 </Col>
                 <Col Span="6">
-                    <AntText Strong="false">Coding</AntText>
+                    <Text Strong="false">Coding</Text>
                 </Col>
             </Row>
             <Row>
                 <Col Span="4">
-                    <AntText Strong="true">Department:</AntText>
+                    <Text Strong="true">Department:</Text>
                 </Col>
                 <Col Span="8">
-                    <AntText Strong="false">XTech</AntText>
+                    <Text Strong="false">XTech</Text>
                 </Col>
                 <Col Span="4">
-                    <AntText Strong="true">Supervisor:</AntText>
+                    <Text Strong="true">Supervisor:</Text>
                 </Col>
                 <Col Span="8">
-                    <AntText Strong="false">Lin</AntText>
+                    <Text Strong="false">Lin</Text>
                 </Col>
             </Row>
             <Row>
                 <Col Span="4">
-                    <AntText Strong="true">Skills:</AntText>
+                    <Text Strong="true">Skills:</Text>
                 </Col>
                 <Col Span="20">
-                    <AntText Strong="false">
+                    <Text Strong="false">
                         C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc.
-                    </AntText>
+                    </Text>
                 </Col>
 
             </Row>
 
-            <AntDivider ></AntDivider>
-            <AntText Strong="true">Contacts</AntText>
+            <Divider ></Divider>
+            <Text Strong="true">Contacts</Text>
             <Row></Row>
             <Row>
                 <Col Span="4">
-                    <AntText Strong="true">Email:</AntText>
+                    <Text Strong="true">Email:</Text>
                 </Col>
                 <Col Span="8">
-                    <AntText Strong="false"> ant-design-Blazor@example.com</AntText>
+                    <Text Strong="false"> ant-design-Blazor@example.com</Text>
                 </Col>
                 <Col Span="4">
-                    <AntText Strong="true">    Phone Number:     </AntText>
+                    <Text Strong="true">    Phone Number:     </Text>
                 </Col>
                 <Col Span="8">
-                    <AntText Strong="false">+86 181 0000 0000 </AntText>
+                    <Text Strong="false">+86 181 0000 0000 </Text>
                 </Col>
             </Row>
             <Row>
                 <Col Span="4">
-                    <AntText Strong="true">Github:</AntText>
+                    <Text Strong="true">Github:</Text>
                 </Col>
                 <Col Span="20">
-                    <AntText Strong="false">https://ant-design-blazor.gitee.io/ </AntText>
+                    <Text Strong="false">https://ant-design-blazor.gitee.io/ </Text>
                 </Col>
             </Row>
         </Drawer>   
diff --git a/site/AntBlazor.Docs/Demos/Dropdown/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Dropdown/demo/Basic.razor
index c2e38b2f1..b57ca3bcf 100644
--- a/site/AntBlazor.Docs/Demos/Dropdown/demo/Basic.razor
+++ b/site/AntBlazor.Docs/Demos/Dropdown/demo/Basic.razor
@@ -20,7 +20,7 @@
     </Overlay>
     <ChildContent>
         <a class="ant-dropdown-link" @onclick:preventDefault>
-            Hover me <AntIcon Type="down" />
+            Hover me <Icon Type="down" />
         </a>
     </ChildContent>
 </Dropdown>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Dropdown/demo/DropdownButtonDemo.razor b/site/AntBlazor.Docs/Demos/Dropdown/demo/DropdownButtonDemo.razor
index 12dad1335..f40718db5 100644
--- a/site/AntBlazor.Docs/Demos/Dropdown/demo/DropdownButtonDemo.razor
+++ b/site/AntBlazor.Docs/Demos/Dropdown/demo/DropdownButtonDemo.razor
@@ -35,7 +35,7 @@
         @_overlayMenu
     </Overlay>
     <ChildContent>
-        <Button>Button <AntIcon Type="down" /></Button>
+        <Button>Button <Icon Type="down" /></Button>
     </ChildContent>
 </Dropdown>
 
diff --git a/site/AntBlazor.Docs/Demos/Dropdown/demo/Event.razor b/site/AntBlazor.Docs/Demos/Dropdown/demo/Event.razor
index e7bc9b4d9..a8b0705b0 100644
--- a/site/AntBlazor.Docs/Demos/Dropdown/demo/Event.razor
+++ b/site/AntBlazor.Docs/Demos/Dropdown/demo/Event.razor
@@ -8,7 +8,7 @@
     </Overlay>
     <ChildContent>
         <a class="ant-dropdown-link" @onclick:preventDefault>
-            Hover me, Click menu item <AntIcon Type="down" />
+            Hover me, Click menu item <Icon Type="down" />
         </a>
     </ChildContent>
 </Dropdown>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Dropdown/demo/Item.razor b/site/AntBlazor.Docs/Demos/Dropdown/demo/Item.razor
index ad5f4e8fa..e6c20e7c4 100644
--- a/site/AntBlazor.Docs/Demos/Dropdown/demo/Item.razor
+++ b/site/AntBlazor.Docs/Demos/Dropdown/demo/Item.razor
@@ -19,7 +19,7 @@
     </Overlay>
     <ChildContent>
         <a class="ant-dropdown-link" @onclick:preventDefault>
-            Hover me <AntIcon Type="down" />
+            Hover me <Icon Type="down" />
         </a>
     </ChildContent>
 </Dropdown>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Dropdown/demo/OverlayVisible.razor b/site/AntBlazor.Docs/Demos/Dropdown/demo/OverlayVisible.razor
index 95410aea0..aae5cb1b6 100644
--- a/site/AntBlazor.Docs/Demos/Dropdown/demo/OverlayVisible.razor
+++ b/site/AntBlazor.Docs/Demos/Dropdown/demo/OverlayVisible.razor
@@ -8,7 +8,7 @@
     </Overlay>
     <ChildContent>
         <a class="ant-dropdown-link" @onclick:preventDefault>
-            Hover me <AntIcon Type="down" />
+            Hover me <Icon Type="down" />
         </a>
     </ChildContent>
 </Dropdown>
diff --git a/site/AntBlazor.Docs/Demos/Dropdown/demo/SubMenuDemo.razor b/site/AntBlazor.Docs/Demos/Dropdown/demo/SubMenuDemo.razor
index 97f3c8399..a7ff04711 100644
--- a/site/AntBlazor.Docs/Demos/Dropdown/demo/SubMenuDemo.razor
+++ b/site/AntBlazor.Docs/Demos/Dropdown/demo/SubMenuDemo.razor
@@ -17,7 +17,7 @@
     </Overlay>
     <ChildContent>
         <a class="ant-dropdown-link" @onclick:preventDefault>
-            Cascading menu <AntIcon Type="down" />
+            Cascading menu <Icon Type="down" />
         </a>
     </ChildContent>
 </Dropdown>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Dropdown/demo/Trigger.razor b/site/AntBlazor.Docs/Demos/Dropdown/demo/Trigger.razor
index cc975e226..cff594d47 100644
--- a/site/AntBlazor.Docs/Demos/Dropdown/demo/Trigger.razor
+++ b/site/AntBlazor.Docs/Demos/Dropdown/demo/Trigger.razor
@@ -20,7 +20,7 @@
     </Overlay>
     <ChildContent>
         <a class="ant-dropdown-link" @onclick:preventDefault>
-            Click me <AntIcon Type="down" />
+            Click me <Icon Type="down" />
         </a>
     </ChildContent>
 </Dropdown>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Input/demo/Addon.razor b/site/AntBlazor.Docs/Demos/Input/demo/Addon.razor
index e4ed27c60..3ab0f9517 100644
--- a/site/AntBlazor.Docs/Demos/Input/demo/Addon.razor
+++ b/site/AntBlazor.Docs/Demos/Input/demo/Addon.razor
@@ -6,7 +6,7 @@
     <br />
     <br />
     <AntDesign.Input DefaultValue="mysite">
-        <AddOnAfter><AntIcon type="setting"></AntIcon></AddOnAfter>
+        <AddOnAfter><Icon type="setting"></Icon></AddOnAfter>
     </AntDesign.Input>
     <br />
     <br />
diff --git a/site/AntBlazor.Docs/Demos/Input/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Input/demo/Basic.razor
index 85fc06430..3a8d8c579 100644
--- a/site/AntBlazor.Docs/Demos/Input/demo/Basic.razor
+++ b/site/AntBlazor.Docs/Demos/Input/demo/Basic.razor
@@ -2,7 +2,7 @@
     <Input Placeholder="Basic usage" Value="@txtValue"  />
     <br />
     <br />
-    <AntText>@txtValue</AntText>
+    <Text>@txtValue</Text>
 </div>
 @code{
     string txtValue { get; set; }
diff --git a/site/AntBlazor.Docs/Demos/Input/demo/Group.md b/site/AntBlazor.Docs/Demos/Input/demo/Group.md
index b1bd020c0..19d610409 100644
--- a/site/AntBlazor.Docs/Demos/Input/demo/Group.md
+++ b/site/AntBlazor.Docs/Demos/Input/demo/Group.md
@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 输入框的组合展现。
-注意：使用 compact 模式时，不需要通过 Col 来控制宽度。
+注意：使用 compact 模式时，不需要通过 AntDesign.Col 来控制宽度。
 
 
 ## en-US
-Input.Group example Note: You don't need Col to control the width in the compact mode.
+Input.Group example Note: You don't need AntDesign.Col to control the width in the compact mode.
diff --git a/site/AntBlazor.Docs/Demos/Input/demo/Prefix.razor b/site/AntBlazor.Docs/Demos/Input/demo/Prefix.razor
index 5ebc73c71..55140995a 100644
--- a/site/AntBlazor.Docs/Demos/Input/demo/Prefix.razor
+++ b/site/AntBlazor.Docs/Demos/Input/demo/Prefix.razor
@@ -1,7 +1,7 @@
 <div>
     <Input Placeholder="Prefix and Suffix" DefaultValue="123" @bind-Value="@txtValue" >
         <Prefix>
-            <AntIcon Type="user" />
+            <Icon Type="user" />
         </Prefix>
     </Input>
     <br />
diff --git a/site/AntBlazor.Docs/Demos/Input/demo/Size.razor b/site/AntBlazor.Docs/Demos/Input/demo/Size.razor
index e398ed2b6..2c42a95fd 100644
--- a/site/AntBlazor.Docs/Demos/Input/demo/Size.razor
+++ b/site/AntBlazor.Docs/Demos/Input/demo/Size.razor
@@ -1,21 +1,21 @@
 <div>
     <Input Placeholder="large size"  Size="@InputSize.Large" @bind-Value="@txtValue" >
         <Prefix>
-            <AntIcon Type="user" />
+            <Icon Type="user" />
         </Prefix>
     </Input>
     <br />
     <br />
     <Input Placeholder="default size" @bind-Value="@txtValue" >
         <Prefix>
-            <AntIcon Type="user" />
+            <Icon Type="user" />
         </Prefix>
     </Input>
     <br />
     <br />
     <Input Placeholder="small size" Size="@InputSize.Small" @bind-Value="@txtValue" >
         <Prefix>
-            <AntIcon Type="user" />
+            <Icon Type="user" />
         </Prefix>
     </Input>
 
diff --git a/site/AntBlazor.Docs/Demos/Layout/demo/CustomTrigger.razor b/site/AntBlazor.Docs/Demos/Layout/demo/CustomTrigger.razor
index fcb2de56d..1a0183311 100644
--- a/site/AntBlazor.Docs/Demos/Layout/demo/CustomTrigger.razor
+++ b/site/AntBlazor.Docs/Demos/Layout/demo/CustomTrigger.razor
@@ -13,15 +13,15 @@
         <div class="logo" />
         <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Inline" DefaultSelectedKeys=@(new[]{"1"})>
             <MenuItem Key="1">
-                <AntIcon Type="user" Theme="outline" />
+                <Icon Type="user" Theme="outline" />
                 <span>nav 1</span>
             </MenuItem>
             <MenuItem Key="2">
-                <AntIcon Type="video-camera" Theme="outline" />
+                <Icon Type="video-camera" Theme="outline" />
                 <span>nav 2</span>
             </MenuItem>
             <MenuItem Key="3">
-                <AntIcon Type="upload" Theme="outline" />
+                <Icon Type="upload" Theme="outline" />
                 <span>nav 3</span>
             </MenuItem>
         </Menu>
@@ -30,11 +30,11 @@
         <Header Class="site-layout-background" Style="padding: 0;">
             @if (collapsed)
             {
-                <AntIcon Type="menu-unfold" Theme="outline" Class="trigger" OnClick="toggle" />
+                <Icon Type="menu-unfold" Theme="outline" Class="trigger" OnClick="toggle" />
             }
             else
             {
-                <AntIcon Type="menu-fold" Theme="outline" Class="trigger" OnClick="toggle" />
+                <Icon Type="menu-fold" Theme="outline" Class="trigger" OnClick="toggle" />
             }
         </Header>
         <Content Class="site-layout-background" Style="margin: 24px 16px;padding: 24px;min-height: 280px;">
diff --git a/site/AntBlazor.Docs/Demos/Layout/demo/FixedSider.razor b/site/AntBlazor.Docs/Demos/Layout/demo/FixedSider.razor
index 2be47fde3..69453996d 100644
--- a/site/AntBlazor.Docs/Demos/Layout/demo/FixedSider.razor
+++ b/site/AntBlazor.Docs/Demos/Layout/demo/FixedSider.razor
@@ -3,35 +3,35 @@
         <div class="logo" />
         <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Inline" DefaultSelectedKeys=@(new[]{"4"})>
             <MenuItem Key="1">
-                <AntIcon Type="user" Theme="outline" />
+                <Icon Type="user" Theme="outline" />
                 <span class="nav-text">nav 1</span>
             </MenuItem>
             <MenuItem Key="2">
-                <AntIcon Type="videocamera" Theme="outline"/>
+                <Icon Type="videocamera" Theme="outline"/>
                 <span class="nav-text">nav 2</span>
             </MenuItem>
             <MenuItem Key="3">
-                <AntIcon Type="upload" Theme="outline"/>
+                <Icon Type="upload" Theme="outline"/>
                 <span class="nav-text">nav 3</span>
             </MenuItem>
             <MenuItem Key="4">
-                <AntIcon Type="barchart" Theme="outline"/>
+                <Icon Type="barchart" Theme="outline"/>
                 <span class="nav-text">nav 4</span>
             </MenuItem>
             <MenuItem Key="5">
-                <AntIcon Type="cloud" Theme="outline" />
+                <Icon Type="cloud" Theme="outline" />
                 <span class="nav-text">nav 5</span>
             </MenuItem>
             <MenuItem Key="6">
-                <AntIcon Type="appstore" Theme="outline"/>
+                <Icon Type="appstore" Theme="outline"/>
                 <span class="nav-text">nav 6</span>
             </MenuItem>
             <MenuItem Key="7">
-                <AntIcon Type="team" Theme="outline"/>
+                <Icon Type="team" Theme="outline"/>
                 <span class="nav-text">nav 7</span>
             </MenuItem>
             <MenuItem Key="8">
-                <AntIcon Type="shop" Theme="outline"/>
+                <Icon Type="shop" Theme="outline"/>
                 <span class="nav-text">nav 8</span>
             </MenuItem>
         </Menu>
diff --git a/site/AntBlazor.Docs/Demos/Layout/demo/Responsive.razor b/site/AntBlazor.Docs/Demos/Layout/demo/Responsive.razor
index 425ce1e86..7147f9262 100644
--- a/site/AntBlazor.Docs/Demos/Layout/demo/Responsive.razor
+++ b/site/AntBlazor.Docs/Demos/Layout/demo/Responsive.razor
@@ -10,19 +10,19 @@
         <div class="logo" />
         <Menu Theme="MenuTheme.Dark" Mode="MenuMode.Inline" DefaultSelectedKeys=@(new[]{"4"})>
             <MenuItem Key="1">
-                <AntIcon Type="user" Theme="outline" />
+                <Icon Type="user" Theme="outline" />
                 <span class="nav-text">nav 1</span>
             </MenuItem>
             <MenuItem Key="2">
-                <AntIcon Type="video-camera" Theme="outline" />
+                <Icon Type="video-camera" Theme="outline" />
                 <span class="nav-text">nav 2</span>
             </MenuItem>
             <MenuItem Key="3">
-                <AntIcon Type="upload" Theme="outline" />
+                <Icon Type="upload" Theme="outline" />
                 <span class="nav-text">nav 3</span>
             </MenuItem>
             <MenuItem Key="4">
-                <AntIcon Type="user" Theme="outline" />
+                <Icon Type="user" Theme="outline" />
                 <span class="nav-text">nav 4</span>
             </MenuItem>
         </Menu>
diff --git a/site/AntBlazor.Docs/Demos/Layout/demo/Side.razor b/site/AntBlazor.Docs/Demos/Layout/demo/Side.razor
index 068faf0f9..38a47a422 100644
--- a/site/AntBlazor.Docs/Demos/Layout/demo/Side.razor
+++ b/site/AntBlazor.Docs/Demos/Layout/demo/Side.razor
@@ -3,17 +3,17 @@
         <div class="logo" />
         <Menu Theme="MenuTheme.Dark" DefaultSelectedKeys=@(new[]{"1"}) Mode="MenuMode.Inline">
             <MenuItem Key="1">
-                <AntIcon Type="pie-chart" Theme="outline" />
+                <Icon Type="pie-chart" Theme="outline" />
                 <span>Option 1</span>
             </MenuItem>
             <MenuItem Key="2">
-                <AntIcon Type="desktop" Theme="outline" />
+                <Icon Type="desktop" Theme="outline" />
                 <span>Option 2</span>
             </MenuItem>
             @{
                 RenderFragment sub1Title =
                     @<span>
-                        <AntIcon Type="user" Theme="outline"/>
+                        <Icon Type="user" Theme="outline"/>
                         <span>User</span>
                     </span>;
             }
@@ -25,7 +25,7 @@
             @{
                 RenderFragment sub2Title =
                     @<span>
-                        <AntIcon Type="team" Theme="outline"/>
+                        <Icon Type="team" Theme="outline"/>
                         <span>Team</span>
                     </span>;
             }
@@ -34,7 +34,7 @@
             <MenuItem Key="8">Team 2</MenuItem>
             </SubMenu>
             <MenuItem Key="9">
-                <AntIcon Type="file" Theme="outline"/>
+                <Icon Type="file" Theme="outline"/>
             </MenuItem>
         </Menu>
     </Sider>
diff --git a/site/AntBlazor.Docs/Demos/Layout/demo/TopSide.razor b/site/AntBlazor.Docs/Demos/Layout/demo/TopSide.razor
index 205a8920d..1380761e4 100644
--- a/site/AntBlazor.Docs/Demos/Layout/demo/TopSide.razor
+++ b/site/AntBlazor.Docs/Demos/Layout/demo/TopSide.razor
@@ -21,7 +21,7 @@
                       Style="height: 100%;">
                     @{ RenderFragment sub1Title =
                         @<span>
-                            <AntIcon Type="user" Theme="outline" />
+                            <Icon Type="user" Theme="outline" />
                             subnav 1
                         </span>; }
                     <SubMenu Key="sub1" Title=sub1Title>
@@ -32,7 +32,7 @@
                     </SubMenu>
                     @{ RenderFragment sub2Title =
                         @<span>
-                            <AntIcon Type="laptop" Theme="outline" />
+                            <Icon Type="laptop" Theme="outline" />
                             subnav 2
                         </span>; }
                     <SubMenu Key="sub2" Title=sub2Title>
@@ -43,7 +43,7 @@
                     </SubMenu>
                     @{ RenderFragment sub3Title =
                         @<span>
-                            <AntIcon Type="notification" Theme="outline" />
+                            <Icon Type="notification" Theme="outline" />
                             subnav 3
                         </span>; }
                     <SubMenu Key="sub3" Title=sub3Title>
diff --git a/site/AntBlazor.Docs/Demos/Layout/demo/TopSide2.razor b/site/AntBlazor.Docs/Demos/Layout/demo/TopSide2.razor
index a387b4ebc..7a4653418 100644
--- a/site/AntBlazor.Docs/Demos/Layout/demo/TopSide2.razor
+++ b/site/AntBlazor.Docs/Demos/Layout/demo/TopSide2.razor
@@ -16,7 +16,7 @@
                 @{
                     RenderFragment sub1Title =
                     @<span>
-                        <AntIcon Type="user" Theme="outline" />
+                        <Icon Type="user" Theme="outline" />
                         subnav 1
                     </span>;
                 }
@@ -29,7 +29,7 @@
                 @{
                     RenderFragment sub2Title =
                     @<span>
-                        <AntIcon Type="laptop" Theme="outline" />
+                        <Icon Type="laptop" Theme="outline" />
                         subnav 2
                     </span>;
                 }
@@ -42,7 +42,7 @@
                 @{
                     RenderFragment sub3Title =
                     @<span>
-                        <AntIcon Type="notification" Theme="outline" />
+                        <Icon Type="notification" Theme="outline" />
                         subnav 3
                     </span>;
                 }
diff --git a/site/AntBlazor.Docs/Demos/List/demo/Grid.razor b/site/AntBlazor.Docs/Demos/List/demo/Grid.razor
index e857cd477..44053c794 100644
--- a/site/AntBlazor.Docs/Demos/List/demo/Grid.razor
+++ b/site/AntBlazor.Docs/Demos/List/demo/Grid.razor
@@ -1,10 +1,10 @@
 <AntList Grid="gutter" DataSource="@Data">
     <Item Context="item">
-        <AntCard Title="@(item.Title)">
+        <Card Title="@(item.Title)">
             <Body>
                 Card context
             </Body>
-        </AntCard>
+        </Card>
     </Item>
 </AntList>
 
diff --git a/site/AntBlazor.Docs/Demos/List/demo/Simple.razor b/site/AntBlazor.Docs/Demos/List/demo/Simple.razor
index 6b9084175..8e098afe0 100644
--- a/site/AntBlazor.Docs/Demos/List/demo/Simple.razor
+++ b/site/AntBlazor.Docs/Demos/List/demo/Simple.razor
@@ -1,4 +1,4 @@
-<AntDivider Orientation="left">Default Size</AntDivider>
+<Divider Orientation="left">Default Size</Divider>
 
 <AntList DataSource="@data">
     <Header>Header</Header>
@@ -8,7 +8,7 @@
     <Footer>Footer</Footer>
 </AntList>
 
-<AntDivider Orientation="left">Small Size</AntDivider>
+<Divider Orientation="left">Small Size</Divider>
 
 <AntList DataSource="@data" Size="small">
     <Header>Header</Header>
@@ -18,7 +18,7 @@
     <Footer>Footer</Footer>
 </AntList>
 
-<AntDivider Orientation="left">Large Size</AntDivider>
+<Divider Orientation="left">Large Size</Divider>
 
 <AntList DataSource="@data" Size="large">
     <Header>Header</Header>
diff --git a/site/AntBlazor.Docs/Demos/List/demo/resposive.md b/site/AntBlazor.Docs/Demos/List/demo/resposive.md
index d58bc5ad4..0fd5399e0 100644
--- a/site/AntBlazor.Docs/Demos/List/demo/resposive.md
+++ b/site/AntBlazor.Docs/Demos/List/demo/resposive.md
@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-响应式的栅格列表。尺寸与 [Layout Grid](/components/grid-cn/#Col) 保持一致。
+响应式的栅格列表。尺寸与 [Layout Grid](/components/grid-cn/#AntDesign.Col) 保持一致。
 
 ## en-US
 
-Responsive grid list. The size property the is as same as [Layout Grid](/components/grid/#Col).
+Responsive grid list. The size property the is as same as [Layout Grid](/components/grid/#AntDesign.Col).
 
 ```jsx
 import { List, Card } from 'antd';
diff --git a/site/AntBlazor.Docs/Demos/Menu/demo/Horizontal.razor b/site/AntBlazor.Docs/Demos/Menu/demo/Horizontal.razor
index 771ac660e..05718db09 100644
--- a/site/AntBlazor.Docs/Demos/Menu/demo/Horizontal.razor
+++ b/site/AntBlazor.Docs/Demos/Menu/demo/Horizontal.razor
@@ -1,10 +1,10 @@
 <Menu Mode=MenuMode.Horizontal>
     <MenuItem Key="mail">
-        <AntIcon Type="mail" Theme="outline"></AntIcon>
+        <Icon Type="mail" Theme="outline"></Icon>
         Navigation One
     </MenuItem>
     <MenuItem Key="app" Disabled>
-        <AntIcon Type="appstore" Theme="outline" ></AntIcon>
+        <Icon Type="appstore" Theme="outline" ></Icon>
         Navigation Two
     </MenuItem>
     <SubMenu Title=sub1Title>
@@ -28,7 +28,7 @@
 {
     RenderFragment sub1Title =
         @<Template>
-            <AntIcon Type="setting" Theme="outline"></AntIcon>
+            <Icon Type="setting" Theme="outline"></Icon>
             Navigation Three - Submenu
         </Template>;
 }
diff --git a/site/AntBlazor.Docs/Demos/Menu/demo/Inline.razor b/site/AntBlazor.Docs/Demos/Menu/demo/Inline.razor
index 725029aee..d97905f03 100644
--- a/site/AntBlazor.Docs/Demos/Menu/demo/Inline.razor
+++ b/site/AntBlazor.Docs/Demos/Menu/demo/Inline.razor
@@ -32,19 +32,19 @@
 {
     RenderFragment sub1Title =
     @<span>
-        <AntIcon Type="mail" Theme="outline"></AntIcon>
+        <Icon Type="mail" Theme="outline"></Icon>
         <span>Navigation One</span>
     </span>;
 
 RenderFragment sub2Title =
 @<span>
-    <AntIcon Type="appstore" Theme="outline"></AntIcon>
+    <Icon Type="appstore" Theme="outline"></Icon>
     <span>Navigation Two</span>
 </span>;
 
 RenderFragment sub4Title =
 @<span>
-    <AntIcon Type="setting" Theme="outline"></AntIcon>
+    <Icon Type="setting" Theme="outline"></Icon>
     <span>Navigation Three</span>
 </span>;
 }
diff --git a/site/AntBlazor.Docs/Demos/Menu/demo/InlineCollapsed.razor b/site/AntBlazor.Docs/Demos/Menu/demo/InlineCollapsed.razor
index 9ccc8b27c..efb4b5d05 100644
--- a/site/AntBlazor.Docs/Demos/Menu/demo/InlineCollapsed.razor
+++ b/site/AntBlazor.Docs/Demos/Menu/demo/InlineCollapsed.razor
@@ -2,11 +2,11 @@
     <Button Type="primary" OnClick="ToggleCollapsed" Style="margin-bottom: 16px">
         @if (collapsed)
         {
-            <AntIcon  Type="menu-unfold" Theme="outline"></AntIcon>
+            <Icon  Type="menu-unfold" Theme="outline"></Icon>
         }
         else
         {
-            <AntIcon  Type="menu-fold" Theme="outline"></AntIcon>
+            <Icon  Type="menu-fold" Theme="outline"></Icon>
         }
     </Button>
     <Menu
@@ -17,15 +17,15 @@
         InlineCollapsed=collapsed
     >
         <MenuItem Key="1">
-            <AntIcon Type="pie-chart" Theme="outline"></AntIcon>
+            <Icon Type="pie-chart" Theme="outline"></Icon>
             <span>Option 1</span>
         </MenuItem>
         <MenuItem Key="2">
-            <AntIcon Type="desktop" Theme="outline"></AntIcon>
+            <Icon Type="desktop" Theme="outline"></Icon>
             <span>Option 2</span>
         </MenuItem>
         <MenuItem Key="3">
-            <AntIcon Type="container" Theme="outline"></AntIcon>
+            <Icon Type="container" Theme="outline"></Icon>
             <span>Option 3</span>
         </MenuItem>
         <SubMenu Key="sub1" Title=sub1Title >
@@ -50,13 +50,13 @@
 
     RenderFragment sub1Title =
         @<span>
-            <AntIcon Type="mail" Theme="outline"></AntIcon>
+            <Icon Type="mail" Theme="outline"></Icon>
             <span>Navigation One</span>
         </span>;
 
     RenderFragment sub2Title =
         @<span>
-            <AntIcon Type="appstore" Theme="outline"></AntIcon>
+            <Icon Type="appstore" Theme="outline"></Icon>
             <span>Navigation Two</span>
         </span>;
 
diff --git a/site/AntBlazor.Docs/Demos/Menu/demo/SiderCurrent.razor b/site/AntBlazor.Docs/Demos/Menu/demo/SiderCurrent.razor
index 28d226c91..4ec459cef 100644
--- a/site/AntBlazor.Docs/Demos/Menu/demo/SiderCurrent.razor
+++ b/site/AntBlazor.Docs/Demos/Menu/demo/SiderCurrent.razor
@@ -27,19 +27,19 @@
 @code {
     RenderFragment sub1Title =
         @<span>
-            <AntIcon Type="mail" Theme="outline"></AntIcon>
+            <Icon Type="mail" Theme="outline"></Icon>
             <span>Navigation One</span>
         </span>;
 
     RenderFragment sub2Title =
         @<span>
-            <AntIcon Type="appstore" Theme="outline"></AntIcon>
+            <Icon Type="appstore" Theme="outline"></Icon>
             <span>Navigation Two</span>
         </span>;
 
     RenderFragment sub4Title =
         @<span>
-            <AntIcon Type="setting" Theme="outline"></AntIcon>
+            <Icon Type="setting" Theme="outline"></Icon>
             <span>Navigation Three</span>
         </span>;
 
diff --git a/site/AntBlazor.Docs/Demos/Menu/demo/SwitchMode.razor b/site/AntBlazor.Docs/Demos/Menu/demo/SwitchMode.razor
index 84cd2278e..078289e0a 100644
--- a/site/AntBlazor.Docs/Demos/Menu/demo/SwitchMode.razor
+++ b/site/AntBlazor.Docs/Demos/Menu/demo/SwitchMode.razor
@@ -10,11 +10,11 @@
           Mode=this.mode
           Theme=this.theme>
         <MenuItem Key="1">
-            <AntIcon Type="mail" Theme="outline"></AntIcon>
+            <Icon Type="mail" Theme="outline"></Icon>
             Navigation One
         </MenuItem>
         <MenuItem Key="2">
-            <AntIcon Type="calendar" Theme="outline"></AntIcon>
+            <Icon Type="calendar" Theme="outline"></Icon>
             Navigation Two
         </MenuItem>
         <SubMenu Key="sub1" Title=sub1Title>
@@ -38,13 +38,13 @@
 
     RenderFragment sub1Title =
         @<span>
-            <AntIcon Type="appstore" Theme="outline"></AntIcon>
+            <Icon Type="appstore" Theme="outline"></Icon>
             <span>Navigation Three</span>
         </span>;
 
     RenderFragment sub2Title =
         @<span>
-            <AntIcon Type="setting" Theme="outline"></AntIcon>
+            <Icon Type="setting" Theme="outline"></Icon>
             <span>Navigation Four</span>
         </span>;
 
diff --git a/site/AntBlazor.Docs/Demos/Menu/demo/Theme.razor b/site/AntBlazor.Docs/Demos/Menu/demo/Theme.razor
index 7e1e8d772..541bd5367 100644
--- a/site/AntBlazor.Docs/Demos/Menu/demo/Theme.razor
+++ b/site/AntBlazor.Docs/Demos/Menu/demo/Theme.razor
@@ -35,19 +35,19 @@
 
     RenderFragment sub1Title =
         @<span>
-            <AntIcon Type="mail" Theme="outline"></AntIcon>
+            <Icon Type="mail" Theme="outline"></Icon>
             <span>Navigation One</span>
         </span>;
 
     RenderFragment sub2Title =
         @<span>
-            <AntIcon Type="appstore" Theme="outline"></AntIcon>
+            <Icon Type="appstore" Theme="outline"></Icon>
             <span>Navigation Two</span>
         </span>;
 
     RenderFragment sub4Title =
         @<span>
-            <AntIcon Type="setting" Theme="outline"></AntIcon>
+            <Icon Type="setting" Theme="outline"></Icon>
             <span>Navigation Three</span>
         </span>;
 
diff --git a/site/AntBlazor.Docs/Demos/Menu/demo/Vertical.razor b/site/AntBlazor.Docs/Demos/Menu/demo/Vertical.razor
index 4496654d9..94baed46f 100644
--- a/site/AntBlazor.Docs/Demos/Menu/demo/Vertical.razor
+++ b/site/AntBlazor.Docs/Demos/Menu/demo/Vertical.razor
@@ -28,19 +28,19 @@
 
     RenderFragment sub1Title =
         @<span>
-            <AntIcon Type="mail" Theme="outline"></AntIcon>
+            <Icon Type="mail" Theme="outline"></Icon>
             <span>Navigation One</span>
         </span>;
 
     RenderFragment sub2Title =
         @<span>
-            <AntIcon Type="appstore" Theme="outline"></AntIcon>
+            <Icon Type="appstore" Theme="outline"></Icon>
             <span>Navigation Two</span>
         </span>;
 
     RenderFragment sub4Title =
         @<span>
-            <AntIcon Type="setting" Theme="outline"></AntIcon>
+            <Icon Type="setting" Theme="outline"></Icon>
             <span>Navigation Three</span>
         </span>;
 
diff --git a/site/AntBlazor.Docs/Demos/Modal/demo/Confirm.razor b/site/AntBlazor.Docs/Demos/Modal/demo/Confirm.razor
index 12252ce67..00fc18e84 100644
--- a/site/AntBlazor.Docs/Demos/Modal/demo/Confirm.razor
+++ b/site/AntBlazor.Docs/Demos/Modal/demo/Confirm.razor
@@ -21,7 +21,7 @@
     {
         Console.WriteLine("Cancel");
     };
-    RenderFragment icon = @<AntIcon Type="exclamation-circle" Theme="outline"></AntIcon>;
+    RenderFragment icon = @<Icon Type="exclamation-circle" Theme="outline"></Icon>;
 
     private void ShowConfirm()
     {
diff --git a/site/AntBlazor.Docs/Demos/Modal/demo/ConfirmPromise.razor b/site/AntBlazor.Docs/Demos/Modal/demo/ConfirmPromise.razor
index 97dc48556..f57adec5d 100644
--- a/site/AntBlazor.Docs/Demos/Modal/demo/ConfirmPromise.razor
+++ b/site/AntBlazor.Docs/Demos/Modal/demo/ConfirmPromise.razor
@@ -11,7 +11,7 @@
 
     private void ShowConfirm()
     {
-        RenderFragment icon =@<AntIcon Type="exclamation-circle" Theme="outline"></AntIcon>;
+        RenderFragment icon =@<Icon Type="exclamation-circle" Theme="outline"></Icon>;
 
         _modalService.Confirm(new ConfirmOptions()
         {
diff --git a/site/AntBlazor.Docs/Demos/Modal/demo/ConfirmRouter.razor b/site/AntBlazor.Docs/Demos/Modal/demo/ConfirmRouter.razor
index 1993adb9a..c392a1044 100644
--- a/site/AntBlazor.Docs/Demos/Modal/demo/ConfirmRouter.razor
+++ b/site/AntBlazor.Docs/Demos/Modal/demo/ConfirmRouter.razor
@@ -12,7 +12,7 @@
 
     private async Task ShowConfirm()
     {
-        RenderFragment icon =@<AntIcon Type="exclamation-circle" Theme="outline"></AntIcon>;
+        RenderFragment icon =@<Icon Type="exclamation-circle" Theme="outline"></Icon>;
         RenderFragment content = @<Button OnClick="DestroyAll"> Click to destroy all </Button>;
 
         for (int i = 0; i < 3; i++)
diff --git a/site/AntBlazor.Docs/Demos/Modal/demo/Locale.razor b/site/AntBlazor.Docs/Demos/Modal/demo/Locale.razor
index 44a71ebe4..0cc65a3b2 100644
--- a/site/AntBlazor.Docs/Demos/Modal/demo/Locale.razor
+++ b/site/AntBlazor.Docs/Demos/Modal/demo/Locale.razor
@@ -37,7 +37,7 @@
         _modalService.Confirm(new ConfirmOptions()
         {
             Title = "Confirm",
-            Icon =@<AntIcon Type="exclamation-circle" Theme="Outline"></AntIcon>,
+            Icon =@<Icon Type="exclamation-circle" Theme="Outline"></Icon>,
             Content = "Bla bla ...",
             OkText = "确认",
             CancelText = "取消"
diff --git a/site/AntBlazor.Docs/Demos/Notification/demo/CustomIcon.razor b/site/AntBlazor.Docs/Demos/Notification/demo/CustomIcon.razor
index ff0827c08..a3034c732 100644
--- a/site/AntBlazor.Docs/Demos/Notification/demo/CustomIcon.razor
+++ b/site/AntBlazor.Docs/Demos/Notification/demo/CustomIcon.razor
@@ -8,7 +8,7 @@
 
     private async Task OnClick()
     {
-        RenderFragment customIcon = @<AntIcon Type="smile" Theme="outline" Style="color:#108ee9;"></AntIcon>;
+        RenderFragment customIcon = @<Icon Type="smile" Theme="outline" Style="color:#108ee9;"></Icon>;
         await _notice.Open(new NotificationConfig()
         {
             Message = "Notification Title",
diff --git a/site/AntBlazor.Docs/Demos/Notification/demo/Placement.razor b/site/AntBlazor.Docs/Demos/Notification/demo/Placement.razor
index e246fc335..9243c812f 100644
--- a/site/AntBlazor.Docs/Demos/Notification/demo/Placement.razor
+++ b/site/AntBlazor.Docs/Demos/Notification/demo/Placement.razor
@@ -2,12 +2,12 @@
 
 <div>
     <Button Type="@ButtonType.Primary" OnClick="@OnTopLeftClick">
-        <AntIcon Type="Radius-Upleft" Theme="Outline"></AntIcon>
+        <Icon Type="Radius-Upleft" Theme="Outline"></Icon>
         TopLeft
     </Button>
 
     <Button Type="@ButtonType.Primary" OnClick="@OnTopRightClick">
-        <AntIcon Type="Radius-Upright" Theme="Outline"></AntIcon>
+        <Icon Type="Radius-Upright" Theme="Outline"></Icon>
         TopRight
     </Button>
 </div>
@@ -16,12 +16,12 @@
 
 <div>
     <Button Type="@ButtonType.Primary" OnClick="@OnBottomLeftClick">
-        <AntIcon Type="Radius-Bottomleft" Theme="Outline"></AntIcon>
+        <Icon Type="Radius-Bottomleft" Theme="Outline"></Icon>
         BottomLeft
     </Button>
 
     <Button Type="@ButtonType.Primary" OnClick="@OnBottomRightClick">
-        <AntIcon Type="Radius-Bottomright" Theme="Outline"></AntIcon>
+        <Icon Type="Radius-Bottomright" Theme="Outline"></Icon>
         BottomRight
     </Button>
 </div>
diff --git a/site/AntBlazor.Docs/Demos/Pagination/demo/Changer.razor b/site/AntBlazor.Docs/Demos/Pagination/demo/Changer.razor
index e56e2b4ea..15d4f3bd7 100644
--- a/site/AntBlazor.Docs/Demos/Pagination/demo/Changer.razor
+++ b/site/AntBlazor.Docs/Demos/Pagination/demo/Changer.razor
@@ -1,5 +1,3 @@
-<h3>Changer</h3>
-
-@code {
-
-}
+<div>
+    To do
+</div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Pagination/demo/Controlled.razor b/site/AntBlazor.Docs/Demos/Pagination/demo/Controlled.razor
index 9444dd2c2..9c8871c29 100644
--- a/site/AntBlazor.Docs/Demos/Pagination/demo/Controlled.razor
+++ b/site/AntBlazor.Docs/Demos/Pagination/demo/Controlled.razor
@@ -1,6 +1,10 @@
-<Pagination @bind-Current="@current" OnChange=onChange Total="50" />
+<div>
+    <Pagination Current="@current" CurrentChanged=onChange Total="50" />
+</div>
+
 
 @code {
+
     int current = 3;
 
     void onChange(int page)
diff --git a/site/AntBlazor.Docs/Demos/Pagination/demo/Jump.razor b/site/AntBlazor.Docs/Demos/Pagination/demo/Jump.razor
index 2915735fb..f1e22123f 100644
--- a/site/AntBlazor.Docs/Demos/Pagination/demo/Jump.razor
+++ b/site/AntBlazor.Docs/Demos/Pagination/demo/Jump.razor
@@ -1,7 +1,7 @@
 <div>
-    <Pagination ShowQuickJumper DefaultCurrent="2" Total="500" OnChange=onChange />
+    <Pagination ShowQuickJumper DefaultCurrent="2" Total="500" CurrentChanged=onChange />
     <br />
-    <Pagination ShowQuickJumper DefaultCurrent="2" Total="500" OnChange=onChange Disabled />
+    <Pagination ShowQuickJumper DefaultCurrent="2" Total="500" CurrentChanged=onChange Disabled />
 </div>
 @code{
 
diff --git a/site/AntBlazor.Docs/Demos/Radio/demo/Optional.razor b/site/AntBlazor.Docs/Demos/Radio/demo/Optional.razor
index df4495110..e2f28213e 100644
--- a/site/AntBlazor.Docs/Demos/Radio/demo/Optional.razor
+++ b/site/AntBlazor.Docs/Demos/Radio/demo/Optional.razor
@@ -1,3 +1,3 @@
 <div>
- it will come.
+ To do 
 </div>
diff --git a/site/AntBlazor.Docs/Demos/Rate/demo/Character.razor b/site/AntBlazor.Docs/Demos/Rate/demo/Character.razor
index 03b53f68c..1650e53a6 100644
--- a/site/AntBlazor.Docs/Demos/Rate/demo/Character.razor
+++ b/site/AntBlazor.Docs/Demos/Rate/demo/Character.razor
@@ -8,7 +8,7 @@
 {
     RenderFragment<RateItemRenderContext> Character1 = (builder) =>
     @<Template>
-        <AntIcon Type="heart" Theme="fill" />
+        <Icon Type="heart" Theme="fill" />
     </Template>;
 
     RenderFragment<RateItemRenderContext> Character2 = (builder) =>
diff --git a/site/AntBlazor.Docs/Demos/Result/demo/Error.razor b/site/AntBlazor.Docs/Demos/Result/demo/Error.razor
index 5966421a9..59a26d855 100644
--- a/site/AntBlazor.Docs/Demos/Result/demo/Error.razor
+++ b/site/AntBlazor.Docs/Demos/Result/demo/Error.razor
@@ -5,19 +5,19 @@
     Extra=extra
 >
 <div class="desc">
-    <AntParagraph>
-        <AntText Strong Style="font-size: 16px;">
+    <Paragraph>
+        <Text Strong Style="font-size: 16px;">
             The content you submitted has the following error:
-        </AntText>
-    </AntParagraph>
-    <AntParagraph>
-        <AntIcon Type="close-circle" Theme="Outline" Class="site-result-demo-error-icon" /> Your account has been frozen
+        </Text>
+    </Paragraph>
+    <Paragraph>
+        <Icon Type="close-circle" Theme="Outline" Class="site-result-demo-error-icon" /> Your account has been frozen
         <a>Thaw immediately &gt;</a>
-    </AntParagraph>
-    <AntParagraph>
-        <AntIcon Type="close-circle" Theme="Outline" Class="site-result-demo-error-icon" /> Your account is not yet
+    </Paragraph>
+    <Paragraph>
+        <Icon Type="close-circle" Theme="Outline" Class="site-result-demo-error-icon" /> Your account is not yet
         eligible to apply <a>Apply Unlock &gt;</a>
-    </AntParagraph>
+    </Paragraph>
 </div>
 </Result>
 
diff --git a/site/AntBlazor.Docs/Demos/Slider/demo/Icon.razor b/site/AntBlazor.Docs/Demos/Slider/demo/Icon.razor
deleted file mode 100644
index 5cd231334..000000000
--- a/site/AntBlazor.Docs/Demos/Slider/demo/Icon.razor
+++ /dev/null
@@ -1,7 +0,0 @@
-<div>
-    <AntIcon Style="display: inline-block" Type="Frown" Theme="outline" />
-    <Slider Style="display: inline-block; width: 300px;" Min="0" Max="20" DefaultValue="5" />
-    <AntIcon Style="display: inline-block" Type="Smile" Theme="outline" />
-</div>
-
-
diff --git a/site/AntBlazor.Docs/Demos/Slider/demo/Icon.md b/site/AntBlazor.Docs/Demos/Slider/demo/Icon1.md
similarity index 100%
rename from site/AntBlazor.Docs/Demos/Slider/demo/Icon.md
rename to site/AntBlazor.Docs/Demos/Slider/demo/Icon1.md
diff --git a/site/AntBlazor.Docs/Demos/Slider/demo/Icon1.razor b/site/AntBlazor.Docs/Demos/Slider/demo/Icon1.razor
new file mode 100644
index 000000000..5df841216
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Slider/demo/Icon1.razor
@@ -0,0 +1,7 @@
+<div>
+    <Icon Style="display: inline-block" Type="Frown" Theme="outline" />
+    <Slider Style="display: inline-block; width: 300px;" Min="0" Max="20" DefaultValue="5" />
+    <Icon Style="display: inline-block" Type="Smile" Theme="outline" />
+</div>
+
+
diff --git a/site/AntBlazor.Docs/Demos/Space/demo/Base.razor b/site/AntBlazor.Docs/Demos/Space/demo/Base.razor
index 5d9e31978..3ad4d6cef 100644
--- a/site/AntBlazor.Docs/Demos/Space/demo/Base.razor
+++ b/site/AntBlazor.Docs/Demos/Space/demo/Base.razor
@@ -7,7 +7,7 @@
     </SpaceItem>
     <SpaceItem>
         <Button>
-            <AntIcon Type="upload" Theme="outline" /> Click to Upload
+            <Icon Type="upload" Theme="outline" /> Click to Upload
         </Button>
     </SpaceItem>
     <SpaceItem>
diff --git a/site/AntBlazor.Docs/Demos/Space/demo/Vertical.razor b/site/AntBlazor.Docs/Demos/Space/demo/Vertical.razor
index 7f1362f1a..de59f1033 100644
--- a/site/AntBlazor.Docs/Demos/Space/demo/Vertical.razor
+++ b/site/AntBlazor.Docs/Demos/Space/demo/Vertical.razor
@@ -1,14 +1,14 @@
 <Space Direction="vertical">
     <SpaceItem>
-        <AntCard Title=@("Card") Style="width: 300px;">
+        <Card Title=@("Card") Style="width: 300px;">
             <p>Card content</p>
             <p>Card content</p>
-        </AntCard>
+        </Card>
     </SpaceItem>
     <SpaceItem>
-        <AntCard Title=@("Card") Style="width: 300px;">
+        <Card Title=@("Card") Style="width: 300px;">
             <p>Card content</p>
             <p>Card content</p>
-        </AntCard>
+        </Card>
     </SpaceItem>
 </Space>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Spin/demo/CustomIndicator.razor b/site/AntBlazor.Docs/Demos/Spin/demo/CustomIndicator.razor
index 5f73e16bf..65e07313a 100644
--- a/site/AntBlazor.Docs/Demos/Spin/demo/CustomIndicator.razor
+++ b/site/AntBlazor.Docs/Demos/Spin/demo/CustomIndicator.razor
@@ -1,4 +1,4 @@
 <Spin Indicator=antIcon />
 @code{
-    RenderFragment antIcon = @<AntIcon Type="loading" Theme="outline" Style="font-size: 24px" Spin />;
+    RenderFragment antIcon = @<Icon Type="loading" Theme="outline" Style="font-size: 24px" Spin />;
 }
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Switch/demo/Disable.razor b/site/AntBlazor.Docs/Demos/Switch/demo/Disable.razor
index 5dbffa3f3..d3a08fde8 100644
--- a/site/AntBlazor.Docs/Demos/Switch/demo/Disable.razor
+++ b/site/AntBlazor.Docs/Demos/Switch/demo/Disable.razor
@@ -12,9 +12,9 @@
     bool switchValue2 = false;
     bool isDisabled2 = true;
 
-    RenderFragment checkedChildren =@<AntIcon Type="check"></AntIcon>;
+    RenderFragment checkedChildren =@<Icon Type="check"></Icon>;
 
-    RenderFragment unCheckedChildren = @<AntIcon Type="close"></AntIcon>;
+    RenderFragment unCheckedChildren = @<Icon Type="close"></Icon>;
 
 }
 
diff --git a/site/AntBlazor.Docs/Demos/Switch/demo/Icon.md b/site/AntBlazor.Docs/Demos/Switch/demo/Icon1.md
similarity index 100%
rename from site/AntBlazor.Docs/Demos/Switch/demo/Icon.md
rename to site/AntBlazor.Docs/Demos/Switch/demo/Icon1.md
diff --git a/site/AntBlazor.Docs/Demos/Switch/demo/Icon.razor b/site/AntBlazor.Docs/Demos/Switch/demo/Icon1.razor
similarity index 70%
rename from site/AntBlazor.Docs/Demos/Switch/demo/Icon.razor
rename to site/AntBlazor.Docs/Demos/Switch/demo/Icon1.razor
index 1093d90b6..b5719564c 100644
--- a/site/AntBlazor.Docs/Demos/Switch/demo/Icon.razor
+++ b/site/AntBlazor.Docs/Demos/Switch/demo/Icon1.razor
@@ -10,7 +10,7 @@
 
 
 @code{
-    RenderFragment checkedChildren = @<AntIcon Type="check"></AntIcon>;
+    RenderFragment checkedChildren = @<Icon Type="check"></Icon>;
 
-    RenderFragment unCheckedChildren = @<AntIcon Type="close"></AntIcon>;
+    RenderFragment unCheckedChildren = @<Icon Type="close"></Icon>;
 }
diff --git a/site/AntBlazor.Docs/Demos/Table/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Table/demo/Basic.razor
index 6d5ebe4d4..b28c9538c 100644
--- a/site/AntBlazor.Docs/Demos/Table/demo/Basic.razor
+++ b/site/AntBlazor.Docs/Demos/Table/demo/Basic.razor
@@ -14,7 +14,7 @@
             {
                 color = "volcano";
             }
-            <AntTag Color="@color">@tag</AntTag>
+            <Tag Color="@color">@tag</Tag>
         }
     </Column>
     <Column TData="string" Title="Acton">
diff --git a/site/AntBlazor.Docs/Demos/Table/demo/Blazor.razor b/site/AntBlazor.Docs/Demos/Table/demo/Blazor.razor
index 18a4c2e9b..b50e125af 100644
--- a/site/AntBlazor.Docs/Demos/Table/demo/Blazor.razor
+++ b/site/AntBlazor.Docs/Demos/Table/demo/Blazor.razor
@@ -25,7 +25,7 @@
 {
     @foreach (var selected in selectedRows)
     {
-        <AntTag>@selected.Summary</AntTag>
+        <Tag>@selected.Summary</Tag>
     }
 }
 
diff --git a/site/AntBlazor.Docs/Demos/Tag/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Tag/demo/Basic.razor
index 3cccf8170..3f5108cee 100644
--- a/site/AntBlazor.Docs/Demos/Tag/demo/Basic.razor
+++ b/site/AntBlazor.Docs/Demos/Tag/demo/Basic.razor
@@ -1,10 +1,10 @@
 <div>
-    <AntTag >Tag 1</AntTag>
-    <AntTag>
+    <Tag >Tag 1</Tag>
+    <Tag>
         <a href="https://github.com/ant-design-blazor/ant-design-blazor">Link</a>
-    </AntTag>
-    <AntTag Mode="closeable" OnClose="()=>onClose()">Tag 2</AntTag>
-    <AntTag Mode="closeable" OnClose="preventDefault">Prevent Default</AntTag>
+    </Tag>
+    <Tag Mode="closeable" OnClose="()=>onClose()">Tag 2</Tag>
+    <Tag Mode="closeable" OnClose="preventDefault">Prevent Default</Tag>
 </div>
 
 @code{
@@ -12,7 +12,6 @@
     {
 
     }
-
     void preventDefault()
     {
 
diff --git a/site/AntBlazor.Docs/Demos/Tag/demo/Checkable.razor b/site/AntBlazor.Docs/Demos/Tag/demo/Checkable.razor
index 9f1650b04..3f26d8da1 100644
--- a/site/AntBlazor.Docs/Demos/Tag/demo/Checkable.razor
+++ b/site/AntBlazor.Docs/Demos/Tag/demo/Checkable.razor
@@ -1,7 +1,7 @@
 <div>
-    <AntTag  Mode="checkable"  Checked="check1">Tag1</AntTag>
-    <AntTag Mode="checkable" Checked="check1">Tag2</AntTag>
-    <AntTag Mode="checkable" Checked="check1" CheckedChange="_checked=>checkChange(_checked)">Tag3</AntTag>
+    <Tag  Mode="checkable"  Checked="check1">Tag1</Tag>
+    <Tag Mode="checkable" Checked="check1">Tag2</Tag>
+    <Tag Mode="checkable" Checked="check1" CheckedChange="_checked=>checkChange(_checked)">Tag3</Tag>
     
 </div>
 
diff --git a/site/AntBlazor.Docs/Demos/Tag/demo/Colorful.razor b/site/AntBlazor.Docs/Demos/Tag/demo/Colorful.razor
index 0f67a6ea6..4c0f58ae8 100644
--- a/site/AntBlazor.Docs/Demos/Tag/demo/Colorful.razor
+++ b/site/AntBlazor.Docs/Demos/Tag/demo/Colorful.razor
@@ -1,22 +1,20 @@
 <div>
-
-
     <div>
         Presets:
     </div>
     <br />
     <div>
-        <AntTag Color="magenta">magenta</AntTag>
-        <AntTag Color="pink">pink</AntTag>
-        <AntTag Color="red">red</AntTag>
-        <AntTag Color="volcano">volcano</AntTag>
-        <AntTag Color="orange">orange</AntTag>
-        <AntTag Color="green">green</AntTag>
-        <AntTag Color="cyan">cyan</AntTag>
-        <AntTag Color="blue">blue</AntTag>
-        <AntTag Color="lime">lime</AntTag>
-        <AntTag Color="geekblue">geekblue</AntTag>
-        <AntTag Color="purple">purple</AntTag>
+        <Tag Color="magenta">magenta</Tag>
+        <Tag Color="pink">pink</Tag>
+        <Tag Color="red">red</Tag>
+        <Tag Color="volcano">volcano</Tag>
+        <Tag Color="orange">orange</Tag>
+        <Tag Color="green">green</Tag>
+        <Tag Color="cyan">cyan</Tag>
+        <Tag Color="blue">blue</Tag>
+        <Tag Color="lime">lime</Tag>
+        <Tag Color="geekblue">geekblue</Tag>
+        <Tag Color="purple">purple</Tag>
     </div>
     <br />
     <div>
@@ -24,10 +22,10 @@
     </div>
     <br />
     <div>
-        <AntTag Icon="taobao" Color="blue-inverse">blue-inverse</AntTag>
-        <AntTag Color="orange-inverse">orange-inverse</AntTag>
-        <AntTag Icon="skype" Color="red-inverse">red-inverse</AntTag>
-        <AntTag Icon="weibo" Color="purple-inverse">purple-inverse</AntTag>
+        <Tag Icon="taobao" Color="blue-inverse">blue-inverse</Tag>
+        <Tag Color="orange-inverse">orange-inverse</Tag>
+        <Tag Icon="skype" Color="red-inverse">red-inverse</Tag>
+        <Tag Icon="weibo" Color="purple-inverse">purple-inverse</Tag>
     </div>
     <br />
     <div>
@@ -37,7 +35,4 @@
     <div>
         To Do
     </div>
-
-
-
 </div>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Tag/demo/Controlled.razor b/site/AntBlazor.Docs/Demos/Tag/demo/Controlled.razor
index 17a795748..6836a9c8a 100644
--- a/site/AntBlazor.Docs/Demos/Tag/demo/Controlled.razor
+++ b/site/AntBlazor.Docs/Demos/Tag/demo/Controlled.razor
@@ -1,10 +1,8 @@
 <div>
-
-    <AntTag Mode="closeable" Visible="bVisible">Movies</AntTag>
+    <Tag Mode="closeable" Visible="bVisible">Movies</Tag>
     <br />
     <br />
     <Button Size="small" OnClick="onClick">Toggle</Button>
-
 </div>
 
 @code{
diff --git a/site/AntBlazor.Docs/Demos/Tag/demo/Dynamic.razor b/site/AntBlazor.Docs/Demos/Tag/demo/Dynamic.razor
index a66f61ac6..39651ebcc 100644
--- a/site/AntBlazor.Docs/Demos/Tag/demo/Dynamic.razor
+++ b/site/AntBlazor.Docs/Demos/Tag/demo/Dynamic.razor
@@ -2,7 +2,7 @@
     <div>
         @foreach (var item in lstTags)
         {
-            <AntTag Mode="closeable" OnClose="()=>onClose(item)">@item</AntTag>
+            <Tag Mode="closeable" OnClose="()=>onClose(item)">@item</Tag>
         }
         @if (inputVisible)
         {
@@ -10,9 +10,9 @@
         }
         else
         {
-            <AntTag Mode="checkable" Class="editable-tag" OnClick="OnChecked">
-                <AntIcon Type="plus" />New Tag
-            </AntTag>
+            <Tag Mode="checkable" Class="editable-tag" OnClick="OnChecked">
+                <Icon Type="plus" />New Tag
+            </Tag>
         }
     </div>
 </div>
@@ -22,16 +22,10 @@
         border-style: dashed;
     }
 </style>
-
 @code{
-
-
     private bool inputVisible { get; set; } = false;
-
     string _inputValue;
-
     Input _inputRef;
-
     List<string> lstTags { get; set; } = new List<string>();
 
     protected override void OnInitialized()
@@ -39,7 +33,6 @@
         lstTags.Add("Apple");
         lstTags.Add("Mongo");
         lstTags.Add("Peach");
-
     }
 
     void ValueChange(ChangeEventArgs value)
diff --git a/site/AntBlazor.Docs/Demos/Tag/demo/Hot.razor b/site/AntBlazor.Docs/Demos/Tag/demo/Hot.razor
index 9c0f411c6..2a24ad0f6 100644
--- a/site/AntBlazor.Docs/Demos/Tag/demo/Hot.razor
+++ b/site/AntBlazor.Docs/Demos/Tag/demo/Hot.razor
@@ -1,9 +1,9 @@
 <div>
     <span style="margin-right:8px">Categories:</span>
-    <AntTag Mode="checkable" Checked="lstCheck[0]">Movies</AntTag>
-    <AntTag Mode="checkable" Checked="lstCheck[1]">Books</AntTag>
-    <AntTag Mode="checkable" Checked="lstCheck[2]">Music</AntTag>
-    <AntTag Mode="checkable" Checked="lstCheck[3]">Sports</AntTag>
+    <Tag Mode="checkable" Checked="lstCheck[0]">Movies</Tag>
+    <Tag Mode="checkable" Checked="lstCheck[1]">Books</Tag>
+    <Tag Mode="checkable" Checked="lstCheck[2]">Music</Tag>
+    <Tag Mode="checkable" Checked="lstCheck[3]">Sports</Tag>
 </div>
 
 @code{
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Alternate.md b/site/AntBlazor.Docs/Demos/Timeline/demo/Alternate.md
new file mode 100644
index 000000000..552d0fba1
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Alternate.md
@@ -0,0 +1,13 @@
+---
+order: 3
+title:
+  zh-CN: 交替展现
+  en-US: Alternate
+---
+
+## zh-CN
+内容在时间轴两侧轮流出现。
+
+
+## en-US
+Alternate timeline.
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Alternate.razor b/site/AntBlazor.Docs/Demos/Timeline/demo/Alternate.razor
new file mode 100644
index 000000000..8c5bd6ae8
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Alternate.razor
@@ -0,0 +1,21 @@
+<div>
+<Timeline Mode="alternate"  >
+    <TimelineItem>Create a services site 2015-09-01</TimelineItem>
+    <TimelineItem Color="green">Solve initial network problems 2015-09-01</TimelineItem>
+    <TimelineItem Dot="dotTemplate">
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+    </TimelineItem>
+    <TimelineItem Color="red">Network problems being solved 2015-09-01</TimelineItem>
+    <TimelineItem>Create a services site 2015-09-01</TimelineItem>
+    <TimelineItem Dot="dotTemplate">Technical testing 2015-09-01</TimelineItem>
+</Timeline>
+</div>
+
+@code {
+    RenderFragment dotTemplate =
+    @<Template>
+        <Icon Type="clock-circle" Style="font-size: 16px;" />
+    </Template>;
+ }
+
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Basic.md b/site/AntBlazor.Docs/Demos/Timeline/demo/Basic.md
new file mode 100644
index 000000000..587d186be
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Basic.md
@@ -0,0 +1,13 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+最简单的用法。
+
+
+## en-US
+Basic timeline.
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Timeline/demo/Basic.razor
new file mode 100644
index 000000000..02d5bfe0b
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Basic.razor
@@ -0,0 +1,8 @@
+<div>
+    <Timeline>
+        <TimelineItem>Create a services site 2015-09-01</TimelineItem>
+        <TimelineItem Color="red" >Solve initial network problems 2015-09-01</TimelineItem>
+        <TimelineItem>Technical testing 2015-09-01</TimelineItem>
+        <TimelineItem>Network problems being solved 2015-09-01</TimelineItem>
+    </Timeline>
+</div>
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Color.md b/site/AntBlazor.Docs/Demos/Timeline/demo/Color.md
new file mode 100644
index 000000000..37247c9eb
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Color.md
@@ -0,0 +1,13 @@
+---
+order: 1
+title:
+  zh-CN: 圆圈颜色
+  en-US: Color
+---
+
+## zh-CN
+圆圈颜色，`绿色`用于已完成、成功状态，`红色`表示告警或错误状态，`蓝色`可表示正在进行或其他默认状态，`灰色`表示未完成或失效状态。
+
+
+## en-US
+Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status, `gray` for unfinished or disabled status.
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Color.razor b/site/AntBlazor.Docs/Demos/Timeline/demo/Color.razor
new file mode 100644
index 000000000..bdc32e285
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Color.razor
@@ -0,0 +1,26 @@
+<div>
+    <Timeline>
+        <TimelineItem Color="green">Create a services site 2015-09-01</TimelineItem>
+        <TimelineItem Color="green">Create a services site 2015-09-01</TimelineItem>
+        <TimelineItem Color="red">
+            <p>Solve initial network problems 1</p>
+            <p>Solve initial network problems 2</p>
+            <p>Solve initial network problems 3 2015-09-01</p>
+        </TimelineItem>
+        <TimelineItem>
+            <p>Technical testing 1</p>
+            <p>Technical testing 2</p>
+            <p>Technical testing 3 2015-09-01</p>
+        </TimelineItem>
+        <TimelineItem Color="gray">
+            <p>Technical testing 1</p>
+            <p>Technical testing 2</p>
+            <p>Technical testing 3 2015-09-01</p>
+        </TimelineItem>
+        <TimelineItem Color="gray">
+            <p>Technical testing 1</p>
+            <p>Technical testing 2</p>
+            <p>Technical testing 3 2015-09-01</p>
+        </TimelineItem>
+    </Timeline>
+</div>
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Custom.md b/site/AntBlazor.Docs/Demos/Timeline/demo/Custom.md
new file mode 100644
index 000000000..3c34757bb
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Custom.md
@@ -0,0 +1,13 @@
+---
+order: 4
+title:
+  zh-CN: 自定义时间轴点
+  en-US: Basic
+---
+
+## zh-CN
+可以设置为图标或其他自定义元素。
+
+
+## en-US
+Basic usage.
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Custom.razor b/site/AntBlazor.Docs/Demos/Timeline/demo/Custom.razor
new file mode 100644
index 000000000..56335822d
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Custom.razor
@@ -0,0 +1,17 @@
+<div>
+    <Timeline>
+        <TimelineItem>Create a services site 2015-09-01</TimelineItem>
+        <TimelineItem>Solve initial network problems 2015-09-01</TimelineItem>
+        <TimelineItem Dot="dotTemplate"  Color="red">
+        Technical testing 2015-09-01
+        </TimelineItem>
+       <TimelineItem>Network problems being solved 2015-09-01</TimelineItem>
+    </Timeline>
+</div>
+
+@code {
+    RenderFragment dotTemplate =
+        @<Template>
+            <Icon Type="clock-circle" Style="font-size: 16px;" />
+        </Template>;
+}
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Label.md b/site/AntBlazor.Docs/Demos/Timeline/demo/Label.md
new file mode 100644
index 000000000..1bdc1615f
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Label.md
@@ -0,0 +1,13 @@
+---
+order: 6
+title:
+  zh-CN: 标签
+  en-US: label
+---
+
+## zh-CN
+使用 `label` 标签单独展示时间。
+
+
+## en-US
+Use `label` show time alone.
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Label.razor b/site/AntBlazor.Docs/Demos/Timeline/demo/Label.razor
new file mode 100644
index 000000000..b52e833a0
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Label.razor
@@ -0,0 +1,21 @@
+<div>
+    <RadioGroup   @bind-Value ="@mode" Style="margin-bottom:20px" >      
+        <Radio Value="left">Left</Radio>
+        <Radio Value="right">Right</Radio>
+        <Radio Value="alternate">Alternate</Radio>
+    </RadioGroup>
+    <Timeline Mode="@mode">
+        <TimelineItem >Create a services 2015-09-01</TimelineItem>
+        <TimelineItem>Solve initial network problems 2015-09-01 09:12:11</TimelineItem>
+        <TimelineItem>Technical testing</TimelineItem>
+        <TimelineItem >Network problems being solved 2015-09-01 09:12:11</TimelineItem>
+    </Timeline>
+</div
+@code{
+    private string mode = "left";
+    void OnChangClick()
+    {
+
+    }
+
+}
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Reverse.md b/site/AntBlazor.Docs/Demos/Timeline/demo/Reverse.md
new file mode 100644
index 000000000..bf2e04af0
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Reverse.md
@@ -0,0 +1,13 @@
+---
+order: 2
+title:
+  zh-CN: 最后一个及排序
+  en-US: Last node and Reversing
+---
+
+## zh-CN
+当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，当 `pending` 为真值时展示幽灵节点，如果 pending 是 `React 元素`可用于定制该节点内容，同时 pendingDot 将可以用于定制其轴点。`reverse` 属性用于控制节点排序，为 false 时按正序排列，为 true 时按倒序排列。
+
+
+## en-US
+When the timeline is incomplete and ongoing, put a ghost node at last. Set `pending` as truthy value to enable displaying pending item. You can customize the pending content by passing a `React Element`. Meanwhile, pendingDot={a React Element} is used to customize the dot of the pending item. `reverse={true}` is used for reversing nodes.
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Reverse.razor b/site/AntBlazor.Docs/Demos/Timeline/demo/Reverse.razor
new file mode 100644
index 000000000..330383cd0
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Reverse.razor
@@ -0,0 +1,20 @@
+<div>
+    <Timeline Pending="pending" Reverse=@bReverse>
+        <TimelineItem>Create a services site 2015-09-01</TimelineItem>
+        <TimelineItem>Solve initial network problems 2015-09-01</TimelineItem>
+        <TimelineItem>Technical testing 2015-09-01</TimelineItem>
+    </Timeline>
+    <Button Type="primary" Style="margin-top: 16px " OnClick="HandleClick">
+        Toggle Reverse
+    </Button>
+</div>
+@code{
+    private bool bReverse { get; set; } = false;
+    RenderFragment pending = @<Template>
+                                                        Recording...
+                                                    </Template>;
+    void HandleClick()
+    {
+     bReverse = !bReverse;
+    }
+}
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Right.md b/site/AntBlazor.Docs/Demos/Timeline/demo/Right.md
new file mode 100644
index 000000000..66e031481
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Right.md
@@ -0,0 +1,13 @@
+---
+order: 5
+title:
+  zh-CN: 右侧时间轴点
+  en-US: Right alternate 
+---
+
+## zh-CN
+时间轴点可以在内容的右边。
+
+
+## en-US
+Right alternate timeline.
diff --git a/site/AntBlazor.Docs/Demos/Timeline/demo/Right.razor b/site/AntBlazor.Docs/Demos/Timeline/demo/Right.razor
new file mode 100644
index 000000000..00e9d2af3
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/demo/Right.razor
@@ -0,0 +1,17 @@
+<div>
+    <Timeline Mode="right">
+        <TimelineItem>Create a services site 2015-09-01</TimelineItem>
+        <TimelineItem>Solve initial network problems 2015-09-01</TimelineItem>
+        <TimelineItem Dot="dotTemplate" Color="red">
+            Technical testing 2015-09-01
+        </TimelineItem>
+        <TimelineItem Color="red">Network problems being solved 2015-09-01</TimelineItem>
+    </Timeline>,
+</div>
+
+@code{
+    RenderFragment dotTemplate =
+    @<Template>
+        <Icon Type="clock-circle" Theme="outline" Style="font-size: 16px;" />
+    </Template>;
+}
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Timeline/doc/index.en-US.md b/site/AntBlazor.Docs/Demos/Timeline/doc/index.en-US.md
new file mode 100644
index 000000000..115f2188d
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/doc/index.en-US.md
@@ -0,0 +1,34 @@
+---
+category: Components
+type: Data Display
+title: Timeline
+---
+
+Vertical display timeline.
+
+## When To Use
+
+- When a series of information needs to be ordered by time (ascending or descending).
+- When you need a timeline to make a visual connection.
+
+
+## API
+
+Timeline
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| Pending | Set the last ghost node's existence or its content | RenderFragment        | -         |
+| PendingDot   | Set the dot of the last ghost node when pending is true| RenderFragment  |-    |
+| Reverse | reverse nodes or not | boolean         |-       |
+| Mode |By sending `alternate` the timeline will distribute the nodes to the `left` and `right`.| string  | -  |
+
+Timeline.Item
+Node of timeline
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| Color | Set the circle's color blue, red, green, gray or other custom colors | string,         | -         |
+| Dot   | Customize timeline dot| string         |
+| Position | Customize node position `left`,`right`| string         |-       |
+| Label |Set the label | RenderFragment  | -  |
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Timeline/doc/index.zh-CN.md b/site/AntBlazor.Docs/Demos/Timeline/doc/index.zh-CN.md
new file mode 100644
index 000000000..e019c71ae
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Timeline/doc/index.zh-CN.md
@@ -0,0 +1,37 @@
+---
+category: Components
+type: 数据展示
+title: Timeline
+subtitle: 时间轴
+---
+
+垂直展示的时间流信息。
+
+## 何时使用
+
+- 当有一系列信息需按时间排列时，可正序和倒序。
+- 需要有一条时间轴进行视觉上的串联时。
+
+
+
+
+## API
+
+时间轴
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Pending | 指定最后一个幽灵节点是否存在或内容 | RenderFragment         | -         |
+| PendingDot   | 当最后一个幽灵节点存在時，指定其时间图点| RenderFragment         |
+| Reverse | 节点排序 | boolean         |-       |
+| Mode |通过设置 mode 可以改变时间轴和内容的相对位置，可选 `alternate` `left` `right` | string  | -  |
+
+Timeline.Item
+时间轴的每一个节点。
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Color | 指定圆圈颜色 blue, red, green, gray，或自定义的色值 | string,         | -         |
+| Dot   | 自定义时间轴点| string         |
+| Position | 自定义节点位置 `left`,`right`| string         |-       |
+| Label |设置标签 | RenderFragment  | -  |
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Basic.md b/site/AntBlazor.Docs/Demos/Typography/demo/Basic.md
new file mode 100644
index 000000000..62fc6615f
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Basic.md
@@ -0,0 +1,13 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+展示文档样例。
+
+
+## en-US
+Display the document sample.
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Basic.razor b/site/AntBlazor.Docs/Demos/Typography/demo/Basic.razor
new file mode 100644
index 000000000..e00641baa
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Basic.razor
@@ -0,0 +1,63 @@
+
+<div>
+   <Title Level="1">Introduction</Title>
+        <Paragraph>In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.</Paragraph>
+        <Paragraph>
+            After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to
+            <Text Strong>
+                uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.
+            </Text>
+        </Paragraph>
+        <Title Level="2">Guildelines and Resources</Title>
+        <Paragraph>
+            We supply a series of design principles, practical patterns and high quality design resources
+            (<Text Code>Sketch</Text> and <Text Code>Axure</Text>), to help people create their product
+            prototypes beautifully and efficiently.
+        </Paragraph>
+        <Paragraph>
+            <ul>
+                <li>
+                    <a href="/docs/spec/proximity">Principles</a>
+                </li>
+                <li>
+                    <a href="/docs/pattern/navigation">Patterns</a>
+                </li>
+                <li>
+                    <a href="/docs/resource/download">Resource Download</a>
+                </li>
+            </ul>
+        </Paragraph>
+
+        <Divider />
+
+        <Title>介绍</Title>
+        <Paragraph>
+            蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
+        </Paragraph>
+        <Paragraph>
+            随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系
+            Ant Design。基于<Text Mark>『确定』和『自然』</Text>
+            的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于
+            <Text Strong>更好的用户体验</Text>。
+        </Paragraph>
+        <Title Level="2">设计资源</Title>
+        <Paragraph>
+            我们提供完善的设计原则、最佳实践和设计资源文件（<Text Code>Sketch</Text> 和
+            <Text Code>Axure</Text>），来帮助业务快速设计出高质量的产品原型。
+        </Paragraph>
+
+        <Paragraph>
+            <ul>
+                <li>
+                    <a href="/docs/spec/proximity">设计原则</a>
+                </li>
+                <li>
+                    <a href="/docs/pattern/navigation">设计模式</a>
+                </li>
+                <li>
+                    <a href="/docs/resource/download">设计资源</a>
+                </li>
+            </ul>
+        </Paragraph>
+
+</div>
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Ellipsis.md b/site/AntBlazor.Docs/Demos/Typography/demo/Ellipsis.md
new file mode 100644
index 000000000..ceb56fe3a
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Ellipsis.md
@@ -0,0 +1,13 @@
+---
+order: 4
+title:
+  zh-CN: 省略号
+  en-US: Ellipsis
+---
+
+## zh-CN
+多行文本省略。
+
+
+## en-US
+Multiple line ellipsis support.
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Ellipsis.razor b/site/AntBlazor.Docs/Demos/Typography/demo/Ellipsis.razor
new file mode 100644
index 000000000..14016ab47
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Ellipsis.razor
@@ -0,0 +1,4 @@
+<div>
+To do
+</div>
+
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Interactive.md b/site/AntBlazor.Docs/Demos/Typography/demo/Interactive.md
new file mode 100644
index 000000000..fdb44b8a9
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Interactive.md
@@ -0,0 +1,13 @@
+---
+order: 3
+title:
+  zh-CN: 可交互
+  en-US: Interactive
+---
+
+## zh-CN
+提供可编辑和可复制等额外的交互能力。
+
+
+## en-US
+Provide additional interactive capacity of editable and copyable.
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Interactive.razor b/site/AntBlazor.Docs/Demos/Typography/demo/Interactive.razor
new file mode 100644
index 000000000..dcd3de122
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Interactive.razor
@@ -0,0 +1,23 @@
+<div>
+	<Paragraph Copyable>Simple copyable text</Paragraph>
+	<Paragraph Copyable CopyConfig="@selfDefinedText">Copy a self defiend text</Paragraph>
+	<Paragraph Copyable CopyConfig="@selfDefinedCopy">在控制台中查看此文本的log</Paragraph>
+	<Title Copyable>可复制的标题</Title>
+	<Paragraph >不可复制的段落中穿插着<Text Strong Copyable>可复制的文字</Text>以及其他</Paragraph>
+</div>
+
+
+@code 
+{
+    public TypographyCopyableConfig selfDefinedText;
+    public TypographyCopyableConfig selfDefinedCopy;
+
+    protected override void OnInitialized()
+    {
+        selfDefinedText = new TypographyCopyableConfig() { Text = "Just copied from self defined text" };
+        selfDefinedCopy = new TypographyCopyableConfig();
+        selfDefinedCopy.OnCopy += () => System.Console.WriteLine("Log in console as a self defined copy behavior");
+        base.OnInitialized();
+    }
+
+}
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Level.md b/site/AntBlazor.Docs/Demos/Typography/demo/Level.md
new file mode 100644
index 000000000..06ed41506
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Level.md
@@ -0,0 +1,13 @@
+---
+order: 1
+title:
+  zh-CN: 标题组件
+  en-US: Title Component
+---
+
+## zh-CN
+展示不同级别的标题。
+
+
+## en-US
+Display title in different level.
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Level.razor b/site/AntBlazor.Docs/Demos/Typography/demo/Level.razor
new file mode 100644
index 000000000..2cf84ea04
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Level.razor
@@ -0,0 +1,9 @@
+<div>
+	<Title Level="1">h1. Ant Design 标题一</Title>
+	<Title Level="2">h2. Ant Design 标题二</Title>
+	<Title Level="3">h3. Ant Design 标题三</Title>
+	<Title Level="4">h4. Ant Design 标题四</Title>
+
+</div>
+
+
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Style.md b/site/AntBlazor.Docs/Demos/Typography/demo/Style.md
new file mode 100644
index 000000000..c62d2d96b
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Style.md
@@ -0,0 +1,13 @@
+---
+order: 2
+title:
+  zh-CN: 文本组件
+  en-US: Text and Link Component
+---
+
+## zh-CN
+内置不同样式的文本。
+
+
+## en-US
+Provides multiple types of text and link.
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Style.razor b/site/AntBlazor.Docs/Demos/Typography/demo/Style.razor
new file mode 100644
index 000000000..68a29a4e6
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Style.razor
@@ -0,0 +1,22 @@
+<div>
+	<Text>Ant Design</Text>
+	<br />
+	<Text Type="secondary">Ant Design</Text>
+	<br />
+	<Text Type="warning">Ant Design</Text>
+	<br />
+	<Text Type="danger">Ant Design</Text>
+	<br />
+	<Text Disabled>Ant Design</Text>
+	<br />
+	<Text Mark>Ant Design</Text>
+	<br />
+	<Text Code>Ant Design</Text>
+	<br />
+	<Text Underline>Ant Design</Text>
+	<br />
+	<Text Delete>Ant Design</Text>
+	<br />
+	<Text Strong>Ant Design</Text>
+</div>
+
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Suffix.md b/site/AntBlazor.Docs/Demos/Typography/demo/Suffix.md
new file mode 100644
index 000000000..1924ea877
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Suffix.md
@@ -0,0 +1,13 @@
+---
+order: 5
+title:
+  zh-CN: 后缀
+  en-US: suffix
+---
+
+## zh-CN
+添加后缀的省略。
+
+
+## en-US
+add suffix ellipsis support.
diff --git a/site/AntBlazor.Docs/Demos/Typography/demo/Suffix.razor b/site/AntBlazor.Docs/Demos/Typography/demo/Suffix.razor
new file mode 100644
index 000000000..14016ab47
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/demo/Suffix.razor
@@ -0,0 +1,4 @@
+<div>
+To do
+</div>
+
diff --git a/site/AntBlazor.Docs/Demos/Typography/doc/index.en-US.md b/site/AntBlazor.Docs/Demos/Typography/doc/index.en-US.md
new file mode 100644
index 000000000..3bf34a6cd
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/doc/index.en-US.md
@@ -0,0 +1,67 @@
+---
+category: Components
+type: General
+title: Typography
+cols: 1
+---
+
+Basic text writing, including headings, body text, lists, and more.
+
+## When To Use
+
+- When need to display a title or paragraph contents in Articles/Blogs/Notes.
+- When you need copyable/editable/ellipsis texts.
+
+
+## API
+
+Typography.Text
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| Code | Code style | boolean         | false         |
+| Copyable | Config copy. Can set copy text and callback when is an object | boolean         | false         |
+| Delete | Deleted line style | boolean         | false         |
+| Disabled | Disabled content | boolean         | false         |
+| Editable | Editable. Can control edit state when is object | boolean         | false         |
+| Ellipsis | Display ellipsis when text overflows. Should set width when ellipsis needed | boolean         | false         |
+| Mark | Marked style | boolean         | false         |
+| Keyboard | Keyboard  style | boolean         | false         
+| Underline | Underlined  style | boolean         | false         |
+| OnChange | Trigger when user edits the content | boolean         | false         |
+| Strong | Bold style | boolean         | false         |
+| Type | Content type `secondary` `warning` `danger` | string         | -         |
+
+Typography.Title
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| Code | Code style | boolean         | false         |
+| Copyable | Config copy. Can set copy text and callback when is an object | boolean         | false         |
+| Delete | Deleted line style | boolean         | false         |
+| Disabled | Disabled content | boolean         | false         |
+| Editable | Editable. Can control edit state when is object | boolean         | false         |
+| Ellipsis | Display ellipsis when text overflows. Should set width when ellipsis needed | boolean         | false         |
+| Level | Set content importance. Match with `h1`, `h2`, `h3`, `h4` | int         | 1         |
+| Mark | Marked style | boolean         | false         |
+| Underline | Underlined  style | boolean         | false         |
+| OnChange | Trigger when user edits the content | boolean         | false         |
+| Type | Content type `secondary` `warning` `danger` | string         | -         |
+
+Typography.Paragraph
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| Code | Code style | boolean         | false         |
+| Copyable | Config copy. Can set copy text and callback when is an object | boolean         | false         |
+| Delete | Deleted line style | boolean         | false         |
+| Disabled | Disabled content | boolean         | false         |
+| Editable | Editable. Can control edit state when is object | boolean         | false         |
+| Ellipsis | Display ellipsis when text overflows. Should set width when ellipsis needed | boolean         | false         |
+| Mark | Marked style | boolean         | false         |
+| Underline | Underlined  style | boolean         | false         |
+| OnChange | Trigger when user edits the content | boolean         | false         |
+| Strong | Bold style | boolean         | false         |
+| Type | Content type `secondary` `warning` `danger` | string         | -         |
+
+
diff --git a/site/AntBlazor.Docs/Demos/Typography/doc/index.zh-CN.md b/site/AntBlazor.Docs/Demos/Typography/doc/index.zh-CN.md
new file mode 100644
index 000000000..4277a0771
--- /dev/null
+++ b/site/AntBlazor.Docs/Demos/Typography/doc/index.zh-CN.md
@@ -0,0 +1,64 @@
+---
+category: Components
+type: 通用
+title: Typography
+subtitle: 排版
+cols: 1
+---
+
+文本的基本格式。
+
+## 何时使用
+
+- 当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。
+- 当需要一列基于文本的基础操作时，如拷贝/省略/可编辑。
+
+
+## API
+
+Typography.Text
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Code | 添加代码样式 | boolean         | false         |
+| Copyable | 	是否可拷贝，为对象时可设置复制文本以回调函数 | boolean         | false         |
+| Delete | 	添加删除线样式 | boolean         | false         |
+| Disabled | 禁用文本 | boolean         | false         |
+| Editable | 是否可编辑，为对象时可对编辑进行控制 | boolean         | false         |
+| Ellipsis | 设置自动溢出省略，需要设置元素宽度| boolean         | false         |
+| Mark | 添加标记样式 | boolean         | false         |
+| Keyboard | 添加键盘样式 | boolean         | false         
+| Underline | 添加下划线样式 | boolean         | false         |
+| OnChange | 当用户提交编辑内容时触发 | boolean         | false         |
+| Strong | 是否加粗 | boolean         | false         |
+| Type | 文本类型 `secondary` `warning` `danger` | string         | -         |
+
+Typography.Title
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Copyable | 	是否可拷贝，为对象时可设置复制文本以回调函数 | boolean         | false         |
+| Delete | 	添加删除线样式 | boolean         | false         |
+| Disabled | 禁用文本 | boolean         | false         |
+| Editable | 是否可编辑，为对象时可对编辑进行控制 | boolean         | false         |
+| Ellipsis | 设置自动溢出省略，需要设置元素宽度| boolean         | false         |
+| Mark | 添加标记样式 | boolean         | false         |
+| Level | 重要程度，相当于 h1、h2、h3、h4 | int         | 1         
+| Underline | 添加下划线样式 | boolean         | false         |
+| OnChange | 当用户提交编辑内容时触发 | boolean         | false         |
+| Type | 文本类型 `secondary` `warning` `danger` | string         | -         |
+
+Typography.Paragraph
+
+| 参数             | 说明                                         | 类型          | 默认值    |
+| ---------------- | -------------------------------------------- | ------------- | --------- |
+| Copyable | 	是否可拷贝，为对象时可设置复制文本以回调函数 | boolean         | false         |
+| Delete | 	添加删除线样式 | boolean         | false         |
+| Disabled | 禁用文本 | boolean         | false         |
+| Editable | 是否可编辑，为对象时可对编辑进行控制 | boolean         | false         |
+| Ellipsis | 设置自动溢出省略，需要设置元素宽度| boolean         | false         |
+| Mark | 添加标记样式 | boolean         | false         |
+| Underline | 添加下划线样式 | boolean         | false         |
+| OnChange | 当用户提交编辑内容时触发 | boolean         | false         |
+| Strong | 是否加粗 | boolean         | false         |
+| Type | 文本类型 `secondary` `warning` `danger` | string         | -         |
diff --git a/site/AntBlazor.Docs/Pages/Affix.razor b/site/AntBlazor.Docs/Pages/Affix.razor
deleted file mode 100644
index a29566072..000000000
--- a/site/AntBlazor.Docs/Pages/Affix.razor
+++ /dev/null
@@ -1,82 +0,0 @@
-<AntTitle Level="1">Affix</AntTitle>
-<AntText>Wrap Affix around another component to make it stick the viewport.</AntText>
-<AntTitle Level="2">When To Use</AntTitle>
-<AntParagraph>
-    On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
-    Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
-</AntParagraph>
-<br />
-<h2>Examples</h2>
-<br />
-
-<Row Style="margin-left: -8px; margin-right: -8px;">
-    <style>
-        .Col {
-            padding-left: 8px;
-            padding-right: 8px;
-        }
-    </style>
-    <Col Span="12">
-        <DemoCard>
-            <Title>Basic</Title>
-            <Description>The simplest usage.</Description>
-            <Demo>
-                <div>
-                    <AntAffix OffsetTop="@_offsetTop">
-                        <Button Type="@ButtonType.Primary" OnClick="AddTop">
-                            Affix top
-                        </Button>
-                    </AntAffix>
-                    <br />
-                    <AntAffix OffsetBottom="@_offsetBottom">
-                        <Button Type="@ButtonType.Primary" OnClick="AddBottom">
-                            Affix bottom
-                        </Button>
-                    </AntAffix>
-                </div>
-            </Demo>
-        </DemoCard>
-        <DemoCard>
-            <Title>Container to scroll.</Title>
-            <Description>Set a <code>Target</code> for 'Affix', which listen to scroll event of target element (default is <code>window</code>).</Description>
-            <Demo>
-                <style>
-                    .scrollable-container{
-                        height: 100px;
-                        overflow-y: scroll;
-                    }
-                    .background {
-                        padding-top: 60px;
-                        height: 300px;
-                        background-image: url("https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg")
-                    }
-                </style>
-                <div class="scrollable-container" @ref="_container">
-                    <div class="background">
-                        <AntAffix Target="@_container">
-                            <Button Type="@ButtonType.Primary">
-                                Fixed at the top of container
-                            </Button>
-                        </AntAffix>
-                    </div>
-
-                </div>
-            </Demo>
-        </DemoCard>
-    </Col>
-    <Col Span="12">
-        <DemoCard>
-            <Title>Callback</Title>
-            <Description>Callback with affixed state.</Description>
-            <Demo>
-                <AntAffix OffsetTop="120" OnChange="OnAffixChange">
-                    <Button>
-                        120px to affix top
-                    </Button>
-                </AntAffix>
-            </Demo>
-        </DemoCard>
-    </Col>
-</Row>
-
-<section class="markdown api-container"><h2 id="API" data-scrollama-index="5"><span>API</span><a class="anchor" href="#API">#</a></h2><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>offsetBottom</td><td>Offset from the bottom of the viewport (in pixels)</td><td>number</td><td>-</td></tr><tr><td>offsetTop</td><td>Offset from the top of the viewport (in pixels)</td><td>number</td><td>0</td></tr><tr><td>target</td><td>Specifies the scrollable area DOM node</td><td>() =&gt; HTMLElement</td><td>() =&gt; window</td></tr><tr><td>onChange</td><td>Callback for when Affix state is changed</td><td>Function(affixed)</td><td>-</td></tr></tbody></table><p><strong>Note:</strong> Children of <code>Affix</code> must not have the property <code>position: absolute</code>, but you can set <code>position: absolute</code> on <code>Affix</code> itself:</p><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Affix</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> position<span class="token punctuation">:</span> <span class="token string">'absolute'</span><span class="token punctuation">,</span> top<span class="token punctuation">:</span> y<span class="token punctuation">,</span> left<span class="token punctuation">:</span> x <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token operator">...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Affix</span><span class="token punctuation">&gt;</span></span></code></pre><h2 id="FAQ" data-scrollama-index="6"><span>FAQ</span><a class="anchor" href="#FAQ">#</a></h2><h3 id="Affix-bind-container-with-target,-sometime-move-out-of-container."><span>Affix bind container with <code>target</code>, sometime move out of container.</span><a class="anchor" href="#Affix-bind-container-with-target,-sometime-move-out-of-container">#</a></h3><p>We don't listen window scroll for performance consideration. You can add listener if you still want: <a href="https://codesandbox.io/s/2xyj5zr85p">https://codesandbox.io/s/2xyj5zr85p</a></p><p>Related issues：<a href="https://github.com/ant-design/ant-design/issues/3938">#3938</a> <a href="https://github.com/ant-design/ant-design/issues/5642">#5642</a> <a href="https://github.com/ant-design/ant-design/issues/16120">#16120</a></p></section>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Pages/Affix.razor.cs b/site/AntBlazor.Docs/Pages/Affix.razor.cs
deleted file mode 100644
index c144a2a62..000000000
--- a/site/AntBlazor.Docs/Pages/Affix.razor.cs
+++ /dev/null
@@ -1,33 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Diagnostics;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Components;
-
-namespace AntDesign.Docs.Pages
-{
-    public partial class Affix
-    {
-        private uint _offsetTop = 10;
-        private uint _offsetBottom = 10;
-
-        private void AddTop()
-        {
-            _offsetTop += 10;
-        }
-
-        private void AddBottom()
-        {
-            _offsetBottom += 10;
-        }
-
-        private void OnAffixChange(bool affixed)
-        {
-            Debug.WriteLine(affixed);
-        }
-
-        private ElementReference _container;
-    }
-}
diff --git a/site/AntBlazor.Docs/Pages/BackTop.razor b/site/AntBlazor.Docs/Pages/BackTop.razor
deleted file mode 100644
index 98810bb3f..000000000
--- a/site/AntBlazor.Docs/Pages/BackTop.razor
+++ /dev/null
@@ -1,69 +0,0 @@
-<AntTitle Level="1">BackTop回到顶部</AntTitle>
-<AntText>返回页面顶部的操作按钮。</AntText>
-<AntTitle Level="2">何时使用</AntTitle>
-<AntParagraph>
-    <ul>
-        <li>当页面内容区域比较长时；</li>
-        <li>当用户需要频繁返回顶部查看相关内容时。</li>
-    </ul>
-</AntParagraph>
-
-<br />
-<h2>演示</h2>
-<br />
-<DemoCard>
-    <Title>基本</Title>
-    <Description>最简单的用法。</Description>
-    <Demo>
-        <AntBackTop Title="Scroll down to see the bottom-right gray button."></AntBackTop>
-    </Demo>
-</DemoCard>
-<br />
-
-<DemoCard>
-    <Title>自定义样式</Title>
-    <Description>可以自定义回到顶部按钮的样式，限制宽高：40px * 40px。</Description>
-    <Demo>
-        <AntBackTop Title="Scroll down to see the bottom-right gray button."></AntBackTop>
-    </Demo>
-</DemoCard>
-<br />
-
-<br />
-<h2>API</h2>
-<br />
-
-<table>
-    <thead>
-    <tr>
-        <th>参数</th>
-        <th>说明</th>
-        <th>类型</th>
-        <th>默认值</th>
-        <th>版本</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr>
-        <td>target</td>
-        <td>设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数</td>
-        <td>Function</td>
-        <td>() =&gt; window</td>
-        <td></td>
-     </tr>
-    <tr>
-        <td>visibilityHeight</td>
-        <td>滚动高度达到此参数值才出现 <code>BackTop</code></td>
-        <td>number</td>
-        <td>400</td>
-        <td></td>
-        </tr>
-    <tr>
-        <td>onClick</td>
-        <td>点击按钮的回调函数</td>
-        <td>Function</td>
-        <td>-</td>
-        <td></td>
-     </tr>
-    </tbody>
-</table>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Pages/BreadcrumbDemo.razor b/site/AntBlazor.Docs/Pages/BreadcrumbDemo.razor
index 52fb21ea2..ff4d6288a 100644
--- a/site/AntBlazor.Docs/Pages/BreadcrumbDemo.razor
+++ b/site/AntBlazor.Docs/Pages/BreadcrumbDemo.razor
@@ -20,10 +20,10 @@
 
 <Breadcrumb>
     <BreadcrumbItem>
-        <AntIcon Type="home"></AntIcon>
+        <Icon Type="home"></Icon>
     </BreadcrumbItem>
     <BreadcrumbItem>
-        <a><AntIcon Type="user"></AntIcon><span>Application List</span></a>
+        <a><Icon Type="user"></Icon><span>Application List</span></a>
     </BreadcrumbItem>
     <BreadcrumbItem>
         Application
diff --git a/site/AntBlazor.Docs/Pages/Card.razor b/site/AntBlazor.Docs/Pages/Card.razor
deleted file mode 100644
index fdd877a7e..000000000
--- a/site/AntBlazor.Docs/Pages/Card.razor
+++ /dev/null
@@ -1,42 +0,0 @@
-
-<h3>Actions Card</h3>
-<AntCard Bordered Actions="new[] { actionSetting, actionEdit, actionEllipsis }" Title=@("Card")>
-    <Extra>
-        <a>More</a>
-    </Extra>
-    <Body>
-        Body
-    </Body>
-</AntCard>
-
-<h3>Loading Card</h3>
-<AntCard Bordered Actions="new[] { actionSetting, actionEdit, actionEllipsis }"  Title=@("Card") Loading>
-    <Extra>
-        <a>More</a>
-    </Extra>
-    <Body>
-        Loading Card
-    </Body>
-</AntCard>
-
-<h3>Meta Card</h3>
-<AntCard Style="width:300px;" Bordered Cover="coverTemplate" Actions="new[] { actionSetting, actionEdit, actionEllipsis }">
-    <AntCardMeta Avatar="avatarTemplate">
-        <Title>Meta Card</Title>
-        <Description>This is the description</Description>
-    </AntCardMeta>
-</AntCard>
-
-@code
-{
-    private RenderFragment actionSetting =@<Template><AntIcon Type="setting" /></Template>;
-
-    private RenderFragment actionEdit =@<Template><AntIcon Type="edit" /></Template>;
-
-    private RenderFragment actionEllipsis =@<Template><AntIcon Type="ellipsis" /></Template>;
-
-    private RenderFragment avatarTemplate = @<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></Avatar>;
-
-    private RenderFragment coverTemplate = @<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />;
-
-}
diff --git a/site/AntBlazor.Docs/Pages/Divider.razor b/site/AntBlazor.Docs/Pages/Divider.razor
deleted file mode 100644
index e3d75e464..000000000
--- a/site/AntBlazor.Docs/Pages/Divider.razor
+++ /dev/null
@@ -1,27 +0,0 @@
-
-<h3>Divider</h3>
-
-<h3>Horizontal</h3>
-<div>
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
-        tamen, quo modo.
-    </p>
-    <AntDivider ></AntDivider>
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
-        tamen, quo modo.
-    </p>
-    <AntDivider Text="With Text"></AntDivider>
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
-        tamen, quo modo.
-    </p>
-    <AntDivider Dashed>
-        <AntIcon Type="plus" ></AntIcon> Add
-    </AntDivider>
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert
-        tamen, quo modo.
-    </p>
-</div>
diff --git a/site/AntBlazor.Docs/Pages/Grid.razor b/site/AntBlazor.Docs/Pages/Grid.razor
deleted file mode 100644
index 9ecb0312c..000000000
--- a/site/AntBlazor.Docs/Pages/Grid.razor
+++ /dev/null
@@ -1,300 +0,0 @@
-<h3>Grid 栅格</h3>
-
-
-
-<DemoCard id="grid-demo-basic">
-    <Title>基础栅格</Title>
-    <Description>
-        @(@"
-从堆叠到水平排列。
-使用单一的一组 `nz-row` 和 `nz-col` 栅格组件，就可以创建一个基本的栅格系统，所有列（`nz-col`）必须放在 `nz-row` 内。
-")
-    </Description>
-    <Demo>
-        <Row>
-            <Col Span="12">col-12</Col>
-            <Col Span="12">col-12</Col>
-        </Row>
-        <Row>
-            <Col Span="8">col-8</Col>
-            <Col Span="8">col-8</Col>
-            <Col Span="8">col-8</Col>
-        </Row>
-        <Row>
-            <Col Span="6">col-6</Col>
-            <Col Span="6">col-6</Col>
-            <Col Span="6">col-6</Col>
-            <Col Span="6">col-6</Col>
-        </Row>
-    </Demo>
-</DemoCard>
-
-
-
-<DemoCard id="grid-demo-Gutter">
-    <Title>区块间隔</Title>
-    <Description>
-        @(@"
-栅格常常需要和间隔进行配合，你可以使用 `` 的 `nzGutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。(n 是自然数)
-
-如果要支持响应式，可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }`。
-")
-    </Description>
-    <Demo>
-        <div class="Gutter-example">
-            <Row Gutter="16">
-                <Col class="Gutter-row" Span="6">
-                    <div class="Gutter-box">col-6</div>
-                </Col>
-                <Col class="Gutter-row" Span="6">
-                    <div class="Gutter-box">col-6</div>
-                </Col>
-                <Col class="Gutter-row" Span="6">
-                    <div class="Gutter-box">col-6</div>
-                </Col>
-                <Col class="Gutter-row" Span="6">
-                    <div class="Gutter-box">col-6</div>
-                </Col>
-            </Row>
-        </div>
-        <div class="Gutter-example">
-            <Row Gutter="Gutter">
-                <Col class="Gutter-row" Span="6">
-                    <div class="Gutter-box">col-6</div>
-                </Col>
-                <Col class="Gutter-row" Span="6">
-                    <div class="Gutter-box">col-6</div>
-                </Col>
-                <Col class="Gutter-row" Span="6">
-                    <div class="Gutter-box">col-6</div>
-                </Col>
-                <Col class="Gutter-row" Span="6">
-                    <div class="Gutter-box">col-6</div>
-                </Col>
-            </Row>
-        </div>
-    </Demo>
-    <Styles>
-        <style>
-            .Gutter-box {
-                background: #00a0e9;
-                padding: 5px 0;
-            }
-        </style>
-    </Styles>
-</DemoCard>
-
-@code
-{
-    Dictionary<string, int> Gutter = new Dictionary<string, int>()
-    {
-        ["xs"] = 8,
-        ["sm"] = 16,
-        ["md"] = 24,
-        ["lg"] = 32,
-        ["xl"] = 32,
-        ["xxl"] = 32
-    };
-}
-
-<DemoCard id="grid-demo-offset">
-    <Title>左右偏移</Title>
-    <Description>
-        @(@"
-列偏移。
-
-使用 `nzOffset` 可以将列向右侧偏。例如，`nzOffset=""4""` 将元素向右侧偏移了 4 个列（column）的宽度。
-")
-    </Description>
-    <Demo>
-        <Row>
-            <Col Span="8">
-                col-8
-            </Col>
-            <Col Span="8" Offset="8">
-                col-8
-            </Col>
-        </Row>
-        <Row>
-            <Col Span="6" Offset="6">
-                col-6 col-offset-6
-            </Col>
-            <Col Span="6" Offset="6">
-                col-6 col-offset-6
-            </Col>
-        </Row>
-        <Row>
-            <Col Span="12" Offset="6">
-                col-12 col-offset-6
-            </Col>
-        </Row>
-    </Demo>
-</DemoCard>
-
-<DemoCard id="grid-demo-sort">
-    <Title>栅格排序</Title>
-    <Description>
-        @(@"
-列排序。
-
-通过使用 `nzPush` 和 `nzPull` 类就可以很容易的改变列（column）的顺序。
-")
-    </Description>
-    <Demo>
-        <Row>
-            <Col Span="18" Push="6">
-                col-18 col-Push-6
-            </Col>
-            <Col Span="6" Pull="18">
-                col-6 col-Pull-18
-            </Col>
-        </Row>
-    </Demo>
-</DemoCard>
-
-<DemoCard id="grid-demo-flex">
-    <Title>Flex 布局</Title>
-    <Description>
-        @(@"
-布局基础。
-
-子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
-")
-    </Description>
-    <Demo>
-        <div id="flex-demo">
-            <p>sub-element Align left</p>
-            <Row Justify="start">
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-            </Row>
-            <p>sub-element Align center</p>
-            <Row Justify="center">
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-            </Row>
-            <p>sub-element Align right</p>
-            <Row Justify="end">
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-            </Row>
-            <p>sub-element monospaced arrangement</p>
-            <Row Justify="space-between">
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-            </Row>
-            <p>sub-element Align full</p>
-            <Row Justify="space-around">
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-                <Col Span="4">col-4</Col>
-            </Row>
-        </div>
-    </Demo>
-    <Styles>
-        <style>
-            #flex-demo .ant-row {
-                background-color: rgba(128, 128, 128, 0.08);
-            }
-        </style>
-    </Styles>
-</DemoCard>
-
-<DemoCard id="grid-demo-flex-Align">
-    <Title>Flex 对齐</Title>
-    <Description>
-        @(@"
-子元素垂直对齐。
-")
-    </Description>
-    <Demo>
-        <div>
-            <p>Align Top</p>
-            <Row Justify="center" Align="top">
-                <Col Span="4"><p class="height-100">col-4</p></Col>
-                <Col Span="4"><p class="height-50">col-4</p></Col>
-                <Col Span="4"><p class="height-120">col-4</p></Col>
-                <Col Span="4"><p class="height-80">col-4</p></Col>
-            </Row>
-            <p>Align Center</p>
-            <Row Justify="space-around" Align="middle">
-                <Col Span="4"><p class="height-100">col-4</p></Col>
-                <Col Span="4"><p class="height-50">col-4</p></Col>
-                <Col Span="4"><p class="height-120">col-4</p></Col>
-                <Col Span="4"><p class="height-80">col-4</p></Col>
-            </Row>
-            <p>Align Bottom</p>
-            <Row Justify="space-between" Align="bottom">
-                <Col Span="4"><p class="height-100">col-4</p></Col>
-                <Col Span="4"><p class="height-50">col-4</p></Col>
-                <Col Span="4"><p class="height-120">col-4</p></Col>
-                <Col Span="4"><p class="height-80">col-4</p></Col>
-            </Row>
-        </div>
-    </Demo>
-</DemoCard>
-
-<DemoCard id="grid-demo-flex-Order">
-    <Title>Flex排序</Title>
-    <Description>
-        @(@"
-通过 `Order` 来改变元素的排序。
-")
-    </Description>
-    <Demo>
-        <div id="grid-demo-flex-Order">
-            <Row>
-                <Col Span="6" Order="4">
-                    1 col-Order-4
-                </Col>
-                <Col Span="6" Order="3">
-                    2 col-Order-3
-                </Col>
-                <Col Span="6" Order="2">
-                    3 col-Order-2
-                </Col>
-                <Col Span="6" Order="1">
-                    4 col-Order-1
-                </Col>
-            </Row>
-        </div>
-    </Demo>
-    <Styles>
-        <style>
-            #grid-demo-flex-Order .ant-row {
-                background-color: rgba(128, 128, 128, 0.08);
-            }
-        </style>
-    </Styles>
-</DemoCard>
-
-<DemoCard id="grid-demo-responsive">
-    <Title>响应式布局</Title>
-    <Description>
-        @(@"
-参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设五个响应尺寸：`xs` `sm` `md` `lg` `xl`  `xxl`。
-")
-    </Description>
-    <Demo>
-        <Row>
-            <Col Xs="2" Sm="4" Md="6" Lg="8" Xl="10">
-                Col
-            </Col>
-            <Col Xs="20" Sm="16" Md="12" Lg="8" Xl="4">
-                Col
-            </Col>
-            <Col Xs="2" Sm="4" Md="6" Lg="8" Xl="10">
-                Col
-            </Col>
-        </Row>
-    </Demo>
-</DemoCard>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Pages/Icon.razor b/site/AntBlazor.Docs/Pages/Icon.razor
deleted file mode 100644
index 7700c0d53..000000000
--- a/site/AntBlazor.Docs/Pages/Icon.razor
+++ /dev/null
@@ -1,23 +0,0 @@
-
-<DemoCard>
-    <Title>基本使用</Title>
-    <Description>
-        <AntParagraph>使用 <AntText Code>@(@"<AntIcon></AntIcon>")</AntText> 标签声明组件，指定图标对应的 <AntText Code>Type</AntText> 属性。可以通过 <AntText Code>Theme</AntText> 属性来设置不同的主题风格的图标，也可以通过设置 <AntText Code>spin</AntText> 属性来实现动画旋转效果。</AntParagraph>
-    </Description>
-    <Demo>
-        <div class="icons-list">
-            <AntIcon Type="home"></AntIcon>
-            <AntIcon Type="setting" Theme="fill"></AntIcon>
-            <AntIcon Type="smile" Theme="outline"></AntIcon>
-            <AntIcon Type="sync" Theme="true"></AntIcon>
-            <AntIcon Type="smile" Theme="outline" Rotate="180"></AntIcon>
-            <!-- Loading with new API would spin automatically! -->
-            <AntIcon Type="loading"></AntIcon>
-        </div>
-    </Demo>
-</DemoCard>
-
-
-@code {
-
-}
diff --git a/site/AntBlazor.Docs/Pages/Icondemo.razor b/site/AntBlazor.Docs/Pages/Icondemo.razor
new file mode 100644
index 000000000..196e276ca
--- /dev/null
+++ b/site/AntBlazor.Docs/Pages/Icondemo.razor
@@ -0,0 +1,23 @@
+
+<DemoCard>
+    <Title>基本使用</Title>
+    <Description>
+        <Paragraph>使用 <Text Code>@(@"<Icon></Icon>")</Text> 标签声明组件，指定图标对应的 <Text Code>Type</Text> 属性。可以通过 <Text Code>Theme</Text> 属性来设置不同的主题风格的图标，也可以通过设置 <Text Code>spin</Text> 属性来实现动画旋转效果。</Paragraph>
+    </Description>
+    <Demo>
+        <div class="icons-list">
+            <Icon Type="home"></Icon>
+            <Icon Type="setting" Theme="fill"></Icon>
+            <Icon Type="smile" Theme="outline"></Icon>
+            <Icon Type="sync" Theme="true"></Icon>
+            <Icon Type="smile" Theme="outline" Rotate="180"></Icon>
+            <!-- Loading with new API would spin automatically! -->
+            <Icon Type="loading"></Icon>
+        </div>
+    </Demo>
+</DemoCard>
+
+
+@code {
+
+}
diff --git a/site/AntBlazor.Docs/Pages/Step.razor b/site/AntBlazor.Docs/Pages/Step.razor
deleted file mode 100644
index af351e214..000000000
--- a/site/AntBlazor.Docs/Pages/Step.razor
+++ /dev/null
@@ -1,126 +0,0 @@
-<h3>Step</h3>
-
-<DemoCard>
-    <Title>基本用法</Title>
-    <Description>简单的步骤条。</Description>
-    <Demo>
-        <AntSteps Current="1">
-            <AntStep Title="Finished" Description="This is a description." />
-            <AntStep Title="In Progress" Subtitle="Left 00:00:08" Description="This is a description." />
-            <AntStep Title="Waiting" Description="This is a description." />
-            <AntStep Title="Waiting" Description="This is a description." />
-        </AntSteps>
-    </Demo>
-</DemoCard>
-<br />
-<DemoCard>
-    <Title>迷你版</Title>
-    <Description>
-        <AntText>迷你版的步骤条，通过设置<AntText Code>@((MarkupString)"Steps size=\"small\"")</AntText>启用</AntText>
-    </Description>
-    <Demo>
-        <AntSteps Size="small" Current=1>
-            <AntStep Title="Finished" />
-            <AntStep Title="In Progress" />
-            <AntStep Title="Waiting" />
-        </AntSteps>
-    </Demo>
-</DemoCard>
-<br />
-<DemoCard>
-    <Title>带图标的步骤条</Title>
-    <Description>
-        <AntText>通过设置 <AntText Code>Steps.Step</AntText> 的 <AntText Code>icon</AntText> 属性，可以启用自定义图标。</AntText>
-    </Description>
-    <Demo>
-        <AntSteps>
-            <AntStep Title="Login" Icon="user" Status="finish" />
-            <AntStep Title="In Progress" Icon="solution" Status="finish" />
-            <AntStep Title="Waiting" Icon="loading" Status="process" />
-            <AntStep Title="Waiting" Icon="smile" Status="wait" />
-        </AntSteps>
-    </Demo>
-</DemoCard>
-<br />
-<DemoCard>
-    <Title>竖直方向的步骤条</Title>
-    <Description>简单的竖直方向的步骤条。</Description>
-    <Demo>
-        <AntSteps Direction="vertical" Current="1">
-            <AntStep Title="Finished" Description="This is a description." />
-            <AntStep Title="In Progress" Description="This is a description." />
-            <AntStep Title="Waiting" Description="This is a description." />
-        </AntSteps>
-    </Demo>
-</DemoCard>
-<br />
-<DemoCard>
-    <Title>竖直方向的小型步骤条</Title>
-    <Description>简单的竖直方向的小型步骤条。</Description>
-    <Demo>
-        <AntSteps Direction="vertical" Size="small" Current="1">
-            <AntStep Title="Finished" Description="This is a description." />
-            <AntStep Title="In Progress" Description="This is a description." />
-            <AntStep Title="Waiting" Description="This is a description." />
-        </AntSteps>
-    </Demo>
-</DemoCard>
-<br />
-<DemoCard>
-    <Title>步骤运行错误</Title>
-    <Description>使用Steps的<AntText code>Status</AntText>属性来指定当前步骤的状态</Description>
-    <Demo>
-        <AntSteps Current="1" Status="error">
-            <AntStep Title="Finished" Description="This is a description." />
-            <AntStep Title="In Progress" Description="This is a description." />
-            <AntStep Title="Waiting" Description="This is a description." />
-        </AntSteps>
-    </Demo>
-</DemoCard>
-<br />
-<DemoCard>
-    <Title>点状步骤条</Title>
-    <Description>包含步骤点的进度条。</Description>
-    <Demo>
-        <AntSteps ShowProgressDot Current="1">
-            <AntStep Title="Finished" Description="This is a description." />
-            <AntStep Title="In Progress" Description="This is a description." />
-            <AntStep Title="Waiting" Description="This is a description." />
-        </AntSteps>
-        <AntDivider />
-        <AntSteps ShowProgressDot Current="1" Direction="vertical">
-            <AntStep Title="Finished" Description="This is a description. This is a description." />
-            <AntStep Title="Finished" Description="This is a description. This is a description." />
-            <AntStep Title="In Progress" Description="This is a description. This is a description." />
-            <AntStep Title="Waiting" Description="This is a description." />
-            <AntStep Title="Waiting" Description="This is a description." />
-        </AntSteps>
-    </Demo>
-</DemoCard>
-<br />
-<DemoCard>
-    <Title>导航步骤</Title>
-    <Description>导航类型的步骤条。</Description>
-    <Demo>
-        <AntSteps Type="navigation" Size="small" Current=@Current ClassName="site-navigation-steps" >
-            <AntStep Title="Step 1" Subtitle="00:00:05" Status="finish" Description="This is a description." />
-            <AntStep Title="Step 2" Subtitle="00:01:02" Status="process" Description="This is a description." />
-            <AntStep Title="Step 3" Subtitle="waiting for longlong time" Status="wait" Description="This is a description." />
-        </AntSteps>
-        <AntSteps Type="navigation" Current="@Current"  ClassName="site-navigation-steps" >
-            <AntStep Status="finish" Title="Step 1" />
-            <AntStep Status="process" Title="Step 2" />
-            <AntStep Status="wait" Title="Step 3" />
-            <AntStep Status="wait" Title="Step 4" />
-        </AntSteps>
-        <AntSteps Type="navigation" Size="small" Current="@Current" ClassName="site-navigation-steps">
-            <AntStep Status="finish" Title="finish 1" />
-            <AntStep Status="finish" Title="finish 2" />
-            <AntStep Status="process" Title="current process" />
-            <AntStep Status="wait" Title="wait" Disabled />
-        </AntSteps>
-    </Demo>
-</DemoCard>
-@code {
-    public int Current { get; set; } = 0;
-}
diff --git a/site/AntBlazor.Docs/Pages/Stepdemo.razor b/site/AntBlazor.Docs/Pages/Stepdemo.razor
new file mode 100644
index 000000000..37ed38a02
--- /dev/null
+++ b/site/AntBlazor.Docs/Pages/Stepdemo.razor
@@ -0,0 +1,126 @@
+<h3>Step</h3>
+
+<DemoCard>
+    <Title>基本用法</Title>
+    <Description>简单的步骤条。</Description>
+    <Demo>
+        <Steps Current="1">
+            <Step Title="Finished" Description="This is a description." />
+            <Step Title="In Progress" Subtitle="Left 00:00:08" Description="This is a description." />
+            <Step Title="Waiting" Description="This is a description." />
+            <Step Title="Waiting" Description="This is a description." />
+        </Steps>
+    </Demo>
+</DemoCard>
+<br />
+<DemoCard>
+    <Title>迷你版</Title>
+    <Description>
+        <Text>迷你版的步骤条，通过设置<Text Code>@((MarkupString)"Steps size=\"small\"")</Text>启用</Text>
+    </Description>
+    <Demo>
+        <Steps Size="small" Current=1>
+            <Step Title="Finished" />
+            <Step Title="In Progress" />
+            <Step Title="Waiting" />
+        </Steps>
+    </Demo>
+</DemoCard>
+<br />
+<DemoCard>
+    <Title>带图标的步骤条</Title>
+    <Description>
+        <Text>通过设置 <Text Code>Steps.Step</Text> 的 <Text Code>icon</Text> 属性，可以启用自定义图标。</Text>
+    </Description>
+    <Demo>
+        <Steps>
+            <Step Title="Login" Icon="user" Status="finish" />
+            <Step Title="In Progress" Icon="solution" Status="finish" />
+            <Step Title="Waiting" Icon="loading" Status="process" />
+            <Step Title="Waiting" Icon="smile" Status="wait" />
+        </Steps>
+    </Demo>
+</DemoCard>
+<br />
+<DemoCard>
+    <Title>竖直方向的步骤条</Title>
+    <Description>简单的竖直方向的步骤条。</Description>
+    <Demo>
+        <Steps Direction="vertical" Current="1">
+            <Step Title="Finished" Description="This is a description." />
+            <Step Title="In Progress" Description="This is a description." />
+            <Step Title="Waiting" Description="This is a description." />
+        </Steps>
+    </Demo>
+</DemoCard>
+<br />
+<DemoCard>
+    <Title>竖直方向的小型步骤条</Title>
+    <Description>简单的竖直方向的小型步骤条。</Description>
+    <Demo>
+        <Steps Direction="vertical" Size="small" Current="1">
+            <Step Title="Finished" Description="This is a description." />
+            <Step Title="In Progress" Description="This is a description." />
+            <Step Title="Waiting" Description="This is a description." />
+        </Steps>
+    </Demo>
+</DemoCard>
+<br />
+<DemoCard>
+    <Title>步骤运行错误</Title>
+    <Description>使用Steps的<Text code>Status</Text>属性来指定当前步骤的状态</Description>
+    <Demo>
+        <Steps Current="1" Status="error">
+            <Step Title="Finished" Description="This is a description." />
+            <Step Title="In Progress" Description="This is a description." />
+            <Step Title="Waiting" Description="This is a description." />
+        </Steps>
+    </Demo>
+</DemoCard>
+<br />
+<DemoCard>
+    <Title>点状步骤条</Title>
+    <Description>包含步骤点的进度条。</Description>
+    <Demo>
+        <Steps ShowProgressDot Current="1">
+            <Step Title="Finished" Description="This is a description." />
+            <Step Title="In Progress" Description="This is a description." />
+            <Step Title="Waiting" Description="This is a description." />
+        </Steps>
+        <Divider />
+        <Steps ShowProgressDot Current="1" Direction="vertical">
+            <Step Title="Finished" Description="This is a description. This is a description." />
+            <Step Title="Finished" Description="This is a description. This is a description." />
+            <Step Title="In Progress" Description="This is a description. This is a description." />
+            <Step Title="Waiting" Description="This is a description." />
+            <Step Title="Waiting" Description="This is a description." />
+        </Steps>
+    </Demo>
+</DemoCard>
+<br />
+<DemoCard>
+    <Title>导航步骤</Title>
+    <Description>导航类型的步骤条。</Description>
+    <Demo>
+        <Steps Type="navigation" Size="small" Current=@Current ClassName="site-navigation-steps" >
+            <Step Title="Step 1" Subtitle="00:00:05" Status="finish" Description="This is a description." />
+            <Step Title="Step 2" Subtitle="00:01:02" Status="process" Description="This is a description." />
+            <Step Title="Step 3" Subtitle="waiting for longlong time" Status="wait" Description="This is a description." />
+        </Steps>
+        <Steps Type="navigation" Current="@Current"  ClassName="site-navigation-steps" >
+            <Step Status="finish" Title="Step 1" />
+            <Step Status="process" Title="Step 2" />
+            <Step Status="wait" Title="Step 3" />
+            <Step Status="wait" Title="Step 4" />
+        </Steps>
+        <Steps Type="navigation" Size="small" Current="@Current" ClassName="site-navigation-steps">
+            <Step Status="finish" Title="finish 1" />
+            <Step Status="finish" Title="finish 2" />
+            <Step Status="process" Title="current process" />
+            <Step Status="wait" Title="wait" Disabled />
+        </Steps>
+    </Demo>
+</DemoCard>
+@code {
+    public int Current { get; set; } = 0;
+}
diff --git a/site/AntBlazor.Docs/Pages/Tabs.razor b/site/AntBlazor.Docs/Pages/Tabsdemo.razor
similarity index 65%
rename from site/AntBlazor.Docs/Pages/Tabs.razor
rename to site/AntBlazor.Docs/Pages/Tabsdemo.razor
index f9cdce207..f74aca38a 100644
--- a/site/AntBlazor.Docs/Pages/Tabs.razor
+++ b/site/AntBlazor.Docs/Pages/Tabsdemo.razor
@@ -1,9 +1,9 @@
-<AntTitle Level="1">Tabs</AntTitle>
-<AntText>Tabs make it easy to switch between different views.</AntText>
-<AntTitle Level="2">When To Use</AntTitle>
-<AntParagraph>
+<Title Level="1">Tabs</Title>
+<Text>Tabs make it easy to switch between different views.</Text>
+<Title Level="2">When To Use</Title>
+<Paragraph>
     <Markdown MarkdownText="@paragraph"></Markdown>
-</AntParagraph>
+</Paragraph>
 
 @code{
     private string paragraph = @"Ant Design has 3 types of Tabs for different situations.
@@ -18,20 +18,20 @@
     <Title>Basic</Title>
     <Description>Default activate first tab.</Description>
     <Demo>
-        <AntTabs DefaultActiveKey="1">
-            <AntTabPane Key="1">
+        <Tabs DefaultActiveKey="1">
+            <TabPane Key="1">
                 <Tab>Tab 1</Tab>
                 <ChildContent>Content of Tab Pane 1</ChildContent>
-            </AntTabPane>
-            <AntTabPane Key="2">
+            </TabPane>
+            <TabPane Key="2">
                 <Tab>Tab 2</Tab>
                 <ChildContent>Content of Tab Pane 2</ChildContent>
-            </AntTabPane>
-            <AntTabPane Key="3">
+            </TabPane>
+            <TabPane Key="3">
                 <Tab>Tab 3</Tab>
                 <ChildContent>Content of Tab Pane 3</ChildContent>
-            </AntTabPane>
-        </AntTabs>
+            </TabPane>
+        </Tabs>
     </Demo>
 </DemoCard>
 
@@ -39,20 +39,20 @@
     <Title>Disabled</Title>
     <Description>Disabled a tab.</Description>
     <Demo>
-        <AntTabs DefaultActiveKey="1">
-            <AntTabPane Key="1">
+        <Tabs DefaultActiveKey="1">
+            <TabPane Key="1">
                 <Tab>Tab 1</Tab>
                 <ChildContent>Tab 1</ChildContent>
-            </AntTabPane>
-            <AntTabPane Key="2" Disabled>
+            </TabPane>
+            <TabPane Key="2" Disabled>
                 <Tab>Tab 2</Tab>
                 <ChildContent>Tab 2</ChildContent>
-            </AntTabPane>
-            <AntTabPane Key="3">
+            </TabPane>
+            <TabPane Key="3">
                 <Tab>Tab 3</Tab>
                 <ChildContent>Tab 3</ChildContent>
-            </AntTabPane>
-        </AntTabs>
+            </TabPane>
+        </Tabs>
     </Demo>
 </DemoCard>
 
@@ -60,20 +60,20 @@
     <Title>Icon</Title>
     <Description>The Tab with Icon.</Description>
     <Demo>
-        <AntTabs DefaultActiveKey="1">
-            <AntTabPane Key="1">
+        <Tabs DefaultActiveKey="1">
+            <TabPane Key="1">
                 <Tab>
-                    <span><AntIcon Type="android" />Tab 1</span>
+                    <span><Icon Type="android" />Tab 1</span>
                 </Tab>
                 <ChildContent>Tab 1</ChildContent>
-            </AntTabPane>
-            <AntTabPane Key="2">
+            </TabPane>
+            <TabPane Key="2">
                 <Tab>
-                    <span><AntIcon Type="apple" />Tab 2</span>
+                    <span><Icon Type="apple" />Tab 2</span>
                 </Tab>
                 <ChildContent>Tab 2</ChildContent>
-            </AntTabPane>
-        </AntTabs>
+            </TabPane>
+        </Tabs>
     </Demo>
 </DemoCard>
 
@@ -83,124 +83,124 @@
     <Demo>
         <div>
             <RadioGroup @bind-Value="mode" Style="margin-bottom: 8px;">
-                <Radio RadioButton Value="@AntTabPosition.Top">Horizontal</Radio>
-                <Radio RadioButton Value="@AntTabPosition.Left">Vertical</Radio>
+                <Radio RadioButton Value="@TabPosition.Top">Horizontal</Radio>
+                <Radio RadioButton Value="@TabPosition.Left">Vertical</Radio>
             </RadioGroup>
-            <AntTabs DefaultActiveKey="1" TabPosition="@mode" Style="height: 220px;">
-                <AntTabPane Key="1">
+            <Tabs DefaultActiveKey="1" TabPosition="@mode" Style="height: 220px;">
+                <TabPane Key="1">
                     <Tab>Tab 1</Tab>
                     <ChildContent>Content of Tab Pane 1</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="2">
+                </TabPane>
+                <TabPane Key="2">
                     <Tab>Tab 2</Tab>
                     <ChildContent>Content of Tab Pane 2</ChildContent>
-                </AntTabPane><AntTabPane Key="3">
+                </TabPane><TabPane Key="3">
                     <Tab>Tab 3</Tab>
                     <ChildContent>Content of Tab Pane 3</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="4">
+                </TabPane>
+                <TabPane Key="4">
                     <Tab>Tab 4</Tab>
                     <ChildContent>Content of Tab Pane 4</ChildContent>
-                </AntTabPane><AntTabPane Key="5">
+                </TabPane><TabPane Key="5">
                     <Tab>Tab 5</Tab>
                     <ChildContent>Content of Tab Pane 5</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="6">
+                </TabPane>
+                <TabPane Key="6">
                     <Tab>Tab 6</Tab>
                     <ChildContent>Content of Tab Pane 6</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="7">
+                </TabPane>
+                <TabPane Key="7">
                     <Tab>Tab 7</Tab>
                     <ChildContent>Content of Tab Pane 7</ChildContent>
-                </AntTabPane><AntTabPane Key="8">
+                </TabPane><TabPane Key="8">
                     <Tab>Tab 8</Tab>
                     <ChildContent>Content of Tab Pane 8</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="9">
+                </TabPane>
+                <TabPane Key="9">
                     <Tab>Tab 9</Tab>
                     <ChildContent>Content of Tab Pane 9</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="10">
+                </TabPane>
+                <TabPane Key="10">
                     <Tab>Tab 10</Tab>
                     <ChildContent>Content of Tab Pane 10</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="11">
+                </TabPane>
+                <TabPane Key="11">
                     <Tab>Tab 11</Tab>
                     <ChildContent>Content of Tab Pane 11</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="12">
+                </TabPane>
+                <TabPane Key="12">
                     <Tab>Tab 12</Tab>
                     <ChildContent>Content of Tab Pane 12</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="13">
+                </TabPane>
+                <TabPane Key="13">
                     <Tab>Tab 13</Tab>
                     <ChildContent>Content of Tab Pane 13</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="14">
+                </TabPane>
+                <TabPane Key="14">
                     <Tab>Tab 14</Tab>
                     <ChildContent>Content of Tab Pane 14</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="15">
+                </TabPane>
+                <TabPane Key="15">
                     <Tab>Tab 15</Tab>
                     <ChildContent>Content of Tab Pane 15</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="16">
+                </TabPane>
+                <TabPane Key="16">
                     <Tab>Tab 16</Tab>
                     <ChildContent>Content of Tab Pane 16</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="17">
+                </TabPane>
+                <TabPane Key="17">
                     <Tab>Tab 17</Tab>
                     <ChildContent>Content of Tab Pane 17</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="18">
+                </TabPane>
+                <TabPane Key="18">
                     <Tab>Tab 18</Tab>
                     <ChildContent>Content of Tab Pane 18</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="19">
+                </TabPane>
+                <TabPane Key="19">
                     <Tab>Tab 19</Tab>
                     <ChildContent>Content of Tab Pane 19</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="20">
+                </TabPane>
+                <TabPane Key="20">
                     <Tab>Tab 20</Tab>
                     <ChildContent>Content of Tab Pane 20</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="21">
+                </TabPane>
+                <TabPane Key="21">
                     <Tab>Tab 21</Tab>
                     <ChildContent>Content of Tab Pane 21</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="22">
+                </TabPane>
+                <TabPane Key="22">
                     <Tab>Tab 22</Tab>
                     <ChildContent>Content of Tab Pane 22</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="23">
+                </TabPane>
+                <TabPane Key="23">
                     <Tab>Tab 23</Tab>
                     <ChildContent>Content of Tab Pane 23</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="24">
+                </TabPane>
+                <TabPane Key="24">
                     <Tab>Tab 24</Tab>
                     <ChildContent>Content of Tab Pane 24</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="25">
+                </TabPane>
+                <TabPane Key="25">
                     <Tab>Tab 25</Tab>
                     <ChildContent>Content of Tab Pane 25</ChildContent>
-                </AntTabPane>
+                </TabPane>
 
                 @{
                     Enumerable.Range(1, 29).Select<int, RenderFragment>
                         (i => { return template(i); }).Aggregate((r1, r2) => r1 + r2);
                 }
-            </AntTabs>
+            </Tabs>
         </div>
     </Demo>
 </DemoCard>
 
 @code{
-    private string mode = AntTabPosition.Top;
+    private string mode = TabPosition.Top;
 
-    RenderFragment<int> template = (i) => @<AntTabPane Key="@i.ToString()">
+    RenderFragment<int> template = (i) => @<TabPane Key="@i.ToString()">
                                               <Tab>Tab @i</Tab>
                                               <ChildContent>Content of Tab Pane @i</ChildContent>
-                                          </AntTabPane>;
+                                          </TabPane>;
 
 }
 
@@ -208,25 +208,25 @@
     <Title>Extra content</Title>
     <Description>You can add extra actions to the right of Tabs.</Description>
     <Demo>
-        <AntTabs DefaultActiveKey="1">
+        <Tabs DefaultActiveKey="1">
             <TabBarExtraContent>
                 <Button>Extra Action</Button>
             </TabBarExtraContent>
             <ChildContent>
-                <AntTabPane Key="1">
+                <TabPane Key="1">
                     <Tab>Tab 1</Tab>
                     <ChildContent>Content of Tab Pane 1</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="2">
+                </TabPane>
+                <TabPane Key="2">
                     <Tab>Tab 2</Tab>
                     <ChildContent>Content of Tab Pane 2</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="3">
+                </TabPane>
+                <TabPane Key="3">
                     <Tab>Tab 3</Tab>
                     <ChildContent>Content of Tab Pane 3</ChildContent>
-                </AntTabPane>
+                </TabPane>
             </ChildContent>
-        </AntTabs>
+        </Tabs>
     </Demo>
 </DemoCard>
 
@@ -236,46 +236,46 @@
     <Demo>
         <div>
             <RadioGroup @bind-Value="size" Style="margin-bottom: 16px;">
-                <Radio RadioButton Value="@AntTabSize.Small">Small</Radio>
-                <Radio RadioButton Value="@AntTabSize.Default">Default</Radio>
-                <Radio RadioButton Value="@AntTabSize.Large">Large</Radio>
+                <Radio RadioButton Value="@TabSize.Small">Small</Radio>
+                <Radio RadioButton Value="@TabSize.Default">Default</Radio>
+                <Radio RadioButton Value="@TabSize.Large">Large</Radio>
             </RadioGroup>
 
-            <AntTabs DefaultActiveKey="1" Size="@size" Style="margin-bottom: 32px">
-                <AntTabPane Key="1">
+            <Tabs DefaultActiveKey="1" Size="@size" Style="margin-bottom: 32px">
+                <TabPane Key="1">
                     <Tab>Tab 1</Tab>
                     <ChildContent>Content of Tab Pane 1</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="2">
+                </TabPane>
+                <TabPane Key="2">
                     <Tab>Tab 2</Tab>
                     <ChildContent>Content of Tab Pane 2</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="3">
+                </TabPane>
+                <TabPane Key="3">
                     <Tab>Tab 3</Tab>
                     <ChildContent>Content of Tab Pane 3</ChildContent>
-                </AntTabPane>
-            </AntTabs>
+                </TabPane>
+            </Tabs>
 
-            <AntTabs DefaultActiveKey="1" Type="@AntTabType.Card" Size="@size">
-                <AntTabPane Key="1">
+            <Tabs DefaultActiveKey="1" Type="@TabType.Card" Size="@size">
+                <TabPane Key="1">
                     <Tab>Tab 1</Tab>
                     <ChildContent>Content of Tab Pane 1</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="2">
+                </TabPane>
+                <TabPane Key="2">
                     <Tab>Tab 2</Tab>
                     <ChildContent>Content of Tab Pane 2</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="3">
+                </TabPane>
+                <TabPane Key="3">
                     <Tab>Tab 3</Tab>
                     <ChildContent>Content of Tab Pane 3</ChildContent>
-                </AntTabPane>
-            </AntTabs>
+                </TabPane>
+            </Tabs>
         </div>
     </Demo>
 </DemoCard>
 
 @code{
-    private string size = AntTabSize.Default;
+    private string size = TabSize.Default;
 }
 
 <DemoCard>
@@ -284,50 +284,50 @@
     <Demo>
         <div>
             <RadioGroup @bind-Value="position" Style="margin-bottom: 16px;">
-                <Radio RadioButton Value="@AntTabPosition.Top">Top</Radio>
-                <Radio RadioButton Value="@AntTabPosition.Left">Left</Radio>
-                <Radio RadioButton Value="@AntTabPosition.Right">Right</Radio>
+                <Radio RadioButton Value="@TabPosition.Top">Top</Radio>
+                <Radio RadioButton Value="@TabPosition.Left">Left</Radio>
+                <Radio RadioButton Value="@TabPosition.Right">Right</Radio>
             </RadioGroup>
-            <AntTabs DefaultActiveKey="1" TabPosition="@position">
-                <AntTabPane Key="1">
+            <Tabs DefaultActiveKey="1" TabPosition="@position">
+                <TabPane Key="1">
                     <Tab>Tab 1</Tab>
                     <ChildContent>Content of Tab Pane 1</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="2">
+                </TabPane>
+                <TabPane Key="2">
                     <Tab>Tab 2</Tab>
                     <ChildContent>Content of Tab Pane 2</ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="3">
+                </TabPane>
+                <TabPane Key="3">
                     <Tab>Tab 3</Tab>
                     <ChildContent>Content of Tab Pane 3</ChildContent>
-                </AntTabPane>
-            </AntTabs>
+                </TabPane>
+            </Tabs>
         </div>
     </Demo>
 </DemoCard>
 
 @code{
-    private string position = AntTabPosition.Top;
+    private string position = TabPosition.Top;
 }
 
 <DemoCard>
     <Title>Card type tab</Title>
     <Description>Another type of Tabs, which doesn't support vertical mode.</Description>
     <Demo>
-        <AntTabs DefaultActiveKey="1" Type="@AntTabType.Card">
-            <AntTabPane Key="1">
+        <Tabs DefaultActiveKey="1" Type="@TabType.Card">
+            <TabPane Key="1">
                 <Tab>Tab 1</Tab>
                 <ChildContent>Content of Tab Pane 1</ChildContent>
-            </AntTabPane>
-            <AntTabPane Key="2">
+            </TabPane>
+            <TabPane Key="2">
                 <Tab>Tab 2</Tab>
                 <ChildContent>Content of Tab Pane 2</ChildContent>
-            </AntTabPane>
-            <AntTabPane Key="3">
+            </TabPane>
+            <TabPane Key="3">
                 <Tab>Tab 3</Tab>
                 <ChildContent>Content of Tab Pane 3</ChildContent>
-            </AntTabPane>
-        </AntTabs>
+            </TabPane>
+        </Tabs>
     </Demo>
 </DemoCard>
 
@@ -335,30 +335,30 @@
     <Title>Add & close tab</Title>
     <Description>Only card type Tabs support adding & closable. +Use <code>closable={false}</code> to disable close.</Description>
     <Demo>
-        <AntTabs DefaultActiveKey="1" Type="@AntTabType.EditableCard" CreateTabPane="@Create">
-            <AntTabPane Key="1">
+        <Tabs DefaultActiveKey="1" Type="@TabType.EditableCard" CreateTabPane="@Create">
+            <TabPane Key="1">
                 <Tab>Tab 1</Tab>
                 <ChildContent>Content of Tab Pane 1</ChildContent>
-            </AntTabPane>
-            <AntTabPane Key="2">
+            </TabPane>
+            <TabPane Key="2">
                 <Tab>Tab 2</Tab>
                 <ChildContent>Content of Tab Pane 2</ChildContent>
-            </AntTabPane>
-            <AntTabPane Key="3" Closable="false">
+            </TabPane>
+            <TabPane Key="3" Closable="false">
                 <Tab>Tab 3</Tab>
                 <ChildContent>Content of Tab Pane 3</ChildContent>
-            </AntTabPane>
-        </AntTabs>
+            </TabPane>
+        </Tabs>
     </Demo>
 </DemoCard>
 
 @code{
     private static int addedIndex = 3;
-    private readonly Func<AntTabPane> Create = () =>
+    private readonly Func<TabPane> Create = () =>
         {
             addedIndex++;
             int temp = addedIndex;
-            return new AntTabPane (
+            return new TabPane (
                 key: temp.ToString(),
                 childContent: (b) => { b.AddContent(0, $"Content of Tab Pane {temp}"); },
                 tab: (b) => { b.AddContent(0, $"Tab {temp}"); }
@@ -403,32 +403,32 @@
     <Description>Should be used at the top of container, needs to override styles.</Description>
     <Demo>
         <div class="card-container">
-            <AntTabs DefaultActiveKey="1" Type="@AntTabType.Card">
-                <AntTabPane Key="1">
+            <Tabs DefaultActiveKey="1" Type="@TabType.Card">
+                <TabPane Key="1">
                     <Tab>Tab Title 1</Tab>
                     <ChildContent>
                         <p>Content of Tab Pane 1</p>
                         <p>Content of Tab Pane 1</p>
                         <p>Content of Tab Pane 1</p>
                     </ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="2">
+                </TabPane>
+                <TabPane Key="2">
                     <Tab>Tab Title 2</Tab>
                     <ChildContent>
                         <p>Content of Tab Pane 2</p>
                         <p>Content of Tab Pane 2</p>
                         <p>Content of Tab Pane 2</p>
                     </ChildContent>
-                </AntTabPane>
-                <AntTabPane Key="3">
+                </TabPane>
+                <TabPane Key="3">
                     <Tab>Tab Title 3</Tab>
                     <ChildContent>
                         <p>Content of Tab Pane 3</p>
                         <p>Content of Tab Pane 3</p>
                         <p>Content of Tab Pane 3</p>
                     </ChildContent>
-                </AntTabPane>
-            </AntTabs>
+                </TabPane>
+            </Tabs>
         </div>
     </Demo>
 </DemoCard>
@@ -441,29 +441,29 @@
             <div style="margin-bottom: 16px;">
                 <Button @onclick="(e)=>Add()">ADD</Button>
             </div>
-            <AntTabs DefaultActiveKey="1" Type="@AntTabType.EditableCard" HideAdd>
+            <Tabs DefaultActiveKey="1" Type="@TabType.EditableCard" HideAdd>
                 @foreach (var temp in _panes)
                 {
-                    AntTabPane pane = temp;
-                    <AntTabPane Key="@pane.Key">
+                    TabPane pane = temp;
+                    <TabPane Key="@pane.Key">
                         <Tab>@pane.Tab</Tab>
                         <ChildContent>@pane.ChildContent</ChildContent>
-                    </AntTabPane>
+                    </TabPane>
                 }
-            </AntTabs>
+            </Tabs>
         </div>
     </Demo>
 </DemoCard>
 
 @code{
-    private List<AntTabPane>
-        _panes = new List<AntTabPane>
+    private List<TabPane>
+        _panes = new List<TabPane>
             ();
     private static int btnIndex = 1;
     private void Add()
     {
         int index = ++btnIndex;
-        _panes.Add(new AntTabPane(
+        _panes.Add(new TabPane(
             key: index.ToString(),
             tab : (b) => b.AddContent(0, $"Tab {index}"),
             childContent : (b) => b.AddContent(0, $"Content of Tab Pane {index}")
@@ -478,7 +478,7 @@
         for (int i = 0; i < btnIndex + 1; i++)
         {
             int index = i;
-            _panes.Add(new AntTabPane(
+            _panes.Add(new TabPane(
                 key: index.ToString(),
                 tab: (b) => b.AddContent(0, $"Tab {index}"),
                 childContent: (b) => b.AddContent(0, $"Content of Tab Pane {index}")
@@ -491,19 +491,19 @@
     <Title>Draggable Tabs</Title>
     <Description>Use <code>Draggable</code> to make tabs draggable.</Description>
     <Demo>
-        <AntTabs DefaultActiveKey="1" Draggable>
-            <AntTabPane Key="1">
+        <Tabs DefaultActiveKey="1" Draggable>
+            <TabPane Key="1">
                 <Tab>Tab 1</Tab>
                 <ChildContent>Tab 1</ChildContent>
-            </AntTabPane>
-            <AntTabPane Key="2" Disabled>
+            </TabPane>
+            <TabPane Key="2" Disabled>
                 <Tab>Tab 2</Tab>
                 <ChildContent>Tab 2</ChildContent>
-            </AntTabPane>
-            <AntTabPane Key="3">
+            </TabPane>
+            <TabPane Key="3">
                 <Tab>Tab 3</Tab>
                 <ChildContent>Tab 3</ChildContent>
-            </AntTabPane>
-        </AntTabs>
+            </TabPane>
+        </Tabs>
     </Demo>
 </DemoCard>
\ No newline at end of file
diff --git a/site/AntBlazor.Docs/Pages/Tag.razor b/site/AntBlazor.Docs/Pages/Tag.razor
deleted file mode 100644
index c0b2b49fe..000000000
--- a/site/AntBlazor.Docs/Pages/Tag.razor
+++ /dev/null
@@ -1,33 +0,0 @@
-
-<h3>Basic Tag</h3>
-<AntTag>Tag 1</AntTag>
-<AntTag>
-    <a href="https://github.com/NG-ZORRO/ng-zorro-antd">Link</a>
-</AntTag>
-<AntTag Mode="closeable" OnClose="()=>OnClose()">Tag 2</AntTag>
-<AntTag Mode="closeable" OnClose="preventDefault">Prevent Default</AntTag>
-
-
-<br />
-<br />
-<h3>Checkable Tag</h3>
-<AntTag Mode="checkable" Checked CheckedChange="_checked=>checkChange(_checked)">Tag1</AntTag>
-<AntTag Mode="checkable" Checked CheckedChange="_checked=>checkChange(_checked)">Tag2</AntTag>
-<AntTag Mode="checkable" Checked CheckedChange="_checked=>checkChange(_checked)">Tag3</AntTag>
-
-@code {
-    public void OnClose()
-    {
-
-    }
-
-    public void preventDefault(MouseEventArgs e)
-    {
-
-    }
-
-    private void checkChange(bool e)
-    {
-
-    }
-}
diff --git a/site/AntBlazor.Docs/Pages/Timeline.razor b/site/AntBlazor.Docs/Pages/Timeline.razor
deleted file mode 100644
index 496a39e0d..000000000
--- a/site/AntBlazor.Docs/Pages/Timeline.razor
+++ /dev/null
@@ -1,47 +0,0 @@
-
-<h3>Timeline</h3>
-
-<AntTimeline Mode="alternate" >
-    <AntTimelineItem>Create a services site 2015-09-01</AntTimelineItem>
-    <AntTimelineItem Color="green">Solve initial network problems 2015-09-01</AntTimelineItem>
-    <AntTimelineItem Dot="dotTemplate">
-        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-    </AntTimelineItem>
-    <AntTimelineItem Color="red">Network problems being solved 2015-09-01</AntTimelineItem>
-    <AntTimelineItem>Create a services site 2015-09-01</AntTimelineItem>
-    <AntTimelineItem Dot="dotTemplate">Technical testing 2015-09-01</AntTimelineItem>
-</AntTimeline>
-
-
-<br><br>
-<AntTimeline Pending="pending" Reverse="reverse">
-    <AntTimelineItem>1.Create a services site 2015-09-01</AntTimelineItem>
-    <AntTimelineItem>2.Solve initial network problems 2015-09-01</AntTimelineItem>
-    <AntTimelineItem>3.Technical testing 2015-09-01</AntTimelineItem>
-</AntTimeline>
-
-<Button Style="margin-top: 16px" Type="primary" OnClick="toggleReverse">Toggle Reverse</Button>
-
-
-@code {
-
-
-    RenderFragment dotTemplate =
-    @<Template>
-        <AntIcon Type="clock-circle" Style="font-size: 16px;" />
-    </Template>;
-
-    RenderFragment pending =
-@<Template>
-    Recording...
-</Template>;
-
-
-        bool reverse = false;
-
-        void toggleReverse()
-        {
-            this.reverse = !this.reverse;
-        }
-    }
diff --git a/site/AntBlazor.Docs/Pages/Typography.razor b/site/AntBlazor.Docs/Pages/Typography.razor
deleted file mode 100644
index de885c6cc..000000000
--- a/site/AntBlazor.Docs/Pages/Typography.razor
+++ /dev/null
@@ -1,140 +0,0 @@
-
-<h1>Typography 排版</h1>
-<p>文本的基本格式</p>
-
-<h2>代码演示</h2>
-<DemoCard>
-    <Demo>
-        <AntTitle Level="1">Introduction</AntTitle>
-        <AntParagraph>In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.</AntParagraph>
-        <AntParagraph>
-            After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to
-            <AntText Strong>
-                uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.
-            </AntText>
-        </AntParagraph>
-        <AntTitle Level="2">Guildelines and Resources</AntTitle>
-        <AntParagraph>
-            We supply a series of design principles, practical patterns and high quality design resources
-            (<AntText Code>Sketch</AntText> and <AntText Code>Axure</AntText>), to help people create their product
-            prototypes beautifully and efficiently.
-        </AntParagraph>
-        <AntParagraph>
-            <ul>
-                <li>
-                    <a href="/docs/spec/proximity">Principles</a>
-                </li>
-                <li>
-                    <a href="/docs/pattern/navigation">Patterns</a>
-                </li>
-                <li>
-                    <a href="/docs/resource/download">Resource Download</a>
-                </li>
-            </ul>
-        </AntParagraph>
-
-        <AntDivider />
-
-        <AntTitle>介绍</AntTitle>
-        <AntParagraph>
-            蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
-        </AntParagraph>
-        <AntParagraph>
-            随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系
-            Ant Design。基于<AntText Mark>『确定』和『自然』</AntText>
-            的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于
-            <AntText Strong>更好的用户体验</AntText>。
-        </AntParagraph>
-        <AntTitle Level="2">设计资源</AntTitle>
-        <AntParagraph>
-            我们提供完善的设计原则、最佳实践和设计资源文件（<AntText Code>Sketch</AntText> 和
-            <AntText Code>Axure</AntText>），来帮助业务快速设计出高质量的产品原型。
-        </AntParagraph>
-
-        <AntParagraph>
-            <ul>
-                <li>
-                    <a href="/docs/spec/proximity">设计原则</a>
-                </li>
-                <li>
-                    <a href="/docs/pattern/navigation">设计模式</a>
-                </li>
-                <li>
-                    <a href="/docs/resource/download">设计资源</a>
-                </li>
-            </ul>
-        </AntParagraph>
-    </Demo>
-    <Title>基本</Title>
-    <Description>展示文档样例</Description>
-</DemoCard>
-<br />
-
-<DemoCard>
-    <Demo>
-        <AntTitle Level="1">h1. Ant Design 标题一</AntTitle>
-        <AntTitle Level="2">h2. Ant Design 标题二</AntTitle>
-        <AntTitle Level="3">h3. Ant Design 标题三</AntTitle>
-        <AntTitle Level="4">h4. Ant Design 标题四</AntTitle>
-    </Demo>
-    <Title>
-        标题组件
-    </Title>
-    <Description>
-        展示不同级别的标题。
-    </Description>
-</DemoCard>
-<br />
-<DemoCard>
-    <Demo>
-        <AntText>Ant Design</AntText>
-        <br />
-        <AntText Type="secondary">Ant Design</AntText>
-        <br />
-        <AntText Type="warning">Ant Design</AntText>
-        <br />
-        <AntText Type="danger">Ant Design</AntText>
-        <br />
-        <AntText Disabled>Ant Design</AntText>
-        <br />
-        <AntText Mark>Ant Design</AntText>
-        <br />
-        <AntText Code>Ant Design</AntText>
-        <br />
-        <AntText Underline>Ant Design</AntText>
-        <br />
-        <AntText Delete>Ant Design</AntText>
-        <br />
-        <AntText Strong>Ant Design</AntText>
-    </Demo>
-    <Title>文本组件</Title>
-    <Description>内置不同样式的文本。</Description>
-</DemoCard>
-<br />
-<DemoCard>
-    <Title>可交互</Title>
-    <Description>提供可编辑和可复制等额外的交互能力。</Description>
-    <Demo>
-        <AntParagraph Copyable>Simple copyable text</AntParagraph>
-        <AntParagraph Copyable CopyConfig="@selfDefinedText">Copy a self defiend text</AntParagraph>
-        <AntParagraph Copyable CopyConfig="@selfDefinedCopy">在控制台中查看此文本的log</AntParagraph>
-        <AntTitle Copyable>可复制的标题</AntTitle>
-        <AntParagraph >不可复制的段落中穿插着<AntText Strong Copyable>可复制的文字</AntText>以及其他</AntParagraph>
-    </Demo>
-</DemoCard>
-
-
-
-@code {
-    public TypographyCopyableConfig selfDefinedText;
-    public TypographyCopyableConfig selfDefinedCopy;
-
-    protected override void OnInitialized()
-    {
-        selfDefinedText = new TypographyCopyableConfig() { Text = "Just copied from self defined text" };
-        selfDefinedCopy = new TypographyCopyableConfig();
-        selfDefinedCopy.OnCopy += () => System.Console.WriteLine("Log in console as a self defined copy behavior");
-        base.OnInitialized();
-    }
-
-}
diff --git a/site/AntBlazor.Docs/Shared/MainLayout.razor b/site/AntBlazor.Docs/Shared/MainLayout.razor
index bb67f4804..3204af725 100644
--- a/site/AntBlazor.Docs/Shared/MainLayout.razor
+++ b/site/AntBlazor.Docs/Shared/MainLayout.razor
@@ -66,12 +66,12 @@
         <div class="ant-row">
             <div class="ant-col main-menu ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4">
                 <div>
-                    <AntAffix>
+                    <Affix>
                         <section class="main-menu-inner">
                             @*<NavMenu MenuItems="SiderMenuItems" IsCollapsed="_isCollapsed" />*@
                             <NavMenu></NavMenu>
                         </section>
-                    </AntAffix>
+                    </Affix>
                 </div>
             </div>
             <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20">
diff --git a/site/AntBlazor.Docs/wwwroot/menu.json b/site/AntBlazor.Docs/wwwroot/menu.json
index 75d0df94f..c64b2a3cb 100644
--- a/site/AntBlazor.Docs/wwwroot/menu.json
+++ b/site/AntBlazor.Docs/wwwroot/menu.json
@@ -23,12 +23,12 @@
           {
             "title": "Icon",
             "type": "menuItem",
-            "url": "icon"
+            "url": "icondemo"
           },
           {
             "title": "Typography",
             "type": "menuItem",
-            "url": "typography"
+            "url": "components/typography"
           }
         ]
       },
@@ -60,12 +60,12 @@
           {
             "title": "Affix",
             "type": "menuItem",
-            "url": "affix"
+            "url": "components/affix"
           },
           {
             "title": "Breadcrumb",
             "type": "menuItem",
-            "url": "breadcrumb"
+            "url": "components/breadcrumb"
           },
           {
             "title": "Menu",
@@ -85,7 +85,7 @@
           {
             "title": "Steps",
             "type": "menuItem",
-            "url": "step"
+            "url": "stepdemo"
           }
         ]
       },
@@ -207,12 +207,12 @@
           {
             "title": "Tabs",
             "type": "menuItem",
-            "url": "tabs"
+            "url": "tabsdemo"
           },
           {
             "title": "Timeline",
             "type": "menuItem",
-            "url": "timeline"
+            "url": "components/timeline"
           },
           {
             "title": "Table",
@@ -274,12 +274,12 @@
           {
             "title": "Divider",
             "type": "menuItem",
-            "url": "divider"
+            "url": "components/divider"
           },
           {
             "title": "BackTop",
             "type": "menuItem",
-            "url": "backtop"
+            "url": "components/backtop"
           }
         ]
       }