diff --git a/_config.yml b/_config.yml
index f992aa6ecc..7494e17405 100644
--- a/_config.yml
+++ b/_config.yml
@@ -268,6 +268,8 @@ navigation:
title: "Arc"
"*appbar":
title: "AppBar"
+ "*popup":
+ title: "Popup"
"*autocomplete":
title: "AutoComplete"
"*avatar":
@@ -627,6 +629,7 @@ intro_columns:
"Progress Bar": "progressbar-overview"
"Chunk Progress Bar": "chunkprogressbar-overview"
"Tooltip": "tooltip-overview"
+ "Popup": "popup-overview"
-
title: "Documents"
items:
diff --git a/components/popup/animation.md b/components/popup/animation.md
new file mode 100644
index 0000000000..006de0b1cc
--- /dev/null
+++ b/components/popup/animation.md
@@ -0,0 +1,123 @@
+---
+title: Animation
+page_title: Popup Animation
+description: Explore the animation settings of the Popup for Blazor. Discover how to adjust the way the Popup appears and disappears on the screen.
+slug: popup-animation
+tags: telerik,blazor,popup,animation
+published: True
+position: 35
+---
+
+# Popup Animation
+
+This article outlines how to customize the animations when the Popup displays and hides.
+
+## Type
+
+You can change the way the Popup component shows and hides by setting the `AnimationType` parameter to a member of the `AnimationType` enum:
+
+* `None`
+* `Fade`
+* `PushUp`
+* `PushDown`
+* `PushLeft`
+* `PushRight`
+* `RevealVertical`
+* `SlideUp`
+* `SlideIn`
+* `SlideDown` (default)
+* `SlideRight`
+* `SlideLeft`
+* `ZoomIn`
+* `ZoomOut`
+
+See the [example](#example) below to customize the available parameters and see how they affect the Popup component.
+
+## Duration
+
+Set the `AnimationDuration` parameter in milliseconds as `int` to control how long the animation will take until the component is fully displayed.
+
+See the [example](#example) below to customize the available parameters and see how they affect the Popup component.
+
+## Example
+
+The following example lets you experiment with the available settings that control the animation in the Popup. It starts with the default component behavior.
+
+````CSHTML
+
+
+
+Show Popup
+Hide Popup
+
+
+
+ Telerik Blazor Animation Container
+
+
+
+
+
+
+
+@code {
+ private TelerikPopup PopupRef { get; set; }
+
+ private List AnimationTypes { get; set; }
+
+ private AnimationType SelectedAnimationType { get; set; } = AnimationType.SlideDown;
+
+ private int SelectedAnimationDuration { get; set; } = 300;
+
+ private void OnDropDownValueChanged(AnimationType newAnimationType)
+ {
+ PopupRef.Hide();
+
+ SelectedAnimationType = newAnimationType;
+
+ PopupRef.Show();
+ }
+
+ protected override void OnInitialized()
+ {
+ AnimationTypes = new List();
+
+ foreach (AnimationType animation in Enum.GetValues(typeof(AnimationType)))
+ {
+ AnimationTypes.Add(animation);
+ }
+
+ base.OnInitialized();
+ }
+}
+
+
+````
+
+## See Also
+
+* [Live Popup Demos](https://demos.telerik.com/blazor-ui/popup/overview)
+* [Popup API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopup)
diff --git a/components/popup/overview.md b/components/popup/overview.md
new file mode 100644
index 0000000000..217f9d8394
--- /dev/null
+++ b/components/popup/overview.md
@@ -0,0 +1,108 @@
+---
+title: Overview
+page_title: Popup Overview
+description: Discover the Blazor Popup. Learn how to add the component to your app and explore its features like positioning, alignment, and animation customization.
+slug: popup-overview
+tags: telerik,blazor,popup
+published: True
+position: 0
+---
+
+# Blazor Popup Overview
+
+The Blazor Popup component helps you easily display a popup for a target element (anchor) in your application. You can use the Telerik UI for Blazor Popup to display additional information. This article explains how to start using the component and describes its features.
+
+## Creating Blazor Popup
+
+1. Add the `` tag to a Razor file.
+1. Obtain the component reference through `@ref`.
+1. Use the [Show](#popup-reference-and-methods) method to display the ``.
+
+>caption Basic configuration of the Telerik Popup for Blazor
+
+````CSHTML
+
+ I am a Telerik Popup.
+
+
+Show the Popup
+
+@code {
+ private TelerikPopup PopupRef { get; set; }
+}
+````
+
+## Popup Positioning and Collision
+
+Use the available positioning and collision settings to customize how the Popup positions and reacts to insufficient space in the viewport. [Read more about the Blazor Popup Positioning and Collision...]({%slug popup-position-collision%})
+
+## Popup Animations
+
+Use the available parameters to customize the animation type and its duration. [Read more about the Blazor Popup animations...]({%slug popup-animation%}).
+
+## Popup Parameters
+
+The Blazor Popup provides parameters to configure the component. Also check the [Popup API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopup) for a full list of properties, methods and events.
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Description |
+| ----------- | ----------- | ----------- |
+| `AnchorHorizontalAlign` | `PopupAnchorHorizontalAlign` enum (`Left`) | Defines how the anchor aligns with the Popup component on the horizontal plane. [Read more about Popup Positioning.]({%slug popup-position-collision%})|
+| `AnchorSelector` | `string` | The CSS selector for the anchor element of the Popup. |
+| `AnchorVerticalAlign` | `PopupAnchorVerticalAlign` enum (`Bottom`) | Defines how the anchor aligns with the Popup on the vertical plane. [Read more about Popup Positioning.]({%slug popup-position-collision%}). |
+| `AnimationDuration` | `int` | The duration of the animation in milliseconds. [Read more about Popup animations.]({%slug popup-animation%}) |
+| `AnimationType` | `AnimationType` enum (`SlideDown`) | The type of animation when the component displays and hides. [Read more about Popup animations.]({%slug popup-animation%}) |
+| `HorizontalAlign` | `PopupHorizontalAlign ` enum (`Left`) | Determines if the left or the right side of the Popup will touch its anchor. [Read more about Popup Positioning.]({%slug popup-position-collision%}) |
+| `HorizontalCollision` | `PopupCollision ` enum (`Fit`) | Sets the behavior of the Popup when it doesn't fit in the viewport based on the horizontal plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) |
+| `HorizontalOffset` | `double` | The horizontal space between the Popup and its anchor in pixels. |
+| `VerticalAlign` | `PopupVerticalAlign ` enum (`Top`) | Determines if the Popup will touch the anchor with its top, bottom, or center. [Read more about Popup Positioning.]({%slug popup-position-collision%}) |
+| `VerticalCollision` | `PopupCollision ` enum (`Flip`) | Defines the behavior of the Popup when it doesn't fit in the viewport based on the vertical plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) |
+| `VerticalOffset` | `double` | The vertical space between the Popup and its anchor in `pixels`. |
+
+### Styling and Appearance
+
+The following parameters enable you to customize the appearance of the Blazor Popup:
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `Class` | `string` | The custom CSS class to be rendered on the `
` element, which wraps the component `ChildContent`. Use for [styling customizations]({%slug themes-override%}). |
+| `Height` | `string` | The height of the Popup. |
+| `Width` | `string` | The width of the Popup. |
+
+## Popup Reference and Methods
+
+To execute Popup methods, obtain a reference to the component instance with `@ref`.
+
+| Method | Description |
+|---------|-------------|
+| `Refresh` | Use this method to programmatically re-render the Popup. The Popup is rendered as a child of the `TelerikRootComponent`, instead of where it is declared. As a result, it doesn't automatically refresh when its content is updated. In such cases, the `Refresh` method comes in handy to ensure that the Popup content is up-to-date. |
+| `Show` | Use this method to display the Popup. |
+| `Hide` | Use this method to close the Popup. |
+
+````CSHTML
+Show the Popup
+
+
+ I am a Telerik Popup!
+
+
+@code {
+ private TelerikPopup PopupRef { get; set; }
+
+ private void ShowPopup()
+ {
+ PopupRef.Show();
+ }
+}
+````
+
+## Next Steps
+
+* [Explore the Popup Positioning and Collision Settings]({%slug popup-position-collision%})
+* [Customize the Popup Animations]({%slug popup-animation%})
+
+## See Also
+
+* [Live Popup Demos](https://demos.telerik.com/blazor-ui/popup/overview)
+* [Popup API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopup)
diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md
new file mode 100644
index 0000000000..6c9feebc24
--- /dev/null
+++ b/components/popup/position-collision.md
@@ -0,0 +1,180 @@
+---
+title: Position and Collision
+page_title: Popup Position and Collision
+description: Discover the placement settings of the Popup for Blazor. Learn how to configure the Popup position and handle collisions.
+slug: popup-position-collision
+tags: telerik,blazor,popup,position,collision
+published: True
+position: 10
+---
+
+# Popup Position and Collision
+
+This article outlines how to control the position of the Popup based on its anchor and dictate how the component responds to insufficient screen space.
+
+## Position
+
+You can customize how the popup and its anchor align with each other. You can use the available parameters to control the position of the component.
+
+### Anchor Alignment
+
+Use the available parameters to control which part of the anchor touches the Popup.
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Enum Members |
+| ----------- | ----------- | ----------- |
+| `AnchorHorizontalAlign` | `PopupAnchorHorizontalAlign` | `Center` `Left` (default value) `Right` |
+| `AnchorVerticalAlign` | `PopupAnchorVerticalAlign` | `Bottom` (default value) `Center` `Top` |
+
+See the [example](#example) below to customize the available parameters and see how they affect the Popup component.
+
+### Popup Alignment
+
+Use the available parameters to control which side of the Popup is in contact with the anchor.
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Enum Members |
+| ----------- | ----------- | ----------- |
+| `HorizontalAlign` | `PopupHorizontalAlign` | `Center` `Left` (default value) `Right` |
+| `VerticalAlign` | `PopupVerticalAlign` | `Bottom` `Center` `Top` (default value) |
+
+## Collision
+
+There are two collision modes available for the Popup component:
+
+* `Fit`—The Popup will shift until it is fully visible on the screen.
+* `Flip`—The Popup will render on the other side of the anchor.
+
+Use the available parameters to control how the Popup reacts to insufficient screen space.
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Enum Members |
+| ----------- | ----------- | ----------- |
+| `HorizontalCollision` | `PopupCollision ` | `Fit` (default value) `Flip` |
+| `VerticalCollision` | `PopupCollision ` | `Fit` `Flip` (default value) |
+
+See the [example](#example) below to customize the available parameters and see how they affect the Popup component.
+
+## Example
+
+The following example lets you experiment with the available settings that control the position and collision behavior of the Popup. It starts with the default component behavior.
+
+````CSHTML
+