diff --git a/crates/storybook2/src/stories.rs b/crates/storybook2/src/stories.rs
index f7ab3ef548984b32e70bc83a58ad38e64c188186..d0c363b4b4c58185793ca208343e2b594b38d200 100644
--- a/crates/storybook2/src/stories.rs
+++ b/crates/storybook2/src/stories.rs
@@ -5,6 +5,7 @@ mod kitchen_sink;
 mod picker;
 mod scroll;
 mod text;
+mod viewport_units;
 mod z_index;
 
 pub use auto_height_editor::*;
@@ -14,4 +15,5 @@ pub use kitchen_sink::*;
 pub use picker::*;
 pub use scroll::*;
 pub use text::*;
+pub use viewport_units::*;
 pub use z_index::*;
diff --git a/crates/storybook2/src/stories/viewport_units.rs b/crates/storybook2/src/stories/viewport_units.rs
new file mode 100644
index 0000000000000000000000000000000000000000..8a95a6b66c30da05df7458988bf8362a25480d74
--- /dev/null
+++ b/crates/storybook2/src/stories/viewport_units.rs
@@ -0,0 +1,34 @@
+use gpui::{Div, Render};
+use story::Story;
+
+use ui::prelude::*;
+
+pub struct ViewportUnitsStory;
+
+impl Render for ViewportUnitsStory {
+    type Element = Div;
+
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+        Story::container().child(
+            div()
+                .flex()
+                .flex_row()
+                .child(
+                    div()
+                        .w_vw(0.5, cx)
+                        .h_vh(0.8, cx)
+                        .bg(gpui::red())
+                        .text_color(gpui::white())
+                        .child("50vw, 80vh"),
+                )
+                .child(
+                    div()
+                        .w_vw(0.25, cx)
+                        .h_vh(0.33, cx)
+                        .bg(gpui::green())
+                        .text_color(gpui::white())
+                        .child("25vw, 33vh"),
+                ),
+        )
+    }
+}
diff --git a/crates/storybook2/src/story_selector.rs b/crates/storybook2/src/story_selector.rs
index 1e899a5783e28226f7c0bda65da4c9c066a7a81b..266511dcfd0f69664c1f2da703aa442fe9618fec 100644
--- a/crates/storybook2/src/story_selector.rs
+++ b/crates/storybook2/src/story_selector.rs
@@ -30,6 +30,7 @@ pub enum ComponentStory {
     Scroll,
     Tab,
     Text,
+    ViewportUnits,
     ZIndex,
     Picker,
 }
@@ -55,6 +56,7 @@ impl ComponentStory {
             Self::Scroll => ScrollStory::view(cx).into(),
             Self::Text => TextStory::view(cx).into(),
             Self::Tab => cx.build_view(|_| ui::TabStory).into(),
+            Self::ViewportUnits => cx.build_view(|_| crate::stories::ViewportUnitsStory).into(),
             Self::ZIndex => cx.build_view(|_| ZIndexStory).into(),
             Self::Picker => PickerStory::new(cx).into(),
         }
diff --git a/crates/ui2/src/styled_ext.rs b/crates/ui2/src/styled_ext.rs
index a04deea7580716d2fd8bf039651bdd68f62bec88..ed81c2cd0a78a0f353ba66dcd563e445e9abdbbd 100644
--- a/crates/ui2/src/styled_ext.rs
+++ b/crates/ui2/src/styled_ext.rs
@@ -16,6 +16,20 @@ fn elevated<E: Styled>(this: E, cx: &mut WindowContext, index: ElevationIndex) -
 
 /// Extends [`Styled`](gpui::Styled) with Zed specific styling methods.
 pub trait StyledExt: Styled + Sized {
+    /// Sets the width of the element as a percentage of the viewport's width.
+    ///
+    /// `percent` should be a value between `0.0` and `1.0`.
+    fn w_vw(self, percent: f32, cx: &mut WindowContext) -> Self {
+        self.w(cx.viewport_size().width * percent)
+    }
+
+    /// Sets the height of the element as a percentage of the viewport's height.
+    ///
+    /// `percent` should be a value between `0.0` and `1.0`.
+    fn h_vh(self, percent: f32, cx: &mut WindowContext) -> Self {
+        self.h(cx.viewport_size().height * percent)
+    }
+
     /// Horizontally stacks elements.
     ///
     /// Sets `flex()`, `flex_row()`, `items_center()`