diff --git a/gh-pages/src/pages/space/mod.rs b/gh-pages/src/pages/space/mod.rs
index 2e7adec..1a423cc 100644
--- a/gh-pages/src/pages/space/mod.rs
+++ b/gh-pages/src/pages/space/mod.rs
@@ -24,6 +24,23 @@ pub fn SpacePage() -> impl IntoView {
                     ""
                 </DemoCode>
             </Demo>
+            <h3>"vertical"</h3>
+            <Demo>
+                <Space vertical=true>
+                    <Button>"1"</Button>
+                    <Button>"2"</Button>
+                    <Button>"3"</Button>
+                </Space>
+                <DemoCode slot html=highlight_str!(r#"
+                    <Space vertical=true>
+                        <Button>"1"</Button>
+                        <Button>"2"</Button>
+                        <Button>"3"</Button>
+                    </Space>
+                "#, "rust")>
+                    ""
+                </DemoCode>
+            </Demo>
             <h3>"gap"</h3>
             <Demo>
                 <Space gap=SpaceGap::LARGE>
diff --git a/src/space/mod.rs b/src/space/mod.rs
index d1be6ab..0f9104d 100644
--- a/src/space/mod.rs
+++ b/src/space/mod.rs
@@ -13,19 +13,23 @@ pub enum SpaceGap {
 }
 
 #[component]
-pub fn Space(#[prop(optional)] gap: SpaceGap, children: Children) -> impl IntoView {
+pub fn Space(
+    #[prop(optional)] gap: SpaceGap,
+    #[prop(optional)] vertical: bool,
+    children: Children,
+) -> impl IntoView {
     let class_name = mount_style("space", || style_sheet_str!("./src/space/space.css"));
     let gap = match gap {
-        SpaceGap::SMALL => "gap: 4px 8px".into(),
-        SpaceGap::MEDIUM => "gap: 8px 12px".into(),
-        SpaceGap::LARGE => "gap: 12px 16px".into(),
-        SpaceGap::NUMBER(size) => format!("gap: {size}px {size}px"),
-        SpaceGap::TUPLE(x, y) => format!("gap: {x}px {y}px"),
+        SpaceGap::SMALL => "4px 8px".into(),
+        SpaceGap::MEDIUM => "8px 12px".into(),
+        SpaceGap::LARGE => "12px 16px".into(),
+        SpaceGap::NUMBER(size) => format!("{size}px {size}px"),
+        SpaceGap::TUPLE(x, y) => format!("{x}px {y}px"),
     };
 
     view! {
          class=class_name,
-        <div class="melt-space" style=format!("{gap};")>
+        <div class="melt-space" style:gap={gap} style:flex-direction=if vertical { "column" } else { "row" }>
             {
                 children().nodes.into_iter().map(|node| {
                     view! {