diff --git a/crates/storybook/src/stories/components/facepile.rs b/crates/storybook/src/stories/components/facepile.rs
index 6bde4539ed5aa4f1187d32b0879f025e89a37b69..96c3aff2afbe5dff1971667eb18428d5d601f845 100644
--- a/crates/storybook/src/stories/components/facepile.rs
+++ b/crates/storybook/src/stories/components/facepile.rs
@@ -1,8 +1,10 @@
 use gpui2::elements::div;
 use gpui2::style::StyleHelpers;
-use gpui2::{rgb, Element, Hsla, IntoElement, ParentElement, ViewContext};
-use ui::{avatar, theme};
-use ui::{facepile, prelude::*};
+use gpui2::{Element, IntoElement, ParentElement, ViewContext};
+use ui::prelude::*;
+use ui::{avatar, facepile, theme};
+
+use crate::story::Story;
 
 #[derive(Element, Default)]
 pub struct FacepileStory {}
@@ -11,20 +13,8 @@ impl FacepileStory {
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
 
-        div()
-            .size_full()
-            .flex()
-            .flex_col()
-            .pt_2()
-            .px_4()
-            .font("Zed Mono Extended")
-            .fill(rgb::<Hsla>(0x282c34))
-            .child(
-                div()
-                    .text_2xl()
-                    .text_color(rgb::<Hsla>(0xffffff))
-                    .child(std::any::type_name::<ui::Facepile>()),
-            )
+        Story::container()
+            .child(Story::title(std::any::type_name::<ui::Facepile>()))
             .child(
                 div()
                     .flex()
diff --git a/crates/storybook/src/stories/components/traffic_lights.rs b/crates/storybook/src/stories/components/traffic_lights.rs
index 252caf99f64b5433ac33f9c2b45c551cf1473409..9f84446eed383ee8fbd637b5b00b7212137acdc2 100644
--- a/crates/storybook/src/stories/components/traffic_lights.rs
+++ b/crates/storybook/src/stories/components/traffic_lights.rs
@@ -1,8 +1,8 @@
-use gpui2::elements::div;
-use gpui2::style::StyleHelpers;
-use gpui2::{rgb, Element, Hsla, IntoElement, ParentElement, ViewContext};
+use gpui2::{Element, IntoElement, ParentElement, ViewContext};
 use ui::{theme, traffic_lights};
 
+use crate::story::Story;
+
 #[derive(Element, Default)]
 pub struct TrafficLightsStory {}
 
@@ -10,20 +10,8 @@ impl TrafficLightsStory {
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
 
-        div()
-            .size_full()
-            .flex()
-            .flex_col()
-            .pt_2()
-            .px_4()
-            .font("Zed Mono Extended")
-            .fill(rgb::<Hsla>(0x282c34))
-            .child(
-                div()
-                    .text_2xl()
-                    .text_color(rgb::<Hsla>(0xffffff))
-                    .child(std::any::type_name::<ui::TrafficLights>()),
-            )
+        Story::container()
+            .child(Story::title(std::any::type_name::<ui::TrafficLights>()))
             .child(traffic_lights())
     }
 }
diff --git a/crates/storybook/src/stories/elements/avatar.rs b/crates/storybook/src/stories/elements/avatar.rs
index 3239dbec9c0a8141ccc2cefa13151bf85f9a22e6..a21ee0a0bc334c743798519bcfd3658b689597b7 100644
--- a/crates/storybook/src/stories/elements/avatar.rs
+++ b/crates/storybook/src/stories/elements/avatar.rs
@@ -1,9 +1,11 @@
 use gpui2::elements::div;
 use gpui2::style::StyleHelpers;
-use gpui2::{rgb, Element, Hsla, IntoElement, ParentElement, ViewContext};
+use gpui2::{Element, IntoElement, ParentElement, ViewContext};
 use ui::prelude::*;
 use ui::{avatar, theme};
 
+use crate::story::Story;
+
 #[derive(Element, Default)]
 pub struct AvatarStory {}
 
@@ -11,20 +13,8 @@ impl AvatarStory {
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
 
-        div()
-            .size_full()
-            .flex()
-            .flex_col()
-            .pt_2()
-            .px_4()
-            .font("Zed Mono Extended")
-            .fill(rgb::<Hsla>(0x282c34))
-            .child(
-                div()
-                    .text_2xl()
-                    .text_color(rgb::<Hsla>(0xffffff))
-                    .child(std::any::type_name::<ui::Avatar>()),
-            )
+        Story::container()
+            .child(Story::title(std::any::type_name::<ui::Avatar>()))
             .child(
                 div()
                     .flex()
diff --git a/crates/storybook/src/story.rs b/crates/storybook/src/story.rs
new file mode 100644
index 0000000000000000000000000000000000000000..7a3145cf080a63ab2ea8284d6a7ae3da93a782f9
--- /dev/null
+++ b/crates/storybook/src/story.rs
@@ -0,0 +1,25 @@
+use gpui2::elements::div;
+use gpui2::style::StyleHelpers;
+use gpui2::{rgb, Element, Hsla, ParentElement};
+
+pub struct Story {}
+
+impl Story {
+    pub fn container<V: 'static>() -> div::Div<V> {
+        div()
+            .size_full()
+            .flex()
+            .flex_col()
+            .pt_2()
+            .px_4()
+            .font("Zed Mono Extended")
+            .fill(rgb::<Hsla>(0x282c34))
+    }
+
+    pub fn title<V: 'static>(title: &str) -> impl Element<V> {
+        div()
+            .text_2xl()
+            .text_color(rgb::<Hsla>(0xffffff))
+            .child(title.to_owned())
+    }
+}
diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs
index b72c4a5681e99b48e326673464f9510e24bbe531..3974bbce401940fb8d4779451811fbf8ed3a8170 100644
--- a/crates/storybook/src/storybook.rs
+++ b/crates/storybook/src/storybook.rs
@@ -2,6 +2,7 @@
 
 mod collab_panel;
 mod stories;
+mod story;
 mod workspace;
 
 use std::str::FromStr;
@@ -24,12 +25,12 @@ gpui2::actions! {
 }
 
 #[derive(Debug, Clone, Copy)]
-enum Story {
+enum StorySelector {
     Element(ElementStory),
     Component(ComponentStory),
 }
 
-impl FromStr for Story {
+impl FromStr for StorySelector {
     type Err = anyhow::Error;
 
     fn from_str(s: &str) -> std::result::Result<Self, Self::Err> {
@@ -55,7 +56,7 @@ enum ComponentStory {
 
 #[derive(Parser)]
 struct Args {
-    story: Option<Story>,
+    story: Option<StorySelector>,
 }
 
 fn main() {
@@ -79,13 +80,13 @@ fn main() {
                 ..Default::default()
             },
             |cx| match args.story {
-                Some(Story::Element(ElementStory::Avatar)) => {
+                Some(StorySelector::Element(ElementStory::Avatar)) => {
                     view(|cx| render_story(&mut ViewContext::new(cx), AvatarStory::default()))
                 }
-                Some(Story::Component(ComponentStory::Facepile)) => {
+                Some(StorySelector::Component(ComponentStory::Facepile)) => {
                     view(|cx| render_story(&mut ViewContext::new(cx), FacepileStory::default()))
                 }
-                Some(Story::Component(ComponentStory::TrafficLights)) => view(|cx| {
+                Some(StorySelector::Component(ComponentStory::TrafficLights)) => view(|cx| {
                     render_story(&mut ViewContext::new(cx), TrafficLightsStory::default())
                 }),
                 None => {