diff --git a/Cargo.toml b/Cargo.toml
index 1e76869b..514ad097 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -7,7 +7,6 @@ resolver = "2"
 [workspace.dependencies]
 gpui-component = { path = "crates/ui" }
 story = { path = "crates/story" }
-
 gpui = { git = "https://github.com/huacnlee/zed.git", branch = "webview" }
 
 anyhow = "1"
diff --git a/README.md b/README.md
index c4fbb60c..f67b5264 100644
--- a/README.md
+++ b/README.md
@@ -62,6 +62,14 @@ gpui = { git = "https://github.com/huacnlee/zed.git", branch = "webview" }
 gpui-component = { git = "https://github.com/longbridge/gpui-component.git" }
 ```
 
+### WebView
+
+GPUI Component have `WebView` element based on [Wry](https://github.com/tauri-apps/wry), this is an optional feature, you can enable it by feature flag.
+
+```toml
+gpui-component = { git = "https://github.com/longbridge/gpui-component.git", features = ["webview"] }
+```
+
 More usage can be found in [story](https://github.com/longbridge/gpui-component/tree/main/crates/story) directory.
 
 ### Icons
diff --git a/crates/story/Cargo.toml b/crates/story/Cargo.toml
index a5be1abe..b67d2ef1 100644
--- a/crates/story/Cargo.toml
+++ b/crates/story/Cargo.toml
@@ -10,7 +10,7 @@ charts-rs = "0.3"
 chrono = "0.4"
 fake = { version = "2.10.0", features = ["dummy"] }
 gpui.workspace = true
-gpui-component.workspace = true
+gpui-component = { workspace = true, features = ["webview"] }
 reqwest_client = { git = "https://github.com/huacnlee/zed.git", branch = "webview" }
 rand = "0.8"
 regex = "1"
diff --git a/crates/story/examples/webview.rs b/crates/story/examples/webview.rs
new file mode 100644
index 00000000..32ca357d
--- /dev/null
+++ b/crates/story/examples/webview.rs
@@ -0,0 +1,35 @@
+use gpui::*;
+use story::{Assets, WebViewStory};
+
+pub struct Example {
+    root: Entity<WebViewStory>,
+}
+
+impl Example {
+    pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
+        let root = WebViewStory::view(window, cx);
+
+        Self { root }
+    }
+
+    fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
+        cx.new(|cx| Self::new(window, cx))
+    }
+}
+
+impl Render for Example {
+    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
+        div().p_4().size_full().child(self.root.clone())
+    }
+}
+
+fn main() {
+    let app = Application::new().with_assets(Assets);
+
+    app.run(move |cx| {
+        story::init(cx);
+        cx.activate(true);
+
+        story::create_new_window("WebView Example", Example::view, cx);
+    });
+}
diff --git a/crates/ui/Cargo.toml b/crates/ui/Cargo.toml
index 4f2ad7e0..a45fefa8 100644
--- a/crates/ui/Cargo.toml
+++ b/crates/ui/Cargo.toml
@@ -11,6 +11,9 @@ keywords = ["ui", "desktop", "application", "GPUI"]
 [lib]
 doctest = false
 
+[features]
+webview = ["dep:wry"]
+
 [dependencies]
 gpui.workspace = true
 anyhow = "1"
@@ -35,7 +38,7 @@ usvg = { version = "0.44.0", default-features = false, features = [
   "text",
 ] }
 uuid = "1.10"
-wry = "0.48.0"
+wry = { version = "0.48.0", optional = true }
 # Markdown Parser
 markdown = "1.0.0-alpha.22"
 # HTML Parser
diff --git a/crates/ui/src/lib.rs b/crates/ui/src/lib.rs
index a7ed83dd..b2149a6e 100644
--- a/crates/ui/src/lib.rs
+++ b/crates/ui/src/lib.rs
@@ -48,10 +48,12 @@ pub mod tag;
 pub mod text;
 pub mod theme;
 pub mod tooltip;
+#[cfg(feature = "webview")]
 pub mod webview;
 
 use gpui::App;
 // re-export
+#[cfg(feature = "webview")]
 pub use wry;
 
 pub use crate::Disableable;