diff --git a/crates/gpui2/src/element.rs b/crates/gpui2/src/element.rs
index b9d312755af55dccc1fae5a343eb45dc616a346a..5220892885b780274a56b6102ee547841a4b9b41 100644
--- a/crates/gpui2/src/element.rs
+++ b/crates/gpui2/src/element.rs
@@ -65,25 +65,26 @@ pub struct GlobalElementId(SmallVec<[ElementId; 32]>);
 pub trait ParentComponent<V: 'static> {
     fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<V>; 2]>;
 
-    fn child(mut self, child: impl Component<V>) -> Self
+    fn child(mut self, child: impl Element<V>) -> Self
     where
         Self: Sized,
     {
-        self.children_mut().push(child.render());
+        self.children_mut().push(child.into_any());
         self
     }
 
-    fn children(mut self, iter: impl IntoIterator<Item = impl Component<V>>) -> Self
+    fn children(mut self, children: impl IntoIterator<Item = impl Element<V>>) -> Self
     where
         Self: Sized,
     {
         self.children_mut()
-            .extend(iter.into_iter().map(|item| item.render()));
+            .extend(children.into_iter().map(Element::into_any));
         self
     }
 }
 
 trait ElementObject<V> {
+    fn element_id(&self) -> Option<ElementId>;
     fn layout(&mut self, view_state: &mut V, cx: &mut ViewContext<V>) -> LayoutId;
     fn paint(&mut self, view_state: &mut V, cx: &mut ViewContext<V>);
     fn measure(
@@ -132,6 +133,10 @@ impl<V, E: Element<V>> DrawableElement<V, E> {
         }
     }
 
+    fn element_id(&self) -> Option<ElementId> {
+        self.element.as_ref()?.element_id()
+    }
+
     fn layout(&mut self, state: &mut V, cx: &mut ViewContext<V>) -> LayoutId {
         let (layout_id, frame_state) = if let Some(id) = self.element.as_ref().unwrap().element_id()
         {
@@ -256,6 +261,10 @@ where
     E: Element<V>,
     E::State: 'static,
 {
+    fn element_id(&self) -> Option<ElementId> {
+        self.as_ref().unwrap().element_id()
+    }
+
     fn layout(&mut self, view_state: &mut V, cx: &mut ViewContext<V>) -> LayoutId {
         DrawableElement::layout(self.as_mut().unwrap(), view_state, cx)
     }
@@ -302,6 +311,10 @@ impl<V> AnyElement<V> {
         AnyElement(Box::new(Some(DrawableElement::new(element))) as Box<dyn ElementObject<V>>)
     }
 
+    pub fn element_id(&self) -> Option<ElementId> {
+        self.0.element_id()
+    }
+
     pub fn layout(&mut self, view_state: &mut V, cx: &mut ViewContext<V>) -> LayoutId {
         self.0.layout(view_state, cx)
     }
@@ -332,6 +345,34 @@ impl<V> AnyElement<V> {
     }
 }
 
+impl<V: 'static> Element<V> for AnyElement<V> {
+    type State = ();
+
+    fn element_id(&self) -> Option<ElementId> {
+        AnyElement::element_id(self)
+    }
+
+    fn layout(
+        &mut self,
+        view_state: &mut V,
+        _: Option<Self::State>,
+        cx: &mut ViewContext<V>,
+    ) -> (LayoutId, Self::State) {
+        let layout_id = self.layout(view_state, cx);
+        (layout_id, ())
+    }
+
+    fn paint(
+        self,
+        bounds: Bounds<Pixels>,
+        view_state: &mut V,
+        _: &mut Self::State,
+        cx: &mut ViewContext<V>,
+    ) {
+        self.paint(view_state, cx);
+    }
+}
+
 pub trait Component<V> {
     fn render(self) -> AnyElement<V>;
 
@@ -426,3 +467,37 @@ where
         AnyElement::new(Some(self))
     }
 }
+
+// impl<V, E, F> Element<V> for F
+// where
+//     V: 'static,
+//     E: 'static + Component<V>,
+//     F: FnOnce(&mut V, &mut ViewContext<'_, V>) -> E + 'static,
+// {
+//     type State = Option<AnyElement<V>>;
+
+//     fn element_id(&self) -> Option<ElementId> {
+//         None
+//     }
+
+//     fn layout(
+//         &mut self,
+//         view_state: &mut V,
+//         element_state: Option<Self::State>,
+//         cx: &mut ViewContext<V>,
+//     ) -> (LayoutId, Self::State) {
+
+//         self(view_state)
+
+//     }
+
+//     fn paint(
+//         self,
+//         bounds: Bounds<Pixels>,
+//         view_state: &mut V,
+//         element_state: &mut Self::State,
+//         cx: &mut ViewContext<V>,
+//     ) {
+//         todo!()
+//     }
+// }
diff --git a/crates/gpui2/src/interactive.rs b/crates/gpui2/src/interactive.rs
index 80a89ef6257497459c848df60e68187a01e7142d..83bcc5c8c5c806ff3dddf6beebcf60fad86db209 100644
--- a/crates/gpui2/src/interactive.rs
+++ b/crates/gpui2/src/interactive.rs
@@ -307,12 +307,7 @@ mod test {
                     .key_context("parent")
                     .on_key_down(|this: &mut TestView, _, _, _| this.saw_key_down = true)
                     .on_action(|this: &mut TestView, _: &TestAction, _| this.saw_action = true)
-                    .child(|this: &mut Self, _cx: &mut ViewContext<Self>| {
-                        div()
-                            .key_context("nested")
-                            .track_focus(&this.focus_handle)
-                            .render()
-                    }),
+                    .child(div().key_context("nested").track_focus(&self.focus_handle)),
             )
         }
     }
