diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs
new file mode 100644
index 0000000000..dbf52b8b35
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs
@@ -0,0 +1,23 @@
+namespace Bit.BlazorUI;
+
+public class BitCascadingValue
+{
+    public string? Name { get; set; }
+    public object? Value { get; set; }
+
+    public BitCascadingValue() { }
+
+    public BitCascadingValue(object? value, string? name = null)
+    {
+        Name = name;
+        Value = value;
+    }
+
+    public static implicit operator BitCascadingValue(int value) => new(value);
+    public static implicit operator BitCascadingValue(int? value) => new(value);
+    public static implicit operator BitCascadingValue(bool value) => new(value);
+    public static implicit operator BitCascadingValue(bool? value) => new(value);
+    public static implicit operator BitCascadingValue(string value) => new(value);
+    public static implicit operator BitCascadingValue(BitDir? value) => new(value);
+    public static implicit operator BitCascadingValue(RouteData value) => new(value);
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs
new file mode 100644
index 0000000000..a557fef66b
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs
@@ -0,0 +1,53 @@
+using System.Diagnostics.CodeAnalysis;
+
+namespace Bit.BlazorUI;
+
+public class BitCascadingValueProvider : ComponentBase
+{
+    [DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)]
+    private Type _cascadingValueType = typeof(CascadingValue<>);
+
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public IEnumerable<BitCascadingValue> Values { get; set; } = [];
+
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(BitCascadingValue))]
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        var seq = 0;
+        RenderFragment? rf = ChildContent;
+
+        foreach (var value in Values)
+        {
+            if (value.Value is null) continue;
+
+            var r = rf;
+            var s = seq;
+            var v = value;
+
+            rf = b => { CreateCascadingValue(b, s, v.Name, v.Value, r); };
+
+            seq += string.IsNullOrEmpty(v.Name) ? 3 : 4;
+        }
+
+        builder.AddContent(seq, rf);
+    }
+
+
+    private void CreateCascadingValue(RenderTreeBuilder builder,
+        int seq,
+        string? name,
+        object value,
+        RenderFragment? childContent)
+    {
+#pragma warning disable IL2055 // Either the type on which the MakeGenericType is called can't be statically determined, or the type parameters to be used for generic arguments can't be statically determined.
+        builder.OpenComponent(seq, _cascadingValueType.MakeGenericType(value.GetType()));
+#pragma warning restore IL2055 // Either the type on which the MakeGenericType is called can't be statically determined, or the type parameters to be used for generic arguments can't be statically determined.
+        if (string.IsNullOrEmpty(name) is false)
+        {
+            builder.AddComponentParameter(++seq, "Name", name);
+        }
+        builder.AddComponentParameter(++seq, "Value", value);
+        builder.AddComponentParameter(++seq, "ChildContent", childContent);
+        builder.CloseComponent();
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor
index e970bb729a..6851c614ef 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor
@@ -9,11 +9,13 @@
      dir="@Dir?.ToString().ToLower()">
     <div style="@Styles?.Top" class="bit-ply-top @Classes?.Top" />
     <div style="@Styles?.Center"
-         class="bit-ply-center @Classes?.Center" 
+         class="bit-ply-center @Classes?.Center"
          dir="@Dir?.ToString().ToLower()">
         <div style="@Styles?.Left" class="bit-ply-left @Classes?.Left"></div>
         <div style="@Styles?.Main" class="bit-ply-main @Classes?.Main">
-            @ChildContent
+            <BitCascadingValueProvider Values="Values">
+                @ChildContent
+            </BitCascadingValueProvider>
         </div>
         <div style="@Styles?.Right" class="bit-ply-right @Classes?.Right"></div>
     </div>
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs
index c25dc11fa7..d169ef2062 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs
@@ -2,6 +2,11 @@
 
 public partial class BitProLayout : BitComponentBase
 {
+    /// <summary>
+    /// The cascading values to be provided for the children of the layout.
+    /// </summary>
+    [Parameter] public IEnumerable<BitCascadingValue> Values { get; set; } = [];
+
     /// <summary>
     /// The content of the layout.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss
index 27d8d661e1..81b2fa70d4 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss
@@ -1,4 +1,5 @@
-@import '../../../Bit.BlazorUI/Styles/functions.scss';
+@import '../../Styles/extra-variables.scss';
+@import '../../../Bit.BlazorUI/Styles/functions.scss';
 
 .bit-ply {
     width: 100%;
@@ -11,21 +12,21 @@
 .bit-ply-top {
     width: 100%;
     z-index: 999999;
-    height: var(--bit-env-inset-top);
+    height: $bit-env-inset-top;
     background-color: $clr-bg-pri;
 }
 
 .bit-ply-bottom {
     width: 100%;
     z-index: 999999;
-    height: var(--bit-env-inset-bottom);
+    height: $bit-env-inset-bottom;
     background-color: $clr-bg-pri;
 }
 
 .bit-ply-center {
     width: 100%;
     display: flex;
-    height: calc(100% - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
+    height: calc(100% - $bit-env-inset-top - $bit-env-inset-bottom);
 }
 
 .bit-ply-main {
@@ -35,19 +36,19 @@
     position: relative;
     scroll-behavior: smooth;
     overscroll-behavior: none;
-    width: calc(100% - var(--bit-env-inset-left) - var(--bit-env-inset-right));
+    width: calc(100% - $bit-env-inset-left - $bit-env-inset-right);
 }
 
 .bit-ply-left {
     height: 100%;
     z-index: 999999;
-    width: var(--bit-env-inset-left);
+    width: $bit-env-inset-left;
     background-color: $clr-bg-pri;
 }
 
 .bit-ply-right {
     height: 100%;
     z-index: 999999;
-    width: var(--bit-env-inset-right);
+    width: $bit-env-inset-right;
     background-color: $clr-bg-pri;
 }
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss
new file mode 100644
index 0000000000..aed5458274
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss
@@ -0,0 +1,14 @@
+$bit-env-inset-top: var(--bit-env-inset-top);
+$bit-env-inset-left: var(--bit-env-inset-left);
+$bit-env-inset-right: var(--bit-env-inset-right);
+$bit-env-inset-bottom: var(--bit-env-inset-bottom);
+//--
+$bit-env-width-vw: var(--bit-env-width-vw);
+$bit-env-height-vh: var(--bit-env-height-vh);
+$bit-env-width-percent: var(--bit-env-width-per);
+$bit-env-height-percent: var(--bit-env-height-per);
+$bit-env-width-available: var(--bit-env-width-avl);
+$bit-env-height-available: var(--bit-env-height-avl);
+//--
+$bit-env-inset-inline-start: var(--bit-env-inset-inline-start);
+$bit-env-inset-inline-end: var(--bit-env-inset-inline-end);
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss
index aadd719d1e..3b8f0683f0 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss
@@ -8,8 +8,8 @@
     --bit-env-height-vh: calc(100vh - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
     --bit-env-width-per: calc(100% - var(--bit-env-inset-left) - var(--bit-env-inset-right));
     --bit-env-height-per: calc(100% - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
-    --bit-env-width: calc(var(--win-width) - var(--bit-env-inset-left) - var(--bit-env-inset-right));
-    --bit-env-height: calc(var(--win-height) - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
+    --bit-env-width-avl: calc(var(--win-width) - var(--bit-env-inset-left) - var(--bit-env-inset-right));
+    --bit-env-height-avl: calc(var(--win-height) - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
     //--
     --bit-env-inset-inline-start: var(--bit-env-inset-left);
     --bit-env-inset-inline-end: var(--bit-env-inset-right);