diff --git a/crates/storybook2/src/stories/z_index.rs b/crates/storybook2/src/stories/z_index.rs
index 46ec0f4a3511ea2b3a3cc7999e203a62d35a01d6..02165db0cd8eb445323d2ed069eb730daa993b86 100644
--- a/crates/storybook2/src/stories/z_index.rs
+++ b/crates/storybook2/src/stories/z_index.rs
@@ -89,7 +89,7 @@ impl ZIndexExample {
         Self { z_index }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .relative()
             .size_full()
diff --git a/crates/theme2/src/story.rs b/crates/theme2/src/story.rs
index 4296d4f99c4e2f4dfad0cbf1b60eef90efa3d0d0..9cf78cf943e54b662803aee9d21396737c07a1d4 100644
--- a/crates/theme2/src/story.rs
+++ b/crates/theme2/src/story.rs
@@ -1,4 +1,4 @@
-use gpui::{div, Component, Div, ParentComponent, Styled, ViewContext};
+use gpui::{div, Component, Div, Element, ParentComponent, SharedString, Styled, ViewContext};
 
 use crate::ActiveTheme;
 
@@ -16,23 +16,26 @@ impl Story {
             .bg(cx.theme().colors().background)
     }
 
-    pub fn title<V: 'static>(cx: &mut ViewContext<V>, title: &str) -> impl Component<V> {
+    pub fn title<V: 'static>(cx: &mut ViewContext<V>, title: SharedString) -> impl Element<V> {
         div()
             .text_xl()
             .text_color(cx.theme().colors().text)
-            .child(title.to_owned())
+            .child(title)
     }
 
-    pub fn title_for<V: 'static, T>(cx: &mut ViewContext<V>) -> impl Component<V> {
-        Self::title(cx, std::any::type_name::<T>())
+    pub fn title_for<V: 'static, T>(cx: &mut ViewContext<V>) -> impl Element<V> {
+        Self::title(cx, std::any::type_name::<T>().into())
     }
 
-    pub fn label<V: 'static>(cx: &mut ViewContext<V>, label: &str) -> impl Component<V> {
+    pub fn label<V: 'static>(
+        cx: &mut ViewContext<V>,
+        label: impl Into<SharedString>,
+    ) -> impl Element<V> {
         div()
             .mt_4()
             .mb_2()
             .text_xs()
             .text_color(cx.theme().colors().text)
-            .child(label.to_owned())
+            .child(label.into())
     }
 }
diff --git a/crates/ui2/docs/hello-world.md b/crates/ui2/docs/hello-world.md
index e8ed3bb9445464e310e22dbc40d9773bf419d2b3..f48dd460b83abcf9bd3a9ccb6528adef06ddf04d 100644
--- a/crates/ui2/docs/hello-world.md
+++ b/crates/ui2/docs/hello-world.md
@@ -49,13 +49,13 @@ use gpui::hsla
 
 impl<V: 'static> TodoList<V> {
     // ...
-    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div().size_4().bg(hsla(50.0/360.0, 1.0, 0.5, 1.0))
     }
 }
 ~~~
 
-Every component needs a render method, and it should return `impl Component<V>`. This basic component will render a 16x16px yellow square on the screen.
+Every component needs a render method, and it should return `impl Element<V>`. This basic component will render a 16x16px yellow square on the screen.
 
 A couple of questions might come to mind:
 
@@ -87,7 +87,7 @@ We can access the current theme's colors like this:
 ~~~rust
 impl<V: 'static> TodoList<V> {
     // ...
-    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let color = cx.theme().colors()
 
         div().size_4().hsla(50.0/360.0, 1.0, 0.5, 1.0)
@@ -102,7 +102,7 @@ use gpui::hsla
 
 impl<V: 'static> TodoList<V> {
     // ...
-    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let color = cx.theme().colors()
 
         div().size_4().bg(color.surface)
@@ -117,7 +117,7 @@ use gpui::hsla
 
 impl<V: 'static> TodoList<V> {
     // ...
-    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let color = cx.theme().colors()
 
         div()
diff --git a/crates/ui2/src/components/avatar.rs b/crates/ui2/src/components/avatar.rs
index d083d8fd463e144e236e5c625caa92f237f3fce4..5ab00b33edf36e3d3b6513bbf2c32b07fc89459c 100644
--- a/crates/ui2/src/components/avatar.rs
+++ b/crates/ui2/src/components/avatar.rs
@@ -21,7 +21,7 @@ impl Avatar {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let mut img = img();
 
         if self.shape == Shape::Circle {
diff --git a/crates/ui2/src/components/button.rs b/crates/ui2/src/components/button.rs
index de055bcd5c3f185a7c049cb58eaa64f523fec9e5..b2c6893793e84dca509863801dc6689a10e30383 100644
--- a/crates/ui2/src/components/button.rs
+++ b/crates/ui2/src/components/button.rs
@@ -164,7 +164,7 @@ impl<V: 'static> Button<V> {
         self.icon.map(|i| IconElement::new(i).color(icon_color))
     }
 
-    pub fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    pub fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let (icon_color, label_color) = match (self.disabled, self.color) {
             (true, _) => (TextColor::Disabled, TextColor::Disabled),
             (_, None) => (TextColor::Default, TextColor::Default),
@@ -222,7 +222,7 @@ impl<V: 'static> ButtonGroup<V> {
         Self { buttons }
     }
 
-    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let mut el = h_stack().text_ui();
 
         for button in self.buttons {
diff --git a/crates/ui2/src/components/checkbox.rs b/crates/ui2/src/components/checkbox.rs
index 5b9db177858d8f47a518766ecce925096f5177b5..0b3141a9f336ac73522bcfdb5e560c1b6431f548 100644
--- a/crates/ui2/src/components/checkbox.rs
+++ b/crates/ui2/src/components/checkbox.rs
@@ -1,4 +1,4 @@
-use gpui::{div, prelude::*, Component, ElementId, Styled, ViewContext};
+use gpui::{div, prelude::*, Component, Element, ElementId, Styled, ViewContext};
 use std::sync::Arc;
 use theme2::ActiveTheme;
 
@@ -42,7 +42,7 @@ impl<V: 'static> Checkbox<V> {
         self
     }
 
-    pub fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    pub fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let group_id = format!("checkbox_group_{:?}", self.id);
 
         let icon = match self.checked {
diff --git a/crates/ui2/src/components/details.rs b/crates/ui2/src/components/details.rs
index f138290f17fd3b6fc325f0972f62f6aa6f996ed1..41b3e45a955c898803f1e9561c0ef5df94652bb2 100644
--- a/crates/ui2/src/components/details.rs
+++ b/crates/ui2/src/components/details.rs
@@ -27,7 +27,7 @@ impl<V: 'static> Details<V> {
         self
     }
 
-    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         v_stack()
             .p_1()
             .gap_0p5()
diff --git a/crates/ui2/src/components/divider.rs b/crates/ui2/src/components/divider.rs
index 5ebfc7a4ff234167ee2fed2f98acd88a4e423047..7025a99a9fc325f13683b8f90b61b035713f2a56 100644
--- a/crates/ui2/src/components/divider.rs
+++ b/crates/ui2/src/components/divider.rs
@@ -31,7 +31,7 @@ impl Divider {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .map(|this| match self.direction {
                 DividerDirection::Horizontal => {
diff --git a/crates/ui2/src/components/facepile.rs b/crates/ui2/src/components/facepile.rs
index efac4925f80a579bfc9deeca273fbf64aad10c5f..a3ec7db7b12aa864d556080a85f1225faccb56e1 100644
--- a/crates/ui2/src/components/facepile.rs
+++ b/crates/ui2/src/components/facepile.rs
@@ -13,7 +13,7 @@ impl Facepile {
         }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let player_count = self.players.len();
         let player_list = self.players.iter().enumerate().map(|(ix, player)| {
             let isnt_last = ix < player_count - 1;
diff --git a/crates/ui2/src/components/icon.rs b/crates/ui2/src/components/icon.rs
index 61aa23497856c001d521394233db20b9ee1ed4d6..7dc9385a4f4347bbb5cc374e230d5d0c7b79fac9 100644
--- a/crates/ui2/src/components/icon.rs
+++ b/crates/ui2/src/components/icon.rs
@@ -163,7 +163,7 @@ impl IconElement {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let svg_size = match self.size {
             IconSize::Small => rems(0.75),
             IconSize::Medium => rems(0.9375),
diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs
index 9b8548e3f9c6cf092f08f41bbda3bfc25293bc98..5bb26cdb916c55a1234bf1f5bbe6c548bf762a77 100644
--- a/crates/ui2/src/components/icon_button.rs
+++ b/crates/ui2/src/components/icon_button.rs
@@ -80,7 +80,7 @@ impl<V: 'static> IconButton<V> {
         self.on_click(move |this, cx| cx.dispatch_action(action.boxed_clone()))
     }
 
-    fn render(mut self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(mut self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let icon_color = match (self.state, self.color) {
             (InteractionState::Disabled, _) => TextColor::Disabled,
             (InteractionState::Active, _) => TextColor::Selected,
diff --git a/crates/ui2/src/components/indicator.rs b/crates/ui2/src/components/indicator.rs
index 83030ebbee066b213ab9594106b7c6610e7f64e3..02760852b14d4453c6bcf2d0a246d1896bc6113c 100644
--- a/crates/ui2/src/components/indicator.rs
+++ b/crates/ui2/src/components/indicator.rs
@@ -10,7 +10,7 @@ impl UnreadIndicator {
         Self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .rounded_full()
             .border_2()
diff --git a/crates/ui2/src/components/input.rs b/crates/ui2/src/components/input.rs
index 42de03db126f6b4d1060f739e350fae7c480b48f..1389d83ce2b07573b67a5815c3609a7dd6fe2581 100644
--- a/crates/ui2/src/components/input.rs
+++ b/crates/ui2/src/components/input.rs
@@ -55,7 +55,7 @@ impl Input {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let (input_bg, input_hover_bg, input_active_bg) = match self.variant {
             InputVariant::Ghost => (
                 cx.theme().colors().ghost_element_background,
diff --git a/crates/ui2/src/components/keybinding.rs b/crates/ui2/src/components/keybinding.rs
index 8da5273bf5f03afac68f898e3a52702568a92281..608e3ab0b810bd2c41fde03c60a7d0f55343fd02 100644
--- a/crates/ui2/src/components/keybinding.rs
+++ b/crates/ui2/src/components/keybinding.rs
@@ -24,7 +24,7 @@ impl KeyBinding {
         Self { key_binding }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .flex()
             .gap_2()
@@ -52,7 +52,7 @@ impl Key {
         Self { key: key.into() }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .px_2()
             .py_0()
diff --git a/crates/ui2/src/components/label.rs b/crates/ui2/src/components/label.rs
index 1beee5c8b731bdcf984e53818bec4e960f6f41da..c07c467000b9ad99010a4e547c0c2f7df8eb13b8 100644
--- a/crates/ui2/src/components/label.rs
+++ b/crates/ui2/src/components/label.rs
@@ -100,7 +100,7 @@ impl Label {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .when(self.strikethrough, |this| {
                 this.relative().child(
@@ -161,7 +161,7 @@ impl HighlightedLabel {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let highlight_color = cx.theme().colors().text_accent;
         let mut text_style = cx.text_style().clone();
 
diff --git a/crates/ui2/src/components/list.rs b/crates/ui2/src/components/list.rs
index b9508c54136aa424789f943ef40cf47d58122fae..8756d2934c97d052a8908de253218cd0c5cde4c6 100644
--- a/crates/ui2/src/components/list.rs
+++ b/crates/ui2/src/components/list.rs
@@ -57,7 +57,7 @@ impl ListHeader {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let disclosure_control = disclosure_control(self.toggle);
 
         let meta = match self.meta {
@@ -138,7 +138,7 @@ impl ListSubHeader {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         h_stack().flex_1().w_full().relative().py_1().child(
             div()
                 .h_6()
@@ -198,7 +198,7 @@ impl From<ListSubHeader> for ListItem {
 }
 
 impl ListItem {
-    fn render<V: 'static>(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         match self {
             ListItem::Entry(entry) => div().child(entry.render(view, cx)),
             ListItem::Separator(separator) => div().child(separator.render(view, cx)),
@@ -307,7 +307,7 @@ impl ListEntry {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let settings = user_settings(cx);
 
         let left_content = match self.left_slot.clone() {
@@ -385,7 +385,7 @@ impl ListSeparator {
         Self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div().h_px().w_full().bg(cx.theme().colors().border_variant)
     }
 }
@@ -425,7 +425,7 @@ impl List {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let list_content = match (self.items.is_empty(), self.toggle) {
             (false, _) => div().children(self.items),
             (true, Toggle::Toggled(false)) => div(),
diff --git a/crates/ui2/src/components/modal.rs b/crates/ui2/src/components/modal.rs
index c3d71a78d8dd873d1d898da43edb69fadca66188..ac4cb4017f8a98d4ff4cfe9aa4359fba3efa6769 100644
--- a/crates/ui2/src/components/modal.rs
+++ b/crates/ui2/src/components/modal.rs
@@ -38,7 +38,7 @@ impl<V: 'static> Modal<V> {
         self
     }
 
-    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         v_stack()
             .id(self.id.clone())
             .w_96()
diff --git a/crates/ui2/src/components/notification_toast.rs b/crates/ui2/src/components/notification_toast.rs
index aeb2aa6ed901f8f867109f6687e100d0dc061ccb..ec0d2ac216f270daf5569f6fa576fdabbf1258df 100644
--- a/crates/ui2/src/components/notification_toast.rs
+++ b/crates/ui2/src/components/notification_toast.rs
@@ -22,7 +22,7 @@ impl NotificationToast {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         h_stack()
             .z_index(5)
             .absolute()
diff --git a/crates/ui2/src/components/palette.rs b/crates/ui2/src/components/palette.rs
index 5adf794a5efcc6435a7f302fe94f0c59bf530b63..4b6daea0f9387cecc131e324e3f2abd6afb0f609 100644
--- a/crates/ui2/src/components/palette.rs
+++ b/crates/ui2/src/components/palette.rs
@@ -42,7 +42,7 @@ impl Palette {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         v_stack()
             .id(self.id.clone())
             .w_96()
@@ -135,7 +135,7 @@ impl PaletteItem {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .flex()
             .flex_row()
diff --git a/crates/ui2/src/components/panel.rs b/crates/ui2/src/components/panel.rs
index d9fc50dd923cc00084f257387efcbb1705efa9f1..88aca620dae1507a0f84649320c49108fe4da622 100644
--- a/crates/ui2/src/components/panel.rs
+++ b/crates/ui2/src/components/panel.rs
@@ -92,7 +92,7 @@ impl<V: 'static> Panel<V> {
         self
     }
 
-    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let current_size = self.width.unwrap_or(self.initial_width);
 
         v_stack()
diff --git a/crates/ui2/src/components/player_stack.rs b/crates/ui2/src/components/player_stack.rs
index 1a1231e6c4567e9e45cf98bc6e46038626a69309..b883f76d35da89bb64b8398b884187b19bd75741 100644
--- a/crates/ui2/src/components/player_stack.rs
+++ b/crates/ui2/src/components/player_stack.rs
@@ -13,7 +13,7 @@ impl PlayerStack {
         }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let player = self.player_with_call_status.get_player();
 
         let followers = self
diff --git a/crates/ui2/src/components/tab.rs b/crates/ui2/src/components/tab.rs
index 820fe5b361c93560dc7c208313ac80f7b23c069f..7238dbc3371193c78726bad0763818407dcbc9b9 100644
--- a/crates/ui2/src/components/tab.rs
+++ b/crates/ui2/src/components/tab.rs
@@ -86,7 +86,7 @@ impl Tab {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let has_fs_conflict = self.fs_status == FileSystemStatus::Conflict;
         let is_deleted = self.fs_status == FileSystemStatus::Deleted;
 
diff --git a/crates/ui2/src/components/toast.rs b/crates/ui2/src/components/toast.rs
index 0fcfe6038b97e3b6ba8cc3f88db8cd12f8b2bfc0..08e850d2a2b56a24e41400d3bc81d0041e7f8bc1 100644
--- a/crates/ui2/src/components/toast.rs
+++ b/crates/ui2/src/components/toast.rs
@@ -21,12 +21,41 @@ pub enum ToastOrigin {
 /// they are actively showing the a process in progress.
 ///
 /// Only one toast may be visible at a time.
-#[derive(Component)]
 pub struct Toast<V: 'static> {
     origin: ToastOrigin,
     children: SmallVec<[AnyElement<V>; 2]>,
 }
 
+impl<V: 'static> Element<V> for Toast<V> {
+    type State = Option<AnyElement<V>>;
+
+    fn element_id(&self) -> Option<ElementId> {
+        None
+    }
+
+    fn layout(
+        &mut self,
+        view_state: &mut V,
+        _element_state: Option<Self::State>,
+        cx: &mut ViewContext<V>,
+    ) -> (gpui::LayoutId, Self::State) {
+        let mut element = self.render(view_state, cx).into_any();
+        let layout_id = element.layout(view_state, cx);
+        (layout_id, Some(element))
+    }
+
+    fn paint(
+        self,
+        bounds: gpui::Bounds<gpui::Pixels>,
+        view_state: &mut V,
+        element: &mut Self::State,
+        cx: &mut ViewContext<V>,
+    ) {
+        let element = element.take().unwrap();
+        element.paint(view_state, cx);
+    }
+}
+
 impl<V: 'static> Toast<V> {
     pub fn new(origin: ToastOrigin) -> Self {
         Self {
@@ -35,7 +64,7 @@ impl<V: 'static> Toast<V> {
         }
     }
 
-    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let mut div = div();
 
         if self.origin == ToastOrigin::Bottom {
diff --git a/crates/ui2/src/components/toggle.rs b/crates/ui2/src/components/toggle.rs
index 8388e2753108c5f3cbec688dbae1ea61f985a597..5919a19fc613d27b6561a2feb2fabd2ea3212c2d 100644
--- a/crates/ui2/src/components/toggle.rs
+++ b/crates/ui2/src/components/toggle.rs
@@ -1,4 +1,4 @@
-use gpui::{div, Component, ParentComponent};
+use gpui::{div, Component, Element, ParentComponent};
 
 use crate::{Icon, IconElement, IconSize, TextColor};
 
@@ -44,7 +44,7 @@ impl From<bool> for Toggle {
     }
 }
 
-pub fn disclosure_control<V: 'static>(toggle: Toggle) -> impl Component<V> {
+pub fn disclosure_control<V: 'static>(toggle: Toggle) -> impl Element<V> {
     match (toggle.is_toggleable(), toggle.is_toggled()) {
         (false, _) => div(),
         (_, true) => div().child(
diff --git a/crates/ui2/src/components/tool_divider.rs b/crates/ui2/src/components/tool_divider.rs
index 8a9bbad97f1938c86660a877c8d7562f26b2eb2a..ca443ccb7fb5240e2f5506b1a43834782ed6deeb 100644
--- a/crates/ui2/src/components/tool_divider.rs
+++ b/crates/ui2/src/components/tool_divider.rs
@@ -8,7 +8,7 @@ impl ToolDivider {
         Self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div().w_px().h_3().bg(cx.theme().colors().border)
     }
 }
diff --git a/crates/ui2/src/story.rs b/crates/ui2/src/story.rs
index c98cfa012f261c8a3e77251370e2265e057158ec..b5fef606b716059c835634be1998ccb0203b0017 100644
--- a/crates/ui2/src/story.rs
+++ b/crates/ui2/src/story.rs
@@ -15,18 +15,18 @@ impl Story {
             .bg(cx.theme().colors().background)
     }
 
-    pub fn title<V: 'static>(cx: &mut ViewContext<V>, title: &str) -> impl Component<V> {
+    pub fn title<V: 'static>(cx: &mut ViewContext<V>, title: &str) -> impl Element<V> {
         div()
             .text_xl()
             .text_color(cx.theme().colors().text)
             .child(title.to_owned())
     }
 
-    pub fn title_for<V: 'static, T>(cx: &mut ViewContext<V>) -> impl Component<V> {
+    pub fn title_for<V: 'static, T>(cx: &mut ViewContext<V>) -> impl Element<V> {
         Self::title(cx, std::any::type_name::<T>())
     }
 
-    pub fn label<V: 'static>(cx: &mut ViewContext<V>, label: &str) -> impl Component<V> {
+    pub fn label<V: 'static>(cx: &mut ViewContext<V>, label: &str) -> impl Element<V> {
         div()
             .mt_4()
             .mb_2()
diff --git a/crates/ui2/src/to_extract/assistant_panel.rs b/crates/ui2/src/to_extract/assistant_panel.rs
index f111dad83024f539d033701bfab66a7c10dbb446..708d271b5b7506ad1c1649dd08aeb72b781327ce 100644
--- a/crates/ui2/src/to_extract/assistant_panel.rs
+++ b/crates/ui2/src/to_extract/assistant_panel.rs
@@ -21,7 +21,7 @@ impl AssistantPanel {
         self
     }
 
-    fn render<V: 'static>(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         Panel::new(self.id.clone(), cx)
             .children(vec![div()
                 .flex()
diff --git a/crates/ui2/src/to_extract/breadcrumb.rs b/crates/ui2/src/to_extract/breadcrumb.rs
index fd43a5b3bf58556ca003e00114b1f060f82ba453..699089005445be28e90c7e48bb4c12c89a1e8d7a 100644
--- a/crates/ui2/src/to_extract/breadcrumb.rs
+++ b/crates/ui2/src/to_extract/breadcrumb.rs
@@ -22,7 +22,7 @@ impl Breadcrumb {
             .text_color(cx.theme().colors().text_muted)
     }
 
-    fn render<V: 'static>(self, view_state: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, view_state: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let symbols_len = self.symbols.len();
 
         h_stack()
diff --git a/crates/ui2/src/to_extract/buffer.rs b/crates/ui2/src/to_extract/buffer.rs
index aa4bebc9d5d5cdaa23f1429af7d64b71751c99c0..c8223daf2fcc6fe920bcfd3c40142de76aed9d02 100644
--- a/crates/ui2/src/to_extract/buffer.rs
+++ b/crates/ui2/src/to_extract/buffer.rs
@@ -154,7 +154,7 @@ impl Buffer {
         self
     }
 
-    fn render_row<V: 'static>(row: BufferRow, cx: &WindowContext) -> impl Component<V> {
+    fn render_row<V: 'static>(row: BufferRow, cx: &WindowContext) -> impl Element<V> {
         let line_background = if row.current {
             cx.theme().colors().editor_active_line_background
         } else {
@@ -202,7 +202,7 @@ impl Buffer {
             }))
     }
 
-    fn render_rows<V: 'static>(&self, cx: &WindowContext) -> Vec<impl Component<V>> {
+    fn render_rows<V: 'static>(&self, cx: &WindowContext) -> Vec<impl Element<V>> {
         match &self.rows {
             Some(rows) => rows
                 .rows
@@ -213,7 +213,7 @@ impl Buffer {
         }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let rows = self.render_rows(cx);
 
         v_stack()
diff --git a/crates/ui2/src/to_extract/chat_panel.rs b/crates/ui2/src/to_extract/chat_panel.rs
index 7e2846a3f6b66f8079672a8edab09dd00c19f120..528e40f903e9cb034587335b276d842bdbda665a 100644
--- a/crates/ui2/src/to_extract/chat_panel.rs
+++ b/crates/ui2/src/to_extract/chat_panel.rs
@@ -21,7 +21,7 @@ impl ChatPanel {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .id(self.element_id.clone())
             .flex()
@@ -83,7 +83,7 @@ impl ChatMessage {
         }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .flex()
             .flex_col()
diff --git a/crates/ui2/src/to_extract/collab_panel.rs b/crates/ui2/src/to_extract/collab_panel.rs
index 256a648c0d42e39cfaccc9c4115d0ff431df8c85..55efbb5ec53991c3a19376ac7822feab881cbba4 100644
--- a/crates/ui2/src/to_extract/collab_panel.rs
+++ b/crates/ui2/src/to_extract/collab_panel.rs
@@ -14,7 +14,7 @@ impl CollabPanel {
         Self { id: id.into() }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         v_stack()
             .id(self.id.clone())
             .h_full()
diff --git a/crates/ui2/src/to_extract/command_palette.rs b/crates/ui2/src/to_extract/command_palette.rs
index 8a9461c796d053e45fb768f3db4c14f1364f0d27..353e1daac8e17c617df2013c1801171cf43c0596 100644
--- a/crates/ui2/src/to_extract/command_palette.rs
+++ b/crates/ui2/src/to_extract/command_palette.rs
@@ -11,7 +11,7 @@ impl CommandPalette {
         Self { id: id.into() }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div().id(self.id.clone()).child(
             Palette::new("palette")
                 .items(example_editor_actions())
diff --git a/crates/ui2/src/to_extract/copilot.rs b/crates/ui2/src/to_extract/copilot.rs
index c5622f5be6ddcbfe735b6befa4abd8d8ea47ae95..b07c562c1386c31542bf99c34a7c93641d0f127a 100644
--- a/crates/ui2/src/to_extract/copilot.rs
+++ b/crates/ui2/src/to_extract/copilot.rs
@@ -10,7 +10,7 @@ impl CopilotModal {
         Self { id: id.into() }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div().id(self.id.clone()).child(
             Modal::new("some-id")
                 .title("Connect Copilot to Zed")
diff --git a/crates/ui2/src/to_extract/language_selector.rs b/crates/ui2/src/to_extract/language_selector.rs
index 694ca78e9c92353a7097f33d7ec133278b063bb0..e05145e8c8776dfad534ddc0d47bc8fafcf3c9b0 100644
--- a/crates/ui2/src/to_extract/language_selector.rs
+++ b/crates/ui2/src/to_extract/language_selector.rs
@@ -11,7 +11,7 @@ impl LanguageSelector {
         Self { id: id.into() }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div().id(self.id.clone()).child(
             Palette::new("palette")
                 .items(vec![
diff --git a/crates/ui2/src/to_extract/multi_buffer.rs b/crates/ui2/src/to_extract/multi_buffer.rs
index 78a22d51d078bc6293e849f8898b53ee2c363109..186303365bc5ac927e5c7ef7950785d60f3e6b16 100644
--- a/crates/ui2/src/to_extract/multi_buffer.rs
+++ b/crates/ui2/src/to_extract/multi_buffer.rs
@@ -11,7 +11,7 @@ impl MultiBuffer {
         Self { buffers }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         v_stack()
             .w_full()
             .h_full()
diff --git a/crates/ui2/src/to_extract/notifications_panel.rs b/crates/ui2/src/to_extract/notifications_panel.rs
index f56194fc473d90507fba44b1cb3814b3f1b814b7..fa7f8c2bd58c50af4271d6fd2d5b7b36aef7be60 100644
--- a/crates/ui2/src/to_extract/notifications_panel.rs
+++ b/crates/ui2/src/to_extract/notifications_panel.rs
@@ -15,7 +15,7 @@ impl NotificationsPanel {
         Self { id: id.into() }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .id(self.id.clone())
             .flex()
@@ -241,7 +241,7 @@ impl<V> Notification<V> {
         self
     }
 
-    fn render_meta_items(&self, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render_meta_items(&self, cx: &mut ViewContext<V>) -> impl Element<V> {
         if let Some(meta) = &self.meta {
             h_stack().children(
                 meta.items
@@ -260,14 +260,14 @@ impl<V> Notification<V> {
         }
     }
 
-    fn render_slot(&self, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render_slot(&self, cx: &mut ViewContext<V>) -> impl Element<V> {
         match &self.slot {
             ActorOrIcon::Actor(actor) => Avatar::new(actor.avatar.clone()).render(),
             ActorOrIcon::Icon(icon) => IconElement::new(icon.clone()).render(),
         }
     }
 
-    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .relative()
             .id(self.id.clone())
diff --git a/crates/ui2/src/to_extract/panes.rs b/crates/ui2/src/to_extract/panes.rs
index 288419d8bf8ebdb1af71b668684ebf38619ce73b..3b75d55d7791f69019b765c5ca508ad7d6c67322 100644
--- a/crates/ui2/src/to_extract/panes.rs
+++ b/crates/ui2/src/to_extract/panes.rs
@@ -35,7 +35,7 @@ impl<V: 'static> Pane<V> {
         self
     }
 
-    fn render(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .id(self.id.clone())
             .flex()
@@ -89,7 +89,7 @@ impl<V: 'static> PaneGroup<V> {
         }
     }
 
-    fn render(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         if !self.panes.is_empty() {
             let el = div()
                 .flex()
diff --git a/crates/ui2/src/to_extract/project_panel.rs b/crates/ui2/src/to_extract/project_panel.rs
index 018f9a4bf10154504df580a1c95e31fe0a4a1016..ccaaecf2cec78c3541893916755d9466983057d7 100644
--- a/crates/ui2/src/to_extract/project_panel.rs
+++ b/crates/ui2/src/to_extract/project_panel.rs
@@ -14,7 +14,7 @@ impl ProjectPanel {
         Self { id: id.into() }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .id(self.id.clone())
             .flex()
diff --git a/crates/ui2/src/to_extract/recent_projects.rs b/crates/ui2/src/to_extract/recent_projects.rs
index 3d4f551490a47ef5eab616ebf1e2b1f6f0a0a726..2db7d94eacafa4ec879a5a0e06ffc911950cfec2 100644
--- a/crates/ui2/src/to_extract/recent_projects.rs
+++ b/crates/ui2/src/to_extract/recent_projects.rs
@@ -11,7 +11,7 @@ impl RecentProjects {
         Self { id: id.into() }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div().id(self.id.clone()).child(
             Palette::new("palette")
                 .items(vec![
diff --git a/crates/ui2/src/to_extract/tab_bar.rs b/crates/ui2/src/to_extract/tab_bar.rs
index 3b4b5cc2205ebd015ba40b050d058384897be1e4..8888620dae61decfb0efb70cf5c48f9e4a7be95a 100644
--- a/crates/ui2/src/to_extract/tab_bar.rs
+++ b/crates/ui2/src/to_extract/tab_bar.rs
@@ -23,7 +23,7 @@ impl TabBar {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let (can_navigate_back, can_navigate_forward) = self.can_navigate;
 
         div()
diff --git a/crates/ui2/src/to_extract/terminal.rs b/crates/ui2/src/to_extract/terminal.rs
index 6c36f35152d8082a3da7fda855a5fc58084b3ae2..d6399860820fea8459a4930434a387c2a8d1791a 100644
--- a/crates/ui2/src/to_extract/terminal.rs
+++ b/crates/ui2/src/to_extract/terminal.rs
@@ -11,7 +11,7 @@ impl Terminal {
         Self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let can_navigate_back = true;
         let can_navigate_forward = false;
 
diff --git a/crates/ui2/src/to_extract/theme_selector.rs b/crates/ui2/src/to_extract/theme_selector.rs
index 7f911b50bfa8d9b6273126053a7e791e41754989..175d1261338bfd4fb779e34925b0fc851823d2ea 100644
--- a/crates/ui2/src/to_extract/theme_selector.rs
+++ b/crates/ui2/src/to_extract/theme_selector.rs
@@ -11,7 +11,7 @@ impl ThemeSelector {
         Self { id: id.into() }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div().child(
             Palette::new(self.id.clone())
                 .items(vec![
diff --git a/crates/ui2/src/to_extract/toolbar.rs b/crates/ui2/src/to_extract/toolbar.rs
index 81918f34a790b1ec91aa4ac33cad210972b191cf..b7738ffb1cc3eff1d338d314d340acf7d418f89a 100644
--- a/crates/ui2/src/to_extract/toolbar.rs
+++ b/crates/ui2/src/to_extract/toolbar.rs
@@ -20,7 +20,7 @@ impl<V: 'static> Toolbar<V> {
         }
     }
 
-    pub fn left_item(mut self, child: impl Component<V>) -> Self
+    pub fn left_item(mut self, child: impl Element<V>) -> Self
     where
         Self: Sized,
     {
@@ -28,7 +28,7 @@ impl<V: 'static> Toolbar<V> {
         self
     }
 
-    pub fn left_items(mut self, iter: impl IntoIterator<Item = impl Component<V>>) -> Self
+    pub fn left_items(mut self, iter: impl IntoIterator<Item = impl Element<V>>) -> Self
     where
         Self: Sized,
     {
@@ -37,7 +37,7 @@ impl<V: 'static> Toolbar<V> {
         self
     }
 
-    pub fn right_item(mut self, child: impl Component<V>) -> Self
+    pub fn right_item(mut self, child: impl Element<V>) -> Self
     where
         Self: Sized,
     {
@@ -45,7 +45,7 @@ impl<V: 'static> Toolbar<V> {
         self
     }
 
-    pub fn right_items(mut self, iter: impl IntoIterator<Item = impl Component<V>>) -> Self
+    pub fn right_items(mut self, iter: impl IntoIterator<Item = impl Element<V>>) -> Self
     where
         Self: Sized,
     {
@@ -54,7 +54,7 @@ impl<V: 'static> Toolbar<V> {
         self
     }
 
-    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .bg(cx.theme().colors().toolbar_background)
             .p_2()
diff --git a/crates/ui2/src/to_extract/traffic_lights.rs b/crates/ui2/src/to_extract/traffic_lights.rs
index 245ff377f2146579f5532123a456f2f1ae498cfc..8cab5594e6ba06ee7dd2dd268ec4c0cb5b23d412 100644
--- a/crates/ui2/src/to_extract/traffic_lights.rs
+++ b/crates/ui2/src/to_extract/traffic_lights.rs
@@ -21,7 +21,7 @@ impl TrafficLight {
         }
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         let system_colors = &cx.theme().styles.system;
 
         let fill = match (self.window_has_focus, self.color) {
@@ -52,7 +52,7 @@ impl TrafficLights {
         self
     }
 
-    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Element<V> {
         div()
             .flex()
             .items_center()