diff --git a/crates/copilot2/src/sign_in.rs b/crates/copilot2/src/sign_in.rs
index ab326a88195e610ae264b82f00a227325a5a8ad7..57f248aa52486d8c04672eeef8d33e5acda2a52c 100644
--- a/crates/copilot2/src/sign_in.rs
+++ b/crates/copilot2/src/sign_in.rs
@@ -106,7 +106,7 @@
 //         data: &PromptUserDeviceFlow,
 //         style: &theme::Copilot,
 //         cx: &mut ViewContext<Self>,
-//     ) -> impl Element<Self> {
+//     ) -> impl IntoAnyElement<Self> {
 //         let copied = cx
 //             .read_from_clipboard()
 //             .map(|item| item.text() == &data.user_code)
diff --git a/crates/gpui2/src/element.rs b/crates/gpui2/src/element.rs
index a6efbe52eb3223af3e1444a744574bdce856eea3..15d29a7c42ce404277e156490fe0b2d6dd31cecc 100644
--- a/crates/gpui2/src/element.rs
+++ b/crates/gpui2/src/element.rs
@@ -3,36 +3,37 @@ use derive_more::{Deref, DerefMut};
 pub(crate) use smallvec::SmallVec;
 use std::{any::Any, mem};
 
-pub trait Element: IntoAnyElement<Self::ViewState> {
-    type ViewState: 'static;
+pub trait Element<V: 'static> {
     type ElementState: 'static;
 
     fn id(&self) -> Option<ElementId>;
 
+    /// Called to initialize this element for the current frame. If this
+    /// element had state in a previous frame, it will be passed in for the 3rd argument.
     fn initialize(
         &mut self,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> Self::ElementState;
     // where
-    //     Self::ViewState: Any + Send + Sync;
+    //     V: Any + Send + Sync;
 
     fn layout(
         &mut self,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> LayoutId;
     // where
-    //     Self::ViewState: Any + Send + Sync;
+    //     V: Any + Send + Sync;
 
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     );
 
     // where
@@ -42,26 +43,23 @@ pub trait Element: IntoAnyElement<Self::ViewState> {
 #[derive(Deref, DerefMut, Default, Clone, Debug, Eq, PartialEq, Hash)]
 pub struct GlobalElementId(SmallVec<[ElementId; 32]>);
 
-pub trait ParentElement: Element {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]>;
+pub trait ParentElement<V: 'static> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<V>; 2]>;
 
-    fn child(mut self, child: impl IntoAnyElement<Self::ViewState>) -> Self
+    fn child(mut self, child: impl Component<V>) -> Self
     where
         Self: Sized,
     {
-        self.children_mut().push(child.into_any());
+        self.children_mut().push(child.render());
         self
     }
 
-    fn children(
-        mut self,
-        iter: impl IntoIterator<Item = impl IntoAnyElement<Self::ViewState>>,
-    ) -> Self
+    fn children(mut self, iter: impl IntoIterator<Item = impl Component<V>>) -> Self
     where
         Self: Sized,
     {
         self.children_mut()
-            .extend(iter.into_iter().map(|item| item.into_any()));
+            .extend(iter.into_iter().map(|item| item.render()));
         self
     }
 }
@@ -72,7 +70,7 @@ trait ElementObject<V> {
     fn paint(&mut self, view_state: &mut V, cx: &mut ViewContext<V>);
 }
 
-struct RenderedElement<E: Element> {
+struct RenderedElement<V: 'static, E: Element<V>> {
     element: E,
     phase: ElementRenderPhase<E::ElementState>,
 }
@@ -94,7 +92,7 @@ enum ElementRenderPhase<V> {
 /// Internal struct that wraps an element to store Layout and ElementState after the element is rendered.
 /// It's allocated as a trait object to erase the element type and wrapped in AnyElement<E::State> for
 /// improved usability.
-impl<E: Element> RenderedElement<E> {
+impl<V, E: Element<V>> RenderedElement<V, E> {
     fn new(element: E) -> Self {
         RenderedElement {
             element,
@@ -103,13 +101,13 @@ impl<E: Element> RenderedElement<E> {
     }
 }
 
-impl<E> ElementObject<E::ViewState> for RenderedElement<E>
+impl<V, E> ElementObject<V> for RenderedElement<V, E>
 where
-    E: Element,
+    E: Element<V>,
     // E::ViewState: Any + Send + Sync,
     E::ElementState: Any + Send + Sync,
 {
-    fn initialize(&mut self, view_state: &mut E::ViewState, cx: &mut ViewContext<E::ViewState>) {
+    fn initialize(&mut self, view_state: &mut V, cx: &mut ViewContext<V>) {
         let frame_state = if let Some(id) = self.element.id() {
             cx.with_element_state(id, |element_state, cx| {
                 let element_state = self.element.initialize(view_state, element_state, cx);
@@ -124,7 +122,7 @@ where
         self.phase = ElementRenderPhase::Initialized { frame_state };
     }
 
-    fn layout(&mut self, state: &mut E::ViewState, cx: &mut ViewContext<E::ViewState>) -> LayoutId {
+    fn layout(&mut self, state: &mut V, cx: &mut ViewContext<V>) -> LayoutId {
         let layout_id;
         let mut frame_state;
         match mem::take(&mut self.phase) {
@@ -154,7 +152,7 @@ where
         layout_id
     }
 
-    fn paint(&mut self, view_state: &mut E::ViewState, cx: &mut ViewContext<E::ViewState>) {
+    fn paint(&mut self, view_state: &mut V, cx: &mut ViewContext<V>) {
         self.phase = match mem::take(&mut self.phase) {
             ElementRenderPhase::LayoutRequested {
                 layout_id,
@@ -182,11 +180,15 @@ where
 
 pub struct AnyElement<V>(Box<dyn ElementObject<V> + Send + Sync>);
 
+unsafe impl<V> Send for AnyElement<V> {}
+unsafe impl<V> Sync for AnyElement<V> {}
+
 impl<V> AnyElement<V> {
     pub fn new<E>(element: E) -> Self
     where
+        V: 'static,
         E: 'static + Send + Sync,
-        E: Element<ViewState = V>,
+        E: Element<V>,
         E::ElementState: Any + Send + Sync,
     {
         AnyElement(Box::new(RenderedElement::new(element)))
@@ -205,12 +207,88 @@ impl<V> AnyElement<V> {
     }
 }
 
-pub trait IntoAnyElement<V> {
-    fn into_any(self) -> AnyElement<V>;
+pub trait Component<V> {
+    fn render(self) -> AnyElement<V>;
+
+    fn when(mut self, condition: bool, then: impl FnOnce(Self) -> Self) -> Self
+    where
+        Self: Sized,
+    {
+        if condition {
+            self = then(self);
+        }
+        self
+    }
 }
 
-impl<V> IntoAnyElement<V> for AnyElement<V> {
-    fn into_any(self) -> AnyElement<V> {
+impl<V> Component<V> for AnyElement<V> {
+    fn render(self) -> AnyElement<V> {
         self
     }
 }
+
+impl<V, E, F> Element<V> for Option<F>
+where
+    V: 'static,
+    E: 'static + Component<V> + Send + Sync,
+    F: FnOnce(&mut V, &mut ViewContext<'_, '_, V>) -> E + Send + Sync + 'static,
+{
+    type ElementState = AnyElement<V>;
+
+    fn id(&self) -> Option<ElementId> {
+        None
+    }
+
+    fn initialize(
+        &mut self,
+        view_state: &mut V,
+        _rendered_element: Option<Self::ElementState>,
+        cx: &mut ViewContext<V>,
+    ) -> Self::ElementState {
+        let render = self.take().unwrap();
+        let mut rendered_element = (render)(view_state, cx).render();
+        rendered_element.initialize(view_state, cx);
+        rendered_element
+    }
+
+    fn layout(
+        &mut self,
+        view_state: &mut V,
+        rendered_element: &mut Self::ElementState,
+        cx: &mut ViewContext<V>,
+    ) -> LayoutId {
+        rendered_element.layout(view_state, cx)
+    }
+
+    fn paint(
+        &mut self,
+        _bounds: Bounds<Pixels>,
+        view_state: &mut V,
+        rendered_element: &mut Self::ElementState,
+        cx: &mut ViewContext<V>,
+    ) {
+        rendered_element.paint(view_state, cx)
+    }
+}
+
+impl<V, E, F> Component<V> for Option<F>
+where
+    V: 'static,
+    E: 'static + Component<V> + Send + Sync,
+    F: FnOnce(&mut V, &mut ViewContext<'_, '_, V>) -> E + Send + Sync + 'static,
+{
+    fn render(self) -> AnyElement<V> {
+        AnyElement::new(self)
+    }
+}
+
+impl<V, E, F> Component<V> for F
+where
+    V: 'static,
+    E: 'static + Component<V> + Send + Sync,
+    F: FnOnce(&mut V, &mut ViewContext<'_, '_, V>) -> E + Send + Sync + 'static,
+{
+    fn render(self) -> AnyElement<V> {
+        AnyElement::new(Some(self))
+    }
+}
diff --git a/crates/gpui2/src/elements/div.rs b/crates/gpui2/src/elements/div.rs
index 71196eadcae2b7e49ed195eae298287d4e1693ce..6fe10d94a31324984df8431c13a0747d704110b4 100644
--- a/crates/gpui2/src/elements/div.rs
+++ b/crates/gpui2/src/elements/div.rs
@@ -1,7 +1,7 @@
 use crate::{
-    point, AnyElement, BorrowWindow, Bounds, Element, ElementFocus, ElementId, ElementInteraction,
-    FocusDisabled, FocusEnabled, FocusHandle, FocusListeners, Focusable, GlobalElementId,
-    GroupBounds, InteractiveElementState, IntoAnyElement, LayoutId, Overflow, ParentElement,
+    point, AnyElement, BorrowWindow, Bounds, Component, Element, ElementFocus, ElementId,
+    ElementInteraction, FocusDisabled, FocusEnabled, FocusHandle, FocusListeners, Focusable,
+    GlobalElementId, GroupBounds, InteractiveElementState, LayoutId, Overflow, ParentElement,
     Pixels, Point, SharedString, StatefulInteraction, StatefulInteractive, StatelessInteraction,
     StatelessInteractive, Style, StyleRefinement, Styled, ViewContext,
 };
@@ -160,7 +160,7 @@ impl<V: 'static> Div<V, StatelessInteraction<V>, FocusDisabled> {
     }
 }
 
-impl<V, I> Focusable for Div<V, I, FocusEnabled<V>>
+impl<V, I> Focusable<V> for Div<V, I, FocusEnabled<V>>
 where
     V: 'static,
     I: ElementInteraction<V>,
@@ -189,12 +189,11 @@ pub struct DivState {
     child_layout_ids: SmallVec<[LayoutId; 4]>,
 }
 
-impl<V, I, F> Element for Div<V, I, F>
+impl<V, I, F> Element<V> for Div<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    type ViewState = V;
     type ElementState = DivState;
 
     fn id(&self) -> Option<ElementId> {
@@ -205,9 +204,9 @@ where
 
     fn initialize(
         &mut self,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> Self::ElementState {
         let mut element_state = element_state.unwrap_or_default();
         self.focus
@@ -224,9 +223,9 @@ where
 
     fn layout(
         &mut self,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> LayoutId {
         let style = self.compute_style(Bounds::default(), element_state, cx);
         style.apply_text_style(cx, |cx| {
@@ -245,9 +244,9 @@ where
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) {
         self.with_element_id(cx, |this, _global_id, cx| {
             if let Some(group) = this.group.clone() {
@@ -304,23 +303,23 @@ where
     }
 }
 
-impl<V, I, F> IntoAnyElement<V> for Div<V, I, F>
+impl<V, I, F> Component<V> for Div<V, I, F>
 where
     // V: Any + Send + Sync,
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    fn into_any(self) -> AnyElement<V> {
+    fn render(self) -> AnyElement<V> {
         AnyElement::new(self)
     }
 }
 
-impl<V, I, F> ParentElement for Div<V, I, F>
+impl<V, I, F> ParentElement<V> for Div<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<V>; 2]> {
         &mut self.children
     }
 }
@@ -335,7 +334,7 @@ where
     }
 }
 
-impl<V, I, F> StatelessInteractive for Div<V, I, F>
+impl<V, I, F> StatelessInteractive<V> for Div<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
@@ -345,11 +344,11 @@ where
     }
 }
 
-impl<V, F> StatefulInteractive for Div<V, StatefulInteraction<V>, F>
+impl<V, F> StatefulInteractive<V> for Div<V, StatefulInteraction<V>, F>
 where
     F: ElementFocus<V>,
 {
-    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<Self::ViewState> {
+    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<V> {
         &mut self.interaction
     }
 }
diff --git a/crates/gpui2/src/elements/img.rs b/crates/gpui2/src/elements/img.rs
index adce6aea6b6cd4eb0aaeef019faea1f351c0952b..747e573ea566ec882aa965c3efa0cc01cf6fbf70 100644
--- a/crates/gpui2/src/elements/img.rs
+++ b/crates/gpui2/src/elements/img.rs
@@ -1,6 +1,6 @@
 use crate::{
-    div, AnyElement, BorrowWindow, Bounds, Div, DivState, Element, ElementFocus, ElementId,
-    ElementInteraction, FocusDisabled, FocusEnabled, FocusListeners, Focusable, IntoAnyElement,
+    div, AnyElement, BorrowWindow, Bounds, Component, Div, DivState, Element, ElementFocus,
+    ElementId, ElementInteraction, FocusDisabled, FocusEnabled, FocusListeners, Focusable,
     LayoutId, Pixels, SharedString, StatefulInteraction, StatefulInteractive, StatelessInteraction,
     StatelessInteractive, StyleRefinement, Styled, ViewContext,
 };
@@ -55,22 +55,21 @@ where
     }
 }
 
-impl<V, I, F> IntoAnyElement<V> for Img<V, I, F>
+impl<V, I, F> Component<V> for Img<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    fn into_any(self) -> AnyElement<V> {
+    fn render(self) -> AnyElement<V> {
         AnyElement::new(self)
     }
 }
 
-impl<V, I, F> Element for Img<V, I, F>
+impl<V, I, F> Element<V> for Img<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    type ViewState = V;
     type ElementState = DivState;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -90,7 +89,7 @@ where
         &mut self,
         view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> LayoutId {
         self.base.layout(view_state, element_state, cx)
     }
@@ -143,7 +142,7 @@ where
     }
 }
 
-impl<V, I, F> StatelessInteractive for Img<V, I, F>
+impl<V, I, F> StatelessInteractive<V> for Img<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
@@ -153,21 +152,21 @@ where
     }
 }
 
-impl<V, F> StatefulInteractive for Img<V, StatefulInteraction<V>, F>
+impl<V, F> StatefulInteractive<V> for Img<V, StatefulInteraction<V>, F>
 where
     F: ElementFocus<V>,
 {
-    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<Self::ViewState> {
+    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<V> {
         self.base.stateful_interaction()
     }
 }
 
-impl<V, I> Focusable for Img<V, I, FocusEnabled<V>>
+impl<V, I> Focusable<V> for Img<V, I, FocusEnabled<V>>
 where
     V: 'static,
     I: ElementInteraction<V>,
 {
-    fn focus_listeners(&mut self) -> &mut FocusListeners<Self::ViewState> {
+    fn focus_listeners(&mut self) -> &mut FocusListeners<V> {
         self.base.focus_listeners()
     }
 
diff --git a/crates/gpui2/src/elements/svg.rs b/crates/gpui2/src/elements/svg.rs
index 7e9017264f1c1e21d572cbd20e55d13e1dd4c4e6..7db4c5cf6db86d96bf154c9a4f243c630b0a3fe5 100644
--- a/crates/gpui2/src/elements/svg.rs
+++ b/crates/gpui2/src/elements/svg.rs
@@ -1,6 +1,6 @@
 use crate::{
-    div, AnyElement, Bounds, Div, DivState, Element, ElementFocus, ElementId, ElementInteraction,
-    FocusDisabled, FocusEnabled, FocusListeners, Focusable, IntoAnyElement, LayoutId, Pixels,
+    div, AnyElement, Bounds, Component, Div, DivState, Element, ElementFocus, ElementId,
+    ElementInteraction, FocusDisabled, FocusEnabled, FocusListeners, Focusable, LayoutId, Pixels,
     SharedString, StatefulInteraction, StatefulInteractive, StatelessInteraction,
     StatelessInteractive, StyleRefinement, Styled, ViewContext,
 };
@@ -45,22 +45,21 @@ where
     }
 }
 
-impl<V, I, F> IntoAnyElement<V> for Svg<V, I, F>
+impl<V, I, F> Component<V> for Svg<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    fn into_any(self) -> AnyElement<V> {
+    fn render(self) -> AnyElement<V> {
         AnyElement::new(self)
     }
 }
 
-impl<V, I, F> Element for Svg<V, I, F>
+impl<V, I, F> Element<V> for Svg<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    type ViewState = V;
     type ElementState = DivState;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -80,7 +79,7 @@ where
         &mut self,
         view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> LayoutId {
         self.base.layout(view_state, element_state, cx)
     }
@@ -88,7 +87,7 @@ where
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        view: &mut Self::ViewState,
+        view: &mut V,
         element_state: &mut Self::ElementState,
         cx: &mut ViewContext<V>,
     ) where
@@ -116,7 +115,7 @@ where
     }
 }
 
-impl<V, I, F> StatelessInteractive for Svg<V, I, F>
+impl<V, I, F> StatelessInteractive<V> for Svg<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
@@ -126,21 +125,21 @@ where
     }
 }
 
-impl<V, F> StatefulInteractive for Svg<V, StatefulInteraction<V>, F>
+impl<V, F> StatefulInteractive<V> for Svg<V, StatefulInteraction<V>, F>
 where
     V: 'static,
     F: ElementFocus<V>,
 {
-    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<Self::ViewState> {
+    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<V> {
         self.base.stateful_interaction()
     }
 }
 
-impl<V: 'static, I> Focusable for Svg<V, I, FocusEnabled<V>>
+impl<V: 'static, I> Focusable<V> for Svg<V, I, FocusEnabled<V>>
 where
     I: ElementInteraction<V>,
 {
-    fn focus_listeners(&mut self) -> &mut FocusListeners<Self::ViewState> {
+    fn focus_listeners(&mut self) -> &mut FocusListeners<V> {
         self.base.focus_listeners()
     }
 
diff --git a/crates/gpui2/src/elements/text.rs b/crates/gpui2/src/elements/text.rs
index 7b0052826cd4e5086fbfea95fb5646d4bb9d8656..3aff568c4c2f71ed4002006b3a7c9ae306db3b99 100644
--- a/crates/gpui2/src/elements/text.rs
+++ b/crates/gpui2/src/elements/text.rs
@@ -1,41 +1,41 @@
 use crate::{
-    AnyElement, BorrowWindow, Bounds, Element, IntoAnyElement, LayoutId, Line, Pixels,
-    SharedString, Size, ViewContext,
+    AnyElement, BorrowWindow, Bounds, Component, Element, LayoutId, Line, Pixels, SharedString,
+    Size, ViewContext,
 };
 use parking_lot::Mutex;
 use smallvec::SmallVec;
 use std::{marker::PhantomData, sync::Arc};
 use util::ResultExt;
 
-impl<V: 'static> IntoAnyElement<V> for SharedString {
-    fn into_any(self) -> AnyElement<V> {
+impl<V: 'static> Component<V> for SharedString {
+    fn render(self) -> AnyElement<V> {
         Text {
             text: self,
             state_type: PhantomData,
         }
-        .into_any()
+        .render()
     }
 }
 
-impl<V: 'static> IntoAnyElement<V> for &'static str {
-    fn into_any(self) -> AnyElement<V> {
+impl<V: 'static> Component<V> for &'static str {
+    fn render(self) -> AnyElement<V> {
         Text {
             text: self.into(),
             state_type: PhantomData,
         }
-        .into_any()
+        .render()
     }
 }
 
 // TODO: Figure out how to pass `String` to `child` without this.
 // This impl doesn't exist in the `gpui2` crate.
-impl<V: 'static> IntoAnyElement<V> for String {
-    fn into_any(self) -> AnyElement<V> {
+impl<V: 'static> Component<V> for String {
+    fn render(self) -> AnyElement<V> {
         Text {
             text: self.into(),
             state_type: PhantomData,
         }
-        .into_any()
+        .render()
     }
 }
 
@@ -47,14 +47,13 @@ pub struct Text<V> {
 unsafe impl<V> Send for Text<V> {}
 unsafe impl<V> Sync for Text<V> {}
 
-impl<V: 'static> IntoAnyElement<V> for Text<V> {
-    fn into_any(self) -> AnyElement<V> {
+impl<V: 'static> Component<V> for Text<V> {
+    fn render(self) -> AnyElement<V> {
         AnyElement::new(self)
     }
 }
 
-impl<V: 'static> Element for Text<V> {
-    type ViewState = V;
+impl<V: 'static> Element<V> for Text<V> {
     type ElementState = Arc<Mutex<Option<TextElementState>>>;
 
     fn id(&self) -> Option<crate::ElementId> {
diff --git a/crates/gpui2/src/focusable.rs b/crates/gpui2/src/focusable.rs
index 3345b4c6c6e64813a5dfb344798d5dc50424f7d0..c283998ca26c575d0bd8373eb7fe6c2a33dd914e 100644
--- a/crates/gpui2/src/focusable.rs
+++ b/crates/gpui2/src/focusable.rs
@@ -11,8 +11,8 @@ pub type FocusListeners<V> = SmallVec<[FocusListener<V>; 2]>;
 pub type FocusListener<V> =
     Arc<dyn Fn(&mut V, &FocusHandle, &FocusEvent, &mut ViewContext<V>) + Send + Sync + 'static>;
 
-pub trait Focusable: Element {
-    fn focus_listeners(&mut self) -> &mut FocusListeners<Self::ViewState>;
+pub trait Focusable<V: 'static>: Element<V> {
+    fn focus_listeners(&mut self) -> &mut FocusListeners<V>;
     fn set_focus_style(&mut self, style: StyleRefinement);
     fn set_focus_in_style(&mut self, style: StyleRefinement);
     fn set_in_focus_style(&mut self, style: StyleRefinement);
@@ -43,10 +43,7 @@ pub trait Focusable: Element {
 
     fn on_focus(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &FocusEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &FocusEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -62,10 +59,7 @@ pub trait Focusable: Element {
 
     fn on_blur(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &FocusEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &FocusEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -81,10 +75,7 @@ pub trait Focusable: Element {
 
     fn on_focus_in(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &FocusEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &FocusEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -109,10 +100,7 @@ pub trait Focusable: Element {
 
     fn on_focus_out(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &FocusEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &FocusEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
diff --git a/crates/gpui2/src/interactive.rs b/crates/gpui2/src/interactive.rs
index fd603eda460765f12800374433f41b2289ef5bb5..9ec6c38dfe967e03423b6071b32f8737d310d44a 100644
--- a/crates/gpui2/src/interactive.rs
+++ b/crates/gpui2/src/interactive.rs
@@ -1,7 +1,7 @@
 use crate::{
-    point, px, view, Action, AnyBox, AnyDrag, AppContext, BorrowWindow, Bounds, DispatchContext,
-    DispatchPhase, Element, ElementId, FocusHandle, KeyMatch, Keystroke, Modifiers, Overflow,
-    Pixels, Point, SharedString, Size, Style, StyleRefinement, ViewContext,
+    point, px, view, Action, AnyBox, AnyDrag, AppContext, BorrowWindow, Bounds, Component,
+    DispatchContext, DispatchPhase, Element, ElementId, FocusHandle, KeyMatch, Keystroke,
+    Modifiers, Overflow, Pixels, Point, SharedString, Size, Style, StyleRefinement, ViewContext,
 };
 use collections::HashMap;
 use derive_more::{Deref, DerefMut};
@@ -19,8 +19,8 @@ use std::{
 
 const DRAG_THRESHOLD: f64 = 2.;
 
-pub trait StatelessInteractive: Element {
-    fn stateless_interaction(&mut self) -> &mut StatelessInteraction<Self::ViewState>;
+pub trait StatelessInteractive<V: 'static>: Element<V> {
+    fn stateless_interaction(&mut self) -> &mut StatelessInteraction<V>;
 
     fn hover(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self
     where
@@ -48,10 +48,7 @@ pub trait StatelessInteractive: Element {
     fn on_mouse_down(
         mut self,
         button: MouseButton,
-        handler: impl Fn(&mut Self::ViewState, &MouseDownEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &MouseDownEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -72,10 +69,7 @@ pub trait StatelessInteractive: Element {
     fn on_mouse_up(
         mut self,
         button: MouseButton,
-        handler: impl Fn(&mut Self::ViewState, &MouseUpEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &MouseUpEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -96,10 +90,7 @@ pub trait StatelessInteractive: Element {
     fn on_mouse_down_out(
         mut self,
         button: MouseButton,
-        handler: impl Fn(&mut Self::ViewState, &MouseDownEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &MouseDownEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -120,10 +111,7 @@ pub trait StatelessInteractive: Element {
     fn on_mouse_up_out(
         mut self,
         button: MouseButton,
-        handler: impl Fn(&mut Self::ViewState, &MouseUpEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &MouseUpEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -143,10 +131,7 @@ pub trait StatelessInteractive: Element {
 
     fn on_mouse_move(
         mut self,
-        handler: impl Fn(&mut Self::ViewState, &MouseMoveEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &MouseMoveEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -163,10 +148,7 @@ pub trait StatelessInteractive: Element {
 
     fn on_scroll_wheel(
         mut self,
-        handler: impl Fn(&mut Self::ViewState, &ScrollWheelEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &ScrollWheelEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -194,10 +176,7 @@ pub trait StatelessInteractive: Element {
 
     fn on_action<A: 'static>(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &A, DispatchPhase, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &A, DispatchPhase, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -215,12 +194,8 @@ pub trait StatelessInteractive: Element {
 
     fn on_key_down(
         mut self,
-        listener: impl Fn(
-                &mut Self::ViewState,
-                &KeyDownEvent,
-                DispatchPhase,
-                &mut ViewContext<Self::ViewState>,
-            ) + Send
+        listener: impl Fn(&mut V, &KeyDownEvent, DispatchPhase, &mut ViewContext<V>)
+            + Send
             + Sync
             + 'static,
     ) -> Self
@@ -240,7 +215,7 @@ pub trait StatelessInteractive: Element {
 
     fn on_key_up(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &KeyUpEvent, DispatchPhase, &mut ViewContext<Self::ViewState>)
+        listener: impl Fn(&mut V, &KeyUpEvent, DispatchPhase, &mut ViewContext<V>)
             + Send
             + Sync
             + 'static,
@@ -289,10 +264,7 @@ pub trait StatelessInteractive: Element {
 
     fn on_drop<S: 'static>(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, S, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, S, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -307,8 +279,8 @@ pub trait StatelessInteractive: Element {
     }
 }
 
-pub trait StatefulInteractive: StatelessInteractive {
-    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<Self::ViewState>;
+pub trait StatefulInteractive<V: 'static>: StatelessInteractive<V> {
+    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<V>;
 
     fn active(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self
     where
@@ -335,10 +307,7 @@ pub trait StatefulInteractive: StatelessInteractive {
 
     fn on_click(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &ClickEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &ClickEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -351,20 +320,14 @@ pub trait StatefulInteractive: StatelessInteractive {
 
     fn on_drag<S, R, E>(
         mut self,
-        listener: impl Fn(
-                &mut Self::ViewState,
-                &mut ViewContext<Self::ViewState>,
-            ) -> Drag<S, R, Self::ViewState, E>
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &mut ViewContext<V>) -> Drag<S, R, V, E> + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
         S: Any + Send + Sync,
-        R: Fn(&mut Self::ViewState, &mut ViewContext<Self::ViewState>) -> E,
+        R: Fn(&mut V, &mut ViewContext<V>) -> E,
         R: 'static + Send + Sync,
-        E: Element<ViewState = Self::ViewState>,
+        E: Component<V>,
     {
         debug_assert!(
             self.stateful_interaction().drag_listener.is_none(),
@@ -907,7 +870,8 @@ pub struct ClickEvent {
 pub struct Drag<S, R, V, E>
 where
     R: Fn(&mut V, &mut ViewContext<V>) -> E,
-    E: Element<ViewState = V>,
+    V: 'static,
+    E: Component<V>,
 {
     pub state: S,
     pub render_drag_handle: R,
@@ -917,7 +881,8 @@ where
 impl<S, R, V, E> Drag<S, R, V, E>
 where
     R: Fn(&mut V, &mut ViewContext<V>) -> E,
-    E: Element<ViewState = V>,
+    V: 'static,
+    E: Component<V>,
 {
     pub fn new(state: S, render_drag_handle: R) -> Self {
         Drag {
diff --git a/crates/gpui2/src/view.rs b/crates/gpui2/src/view.rs
index ed633e8966bfa8a54ae2ac97d1be539e4c07debe..a27faed07de617a613f4d4469afdde76e9210542 100644
--- a/crates/gpui2/src/view.rs
+++ b/crates/gpui2/src/view.rs
@@ -1,7 +1,7 @@
 use parking_lot::Mutex;
 
 use crate::{
-    AnyBox, AnyElement, BorrowWindow, Bounds, Element, ElementId, EntityId, Handle, IntoAnyElement,
+    AnyBox, AnyElement, BorrowWindow, Bounds, Component, Element, ElementId, EntityId, Handle,
     LayoutId, Pixels, ViewContext, WindowContext,
 };
 use std::{marker::PhantomData, sync::Arc};
@@ -33,16 +33,16 @@ pub fn view<V, E>(
     render: impl Fn(&mut V, &mut ViewContext<V>) -> E + Send + Sync + 'static,
 ) -> View<V>
 where
-    E: IntoAnyElement<V>,
+    E: Component<V>,
 {
     View {
         state,
-        render: Arc::new(move |state, cx| render(state, cx).into_any()),
+        render: Arc::new(move |state, cx| render(state, cx).render()),
     }
 }
 
-impl<V: 'static, ParentViewState: 'static> IntoAnyElement<ParentViewState> for View<V> {
-    fn into_any(self) -> AnyElement<ParentViewState> {
+impl<V: 'static, ParentViewState: 'static> Component<ParentViewState> for View<V> {
+    fn render(self) -> AnyElement<ParentViewState> {
         AnyElement::new(EraseViewState {
             view: self,
             parent_view_state_type: PhantomData,
@@ -50,8 +50,7 @@ impl<V: 'static, ParentViewState: 'static> IntoAnyElement<ParentViewState> for V
     }
 }
 
-impl<V: 'static> Element for View<V> {
-    type ViewState = ();
+impl<V: 'static> Element<()> for View<V> {
     type ElementState = AnyElement<V>;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -99,14 +98,13 @@ struct EraseViewState<V, ParentV> {
 unsafe impl<V, ParentV> Send for EraseViewState<V, ParentV> {}
 unsafe impl<V, ParentV> Sync for EraseViewState<V, ParentV> {}
 
-impl<V: 'static, ParentV: 'static> IntoAnyElement<ParentV> for EraseViewState<V, ParentV> {
-    fn into_any(self) -> AnyElement<ParentV> {
+impl<V: 'static, ParentV: 'static> Component<ParentV> for EraseViewState<V, ParentV> {
+    fn render(self) -> AnyElement<ParentV> {
         AnyElement::new(self)
     }
 }
 
-impl<V: 'static, ParentV: 'static> Element for EraseViewState<V, ParentV> {
-    type ViewState = ParentV;
+impl<V: 'static, ParentV: 'static> Element<ParentV> for EraseViewState<V, ParentV> {
     type ElementState = AnyBox;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -115,18 +113,18 @@ impl<V: 'static, ParentV: 'static> Element for EraseViewState<V, ParentV> {
 
     fn initialize(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         _: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) -> Self::ElementState {
         ViewObject::initialize(&mut self.view, cx)
     }
 
     fn layout(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         element: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) -> LayoutId {
         ViewObject::layout(&mut self.view, element, cx)
     }
@@ -134,9 +132,9 @@ impl<V: 'static, ParentV: 'static> Element for EraseViewState<V, ParentV> {
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         element: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) {
         ViewObject::paint(&mut self.view, bounds, element, cx)
     }
@@ -187,8 +185,8 @@ pub struct AnyView {
     view: Arc<Mutex<dyn ViewObject>>,
 }
 
-impl<ParentV: 'static> IntoAnyElement<ParentV> for AnyView {
-    fn into_any(self) -> AnyElement<ParentV> {
+impl<ParentV: 'static> Component<ParentV> for AnyView {
+    fn render(self) -> AnyElement<ParentV> {
         AnyElement::new(EraseAnyViewState {
             view: self,
             parent_view_state_type: PhantomData,
@@ -196,8 +194,7 @@ impl<ParentV: 'static> IntoAnyElement<ParentV> for AnyView {
     }
 }
 
-impl Element for AnyView {
-    type ViewState = ();
+impl Element<()> for AnyView {
     type ElementState = AnyBox;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -206,18 +203,18 @@ impl Element for AnyView {
 
     fn initialize(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut (),
         _: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<()>,
     ) -> Self::ElementState {
         self.view.lock().initialize(cx)
     }
 
     fn layout(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut (),
         element: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<()>,
     ) -> LayoutId {
         self.view.lock().layout(element, cx)
     }
@@ -227,7 +224,7 @@ impl Element for AnyView {
         bounds: Bounds<Pixels>,
         _: &mut (),
         element: &mut AnyBox,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<()>,
     ) {
         self.view.lock().paint(bounds, element, cx)
     }
@@ -241,14 +238,13 @@ struct EraseAnyViewState<ParentViewState> {
 unsafe impl<ParentV> Send for EraseAnyViewState<ParentV> {}
 unsafe impl<ParentV> Sync for EraseAnyViewState<ParentV> {}
 
-impl<ParentV: 'static> IntoAnyElement<ParentV> for EraseAnyViewState<ParentV> {
-    fn into_any(self) -> AnyElement<ParentV> {
+impl<ParentV: 'static> Component<ParentV> for EraseAnyViewState<ParentV> {
+    fn render(self) -> AnyElement<ParentV> {
         AnyElement::new(self)
     }
 }
 
-impl<ParentV: 'static> Element for EraseAnyViewState<ParentV> {
-    type ViewState = ParentV;
+impl<ParentV: 'static> Element<ParentV> for EraseAnyViewState<ParentV> {
     type ElementState = AnyBox;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -257,18 +253,18 @@ impl<ParentV: 'static> Element for EraseAnyViewState<ParentV> {
 
     fn initialize(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         _: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) -> Self::ElementState {
         self.view.view.lock().initialize(cx)
     }
 
     fn layout(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         element: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) -> LayoutId {
         self.view.view.lock().layout(element, cx)
     }
@@ -276,9 +272,9 @@ impl<ParentV: 'static> Element for EraseAnyViewState<ParentV> {
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         element: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) {
         self.view.view.lock().paint(bounds, element, cx)
     }
diff --git a/crates/gpui2_macros/src/derive_component.rs b/crates/gpui2_macros/src/derive_component.rs
new file mode 100644
index 0000000000000000000000000000000000000000..d1919c8bc4f475b596bff5119ce132f99ea37f95
--- /dev/null
+++ b/crates/gpui2_macros/src/derive_component.rs
@@ -0,0 +1,66 @@
+use proc_macro::TokenStream;
+use quote::quote;
+use syn::{parse_macro_input, parse_quote, DeriveInput};
+
+pub fn derive_component(input: TokenStream) -> TokenStream {
+    let ast = parse_macro_input!(input as DeriveInput);
+    let name = &ast.ident;
+
+    let mut trait_generics = ast.generics.clone();
+    let view_type = if let Some(view_type) = specified_view_type(&ast) {
+        quote! { #view_type }
+    } else {
+        if let Some(first_type_param) = ast.generics.params.iter().find_map(|param| {
+            if let syn::GenericParam::Type(type_param) = param {
+                Some(type_param.ident.clone())
+            } else {
+                None
+            }
+        }) {
+            quote! { #first_type_param }
+        } else {
+            trait_generics.params.push(parse_quote! { V: 'static });
+            quote! { V }
+        }
+    };
+
+    let (impl_generics, _, where_clause) = trait_generics.split_for_impl();
+    let (_, ty_generics, _) = ast.generics.split_for_impl();
+
+    let expanded = quote! {
+        impl #impl_generics gpui2::Component<#view_type> for #name #ty_generics #where_clause {
+            fn render(self) -> gpui2::AnyElement<#view_type> {
+                (move |view_state: &mut #view_type, cx: &mut gpui2::ViewContext<'_, '_, #view_type>| self.render(view_state, cx))
+                    .render()
+            }
+        }
+    };
+
+    TokenStream::from(expanded)
+}
+
+fn specified_view_type(ast: &DeriveInput) -> Option<proc_macro2::Ident> {
+    let component_attr = ast
+        .attrs
+        .iter()
+        .find(|attr| attr.path.is_ident("component"))?;
+
+    if let Ok(syn::Meta::List(meta_list)) = component_attr.parse_meta() {
+        meta_list.nested.iter().find_map(|nested| {
+            if let syn::NestedMeta::Meta(syn::Meta::NameValue(nv)) = nested {
+                if nv.path.is_ident("view_type") {
+                    if let syn::Lit::Str(lit_str) = &nv.lit {
+                        return Some(
+                            lit_str
+                                .parse::<syn::Ident>()
+                                .expect("Failed to parse view_type"),
+                        );
+                    }
+                }
+            }
+            None
+        })
+    } else {
+        None
+    }
+}
diff --git a/crates/gpui2_macros/src/derive_element.rs b/crates/gpui2_macros/src/derive_element.rs
deleted file mode 100644
index 3f6b053aa06ef488dc0a72cea4392307d23bb25b..0000000000000000000000000000000000000000
--- a/crates/gpui2_macros/src/derive_element.rs
+++ /dev/null
@@ -1,95 +0,0 @@
-use proc_macro::TokenStream;
-use quote::quote;
-use syn::{parse_macro_input, DeriveInput, GenericParam};
-
-pub fn derive_element(input: TokenStream) -> TokenStream {
-    let ast = parse_macro_input!(input as DeriveInput);
-    let type_name = ast.ident;
-
-    let mut state_type = quote! { () };
-
-    for param in &ast.generics.params {
-        if let GenericParam::Type(type_param) = param {
-            let type_ident = &type_param.ident;
-            state_type = quote! {#type_ident};
-            break;
-        }
-    }
-
-    let attrs = &ast.attrs;
-    for attr in attrs {
-        if attr.path.is_ident("element") {
-            match attr.parse_meta() {
-                Ok(syn::Meta::List(i)) => {
-                    for nested_meta in i.nested {
-                        if let syn::NestedMeta::Meta(syn::Meta::NameValue(nv)) = nested_meta {
-                            if nv.path.is_ident("view_state") {
-                                if let syn::Lit::Str(lit_str) = nv.lit {
-                                    state_type = lit_str.value().parse().unwrap();
-                                }
-                            }
-                        }
-                    }
-                }
-                _ => (),
-            }
-        }
-    }
-
-    let (impl_generics, ty_generics, where_clause) = ast.generics.split_for_impl();
-
-    let gen = quote! {
-        impl #impl_generics gpui2::IntoAnyElement<#state_type> for #type_name #ty_generics
-        #where_clause
-        {
-            fn into_any(self) -> gpui2::AnyElement<#state_type> {
-                gpui2::AnyElement::new(self)
-            }
-        }
-
-        impl #impl_generics gpui2::Element for #type_name #ty_generics
-        #where_clause
-        {
-            type ViewState = #state_type;
-            type ElementState = gpui2::AnyElement<#state_type>;
-
-            fn id(&self) -> Option<gpui2::ElementId> {
-                None
-            }
-
-            fn initialize(
-                &mut self,
-                view_state: &mut Self::ViewState,
-                _: Option<Self::ElementState>,
-                cx: &mut gpui2::ViewContext<Self::ViewState>
-            ) -> Self::ElementState {
-                use gpui2::IntoAnyElement;
-
-                let mut element = self.render(view_state, cx).into_any();
-                element.initialize(view_state, cx);
-                element
-            }
-
-            fn layout(
-                &mut self,
-                view_state: &mut Self::ViewState,
-                rendered_element: &mut Self::ElementState,
-                cx: &mut gpui2::ViewContext<Self::ViewState>,
-            ) -> gpui2::LayoutId {
-                rendered_element.layout(view_state, cx)
-            }
-
-            fn paint(
-                &mut self,
-                bounds: gpui2::Bounds<gpui2::Pixels>,
-                view_state: &mut Self::ViewState,
-                rendered_element: &mut Self::ElementState,
-                cx: &mut gpui2::ViewContext<Self::ViewState>,
-            ) {
-                rendered_element.paint(view_state, cx)
-            }
-        }
-    };
-
-    gen.into()
-}
diff --git a/crates/gpui2_macros/src/gpui2_macros.rs b/crates/gpui2_macros/src/gpui2_macros.rs
index 59fd046c839a1a4be8e480942fca04695d125c7c..2e0c0547f79e29f1e3bcc5bfcc43cfed516f7df9 100644
--- a/crates/gpui2_macros/src/gpui2_macros.rs
+++ b/crates/gpui2_macros/src/gpui2_macros.rs
@@ -1,6 +1,6 @@
 use proc_macro::TokenStream;
 
-mod derive_element;
+mod derive_component;
 mod style_helpers;
 mod test;
 
@@ -9,9 +9,9 @@ pub fn style_helpers(args: TokenStream) -> TokenStream {
     style_helpers::style_helpers(args)
 }
 
-#[proc_macro_derive(Element, attributes(element))]
-pub fn derive_element(input: TokenStream) -> TokenStream {
-    derive_element::derive_element(input)
+#[proc_macro_derive(Component, attributes(component))]
+pub fn derive_component(input: TokenStream) -> TokenStream {
+    derive_component::derive_component(input)
 }
 
 #[proc_macro_attribute]
diff --git a/crates/storybook2/src/components.rs b/crates/storybook2/src/components.rs
index c39ccaa3d9a36504e84c41c950ad296e08a9c04d..a3dca51adc44050e31473a3e3e526d7f2a4b381e 100644
--- a/crates/storybook2/src/components.rs
+++ b/crates/storybook2/src/components.rs
@@ -14,7 +14,7 @@ impl<V, D> Default for ButtonHandlers<V, D> {
     }
 }
 
-#[derive(Element)]
+#[derive(Component)]
 pub struct Button<V: 'static, D: 'static> {
     handlers: ButtonHandlers<V, D>,
     label: Option<ArcCow<'static, str>>,
diff --git a/crates/storybook2/src/stories/kitchen_sink.rs b/crates/storybook2/src/stories/kitchen_sink.rs
index e7c4e752f6f85d85b070ec96b9415bdcd22fa2fe..ec89238ac45ef68a51e9e3a69545248112a8f697 100644
--- a/crates/storybook2/src/stories/kitchen_sink.rs
+++ b/crates/storybook2/src/stories/kitchen_sink.rs
@@ -16,7 +16,7 @@ impl KitchenSinkStory {
         view(cx.entity(|cx| Self::new()), Self::render)
     }
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         let element_stories = ElementStory::iter()
             .map(|selector| selector.story(cx))
             .collect::<Vec<_>>();
diff --git a/crates/storybook2/src/stories/scroll.rs b/crates/storybook2/src/stories/scroll.rs
index c5df3bd3d318ecceb3634cbe19a287060422b224..a1e3c6700e4ac47646467d0e9ffb8cf495a5a90f 100644
--- a/crates/storybook2/src/stories/scroll.rs
+++ b/crates/storybook2/src/stories/scroll.rs
@@ -1,8 +1,7 @@
 use crate::themes::rose_pine;
 use gpui2::{
-    div, px, view, Context, Element, ParentElement, SharedString, Styled, View, WindowContext,
+    div, px, view, Component, Context, ParentElement, SharedString, Styled, View, WindowContext,
 };
-use ui::ElementExt;
 
 pub struct ScrollStory {
     text: View<()>,
@@ -16,7 +15,7 @@ impl ScrollStory {
     }
 }
 
-fn checkerboard<S>(depth: usize) -> impl Element<ViewState = S>
+fn checkerboard<S>(depth: usize) -> impl Component<S>
 where
     S: 'static + Send + Sync,
 {
diff --git a/crates/storybook2/src/stories/z_index.rs b/crates/storybook2/src/stories/z_index.rs
index 9dd74b6884d5d901ad3009d6694caaf6239c8217..7fa078c4e3fc70b7a3900c958f5df02c854d4390 100644
--- a/crates/storybook2/src/stories/z_index.rs
+++ b/crates/storybook2/src/stories/z_index.rs
@@ -1,4 +1,3 @@
-use std::marker::PhantomData;
 
 use gpui2::{px, rgb, Div, Hsla};
 use ui::prelude::*;
@@ -7,19 +6,15 @@ use crate::story::Story;
 
 /// A reimplementation of the MDN `z-index` example, found here:
 /// [https://developer.mozilla.org/en-US/docs/Web/CSS/z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).
-#[derive(Element)]
-pub struct ZIndexStory<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-}
+#[derive(Component)]
+pub struct ZIndexStory;
 
-impl<S: 'static + Send + Sync> ZIndexStory<S> {
+impl ZIndexStory {
     pub fn new() -> Self {
-        Self {
-            state_type: PhantomData,
-        }
+        Self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         Story::container(cx)
             .child(Story::title(cx, "z-index"))
             .child(
@@ -86,23 +81,19 @@ trait Styles: Styled + Sized {
     }
 }
 
-impl<S: 'static + Send + Sync> Styles for Div<S> {}
+impl<V: 'static> Styles for Div<V> {}
 
-#[derive(Element)]
-struct ZIndexExample<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+struct ZIndexExample {
     z_index: u32,
 }
 
-impl<S: 'static + Send + Sync> ZIndexExample<S> {
+impl ZIndexExample {
     pub fn new(z_index: u32) -> Self {
-        Self {
-            state_type: PhantomData,
-            z_index,
-        }
+        Self { z_index }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         div()
             .relative()
             .size_full()
diff --git a/crates/storybook2/src/story_selector.rs b/crates/storybook2/src/story_selector.rs
index 8cd3f9e3294d6c555af686e3038936af56eb8d3d..5f60ad14eaddf51323f92ecb9c509951df7b8eb3 100644
--- a/crates/storybook2/src/story_selector.rs
+++ b/crates/storybook2/src/story_selector.rs
@@ -28,29 +28,29 @@ impl ElementStory {
     pub fn story(&self, cx: &mut WindowContext) -> AnyView {
         match self {
             Self::Avatar => {
-                view(cx.entity(|cx| ()), |_, _| ui::AvatarStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::AvatarStory::new().render()).into_any()
             }
             Self::Button => {
-                view(cx.entity(|cx| ()), |_, _| ui::ButtonStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::ButtonStory::new().render()).into_any()
             }
             Self::Details => view(cx.entity(|cx| ()), |_, _| {
-                ui::DetailsStory::new().into_any()
+                ui::DetailsStory::new().render()
             })
             .into_any(),
             Self::Focus => FocusStory::view(cx).into_any(),
             Self::Icon => {
-                view(cx.entity(|cx| ()), |_, _| ui::IconStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::IconStory::new().render()).into_any()
             }
             Self::Input => {
-                view(cx.entity(|cx| ()), |_, _| ui::InputStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::InputStory::new().render()).into_any()
             }
             Self::Label => {
-                view(cx.entity(|cx| ()), |_, _| ui::LabelStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::LabelStory::new().render()).into_any()
             }
             Self::Scroll => ScrollStory::view(cx).into_any(),
             Self::Text => TextStory::view(cx).into_any(),
             Self::ZIndex => {
-                view(cx.entity(|cx| ()), |_, _| ZIndexStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ZIndexStory::new().render()).into_any()
             }
         }
     }
@@ -91,93 +91,93 @@ impl ComponentStory {
     pub fn story(&self, cx: &mut WindowContext) -> AnyView {
         match self {
             Self::AssistantPanel => view(cx.entity(|cx| ()), |_, _| {
-                ui::AssistantPanelStory::new().into_any()
+                ui::AssistantPanelStory::new().render()
             })
             .into_any(),
             Self::Buffer => {
-                view(cx.entity(|cx| ()), |_, _| ui::BufferStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::BufferStory::new().render()).into_any()
             }
             Self::Breadcrumb => view(cx.entity(|cx| ()), |_, _| {
-                ui::BreadcrumbStory::new().into_any()
+                ui::BreadcrumbStory::new().render()
             })
             .into_any(),
             Self::ChatPanel => view(cx.entity(|cx| ()), |_, _| {
-                ui::ChatPanelStory::new().into_any()
+                ui::ChatPanelStory::new().render()
             })
             .into_any(),
             Self::CollabPanel => view(cx.entity(|cx| ()), |_, _| {
-                ui::CollabPanelStory::new().into_any()
+                ui::CollabPanelStory::new().render()
             })
             .into_any(),
             Self::CommandPalette => view(cx.entity(|cx| ()), |_, _| {
-                ui::CommandPaletteStory::new().into_any()
+                ui::CommandPaletteStory::new().render()
             })
             .into_any(),
             Self::ContextMenu => view(cx.entity(|cx| ()), |_, _| {
-                ui::ContextMenuStory::new().into_any()
+                ui::ContextMenuStory::new().render()
             })
             .into_any(),
             Self::Facepile => view(cx.entity(|cx| ()), |_, _| {
-                ui::FacepileStory::new().into_any()
+                ui::FacepileStory::new().render()
             })
             .into_any(),
             Self::Keybinding => view(cx.entity(|cx| ()), |_, _| {
-                ui::KeybindingStory::new().into_any()
+                ui::KeybindingStory::new().render()
             })
             .into_any(),
             Self::LanguageSelector => view(cx.entity(|cx| ()), |_, _| {
-                ui::LanguageSelectorStory::new().into_any()
+                ui::LanguageSelectorStory::new().render()
             })
             .into_any(),
             Self::MultiBuffer => view(cx.entity(|cx| ()), |_, _| {
-                ui::MultiBufferStory::new().into_any()
+                ui::MultiBufferStory::new().render()
             })
             .into_any(),
             Self::NotificationsPanel => view(cx.entity(|cx| ()), |_, _| {
-                ui::NotificationsPanelStory::new().into_any()
+                ui::NotificationsPanelStory::new().render()
             })
             .into_any(),
             Self::Palette => view(cx.entity(|cx| ()), |_, _| {
-                ui::PaletteStory::new().into_any()
+                ui::PaletteStory::new().render()
             })
             .into_any(),
             Self::Panel => {
-                view(cx.entity(|cx| ()), |_, _| ui::PanelStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::PanelStory::new().render()).into_any()
             }
             Self::ProjectPanel => view(cx.entity(|cx| ()), |_, _| {
-                ui::ProjectPanelStory::new().into_any()
+                ui::ProjectPanelStory::new().render()
             })
             .into_any(),
             Self::RecentProjects => view(cx.entity(|cx| ()), |_, _| {
-                ui::RecentProjectsStory::new().into_any()
+                ui::RecentProjectsStory::new().render()
             })
             .into_any(),
-            Self::Tab => view(cx.entity(|cx| ()), |_, _| ui::TabStory::new().into_any()).into_any(),
+            Self::Tab => view(cx.entity(|cx| ()), |_, _| ui::TabStory::new().render()).into_any(),
             Self::TabBar => {
-                view(cx.entity(|cx| ()), |_, _| ui::TabBarStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::TabBarStory::new().render()).into_any()
             }
             Self::Terminal => view(cx.entity(|cx| ()), |_, _| {
-                ui::TerminalStory::new().into_any()
+                ui::TerminalStory::new().render()
             })
             .into_any(),
             Self::ThemeSelector => view(cx.entity(|cx| ()), |_, _| {
-                ui::ThemeSelectorStory::new().into_any()
+                ui::ThemeSelectorStory::new().render()
             })
             .into_any(),
             Self::TitleBar => ui::TitleBarStory::view(cx).into_any(),
             Self::Toast => {
-                view(cx.entity(|cx| ()), |_, _| ui::ToastStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::ToastStory::new().render()).into_any()
             }
             Self::Toolbar => view(cx.entity(|cx| ()), |_, _| {
-                ui::ToolbarStory::new().into_any()
+                ui::ToolbarStory::new().render()
             })
             .into_any(),
             Self::TrafficLights => view(cx.entity(|cx| ()), |_, _| {
-                ui::TrafficLightsStory::new().into_any()
+                ui::TrafficLightsStory::new().render()
             })
             .into_any(),
             Self::Copilot => view(cx.entity(|cx| ()), |_, _| {
-                ui::CopilotModalStory::new().into_any()
+                ui::CopilotModalStory::new().render()
             })
             .into_any(),
             Self::Workspace => ui::WorkspaceStory::view(cx).into_any(),
diff --git a/crates/storybook2/src/storybook2.rs b/crates/storybook2/src/storybook2.rs
index c6d71f079dac09704104167fa4c728525372be76..29ff5eaa9801e98f776f17550b851bba4a4b518b 100644
--- a/crates/storybook2/src/storybook2.rs
+++ b/crates/storybook2/src/storybook2.rs
@@ -10,7 +10,7 @@ use std::sync::Arc;
 
 use clap::Parser;
 use gpui2::{
-    div, px, size, view, AnyView, AppContext, Bounds, Context, Element, ViewContext, WindowBounds,
+    div, px, size, view, AnyView, AppContext, Bounds, Context, ViewContext, WindowBounds,
     WindowOptions,
 };
 use log::LevelFilter;
@@ -107,7 +107,7 @@ impl StoryWrapper {
         Self { story, theme }
     }
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         themed(self.theme.clone(), cx, |cx| {
             div()
                 .flex()
diff --git a/crates/ui2/src/components/assistant_panel.rs b/crates/ui2/src/components/assistant_panel.rs
index 31f299de910c90d7671b9267748796880e6901c8..defd05f500904e1b6a4974300c49df8f35745fe9 100644
--- a/crates/ui2/src/components/assistant_panel.rs
+++ b/crates/ui2/src/components/assistant_panel.rs
@@ -1,22 +1,18 @@
-use std::marker::PhantomData;
-
 use gpui2::{rems, AbsoluteLength};
 
 use crate::prelude::*;
 use crate::{Icon, IconButton, Label, Panel, PanelSide};
 
-#[derive(Element)]
-pub struct AssistantPanel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct AssistantPanel {
     id: ElementId,
-    state_type: PhantomData<S>,
     current_side: PanelSide,
 }
 
-impl<S: 'static + Send + Sync> AssistantPanel<S> {
+impl AssistantPanel {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
             current_side: PanelSide::default(),
         }
     }
@@ -26,7 +22,7 @@ impl<S: 'static + Send + Sync> AssistantPanel<S> {
         self
     }
 
-    fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         Panel::new(self.id.clone(), cx)
             .children(vec![div()
                 .flex()
@@ -69,7 +65,7 @@ impl<S: 'static + Send + Sync> AssistantPanel<S> {
                         .overflow_y_scroll()
                         .child(Label::new("Is this thing on?")),
                 )
-                .into_any()])
+                .render()])
             .side(self.current_side)
             .width(AbsoluteLength::Rems(rems(32.)))
     }
@@ -84,25 +80,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct AssistantPanelStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct AssistantPanelStory {}
 
-    impl<S: 'static + Send + Sync> AssistantPanelStory<S> {
+    impl AssistantPanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self {}
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, AssistantPanel<S>>(cx))
+                .child(Story::title_for::<_, AssistantPanel>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(AssistantPanel::new("assistant-panel"))
         }
diff --git a/crates/ui2/src/components/breadcrumb.rs b/crates/ui2/src/components/breadcrumb.rs
index e67ceb1751cb54e41b153f12c6a83b4db27285ea..3cba3b7248a668f5499a7da35b739a3c84711422 100644
--- a/crates/ui2/src/components/breadcrumb.rs
+++ b/crates/ui2/src/components/breadcrumb.rs
@@ -1,41 +1,33 @@
-use std::marker::PhantomData;
 use std::path::PathBuf;
 
 use gpui2::Div;
-
 use crate::prelude::*;
 use crate::{h_stack, HighlightedText};
 
 #[derive(Clone)]
 pub struct Symbol(pub Vec<HighlightedText>);
 
-#[derive(Element)]
-pub struct Breadcrumb<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Breadcrumb {
     path: PathBuf,
     symbols: Vec<Symbol>,
 }
 
-impl<S: 'static + Send + Sync> Breadcrumb<S> {
+impl Breadcrumb {
     pub fn new(path: PathBuf, symbols: Vec<Symbol>) -> Self {
         Self {
-            state_type: PhantomData,
             path,
             symbols,
         }
     }
 
-    fn render_separator(&self, cx: &WindowContext) -> Div<S> {
+    fn render_separator<V: 'static>(&self, cx: &WindowContext) -> Div<V> {
         let theme = theme(cx);
 
         div().child(" › ").text_color(theme.text_muted)
     }
 
-    fn render(
-        &mut self,
-        view_state: &mut S,
-        cx: &mut ViewContext<S>,
-    ) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, view_state: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         let symbols_len = self.symbols.len();
@@ -90,27 +82,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct BreadcrumbStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct BreadcrumbStory;
 
-    impl<S: 'static + Send + Sync> BreadcrumbStory<S> {
+    impl BreadcrumbStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            view_state: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, view_state: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let theme = theme(cx);
 
             Story::container(cx)
-                .child(Story::title_for::<_, Breadcrumb<S>>(cx))
+                .child(Story::title_for::<_, Breadcrumb>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Breadcrumb::new(
                     PathBuf::from_str("crates/ui/src/components/toolbar.rs").unwrap(),
diff --git a/crates/ui2/src/components/buffer.rs b/crates/ui2/src/components/buffer.rs
index 2e0e07e16c8ac7ecab113986d1139adb7339db2e..b4ccb89b5c994665a71c35f4a41924288849b97f 100644
--- a/crates/ui2/src/components/buffer.rs
+++ b/crates/ui2/src/components/buffer.rs
@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{Hsla, WindowContext};
 
 use crate::prelude::*;
@@ -109,10 +107,9 @@ impl BufferRow {
     }
 }
 
-#[derive(Element, Clone)]
-pub struct Buffer<S: 'static + Send + Sync + Clone> {
+#[derive(Component, Clone)]
+pub struct Buffer {
     id: ElementId,
-    state_type: PhantomData<S>,
     rows: Option<BufferRows>,
     readonly: bool,
     language: Option<String>,
@@ -120,11 +117,10 @@ pub struct Buffer<S: 'static + Send + Sync + Clone> {
     path: Option<String>,
 }
 
-impl<S: 'static + Send + Sync + Clone> Buffer<S> {
+impl Buffer {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
             rows: Some(BufferRows::default()),
             readonly: false,
             language: None,
@@ -158,7 +154,7 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
         self
     }
 
-    fn render_row(row: BufferRow, cx: &WindowContext) -> impl Element<ViewState = S> {
+    fn render_row<S: 'static>(row: BufferRow, cx: &WindowContext) -> impl Component<S> {
         let theme = theme(cx);
 
         let line_background = if row.current {
@@ -208,7 +204,7 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
             }))
     }
 
-    fn render_rows(&self, cx: &WindowContext) -> Vec<impl Element<ViewState = S>> {
+    fn render_rows<S: 'static>(&self, cx: &WindowContext) -> Vec<impl Component<S>> {
         match &self.rows {
             Some(rows) => rows
                 .rows
@@ -219,7 +215,7 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
         let rows = self.render_rows(cx);
 
@@ -246,27 +242,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct BufferStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct BufferStory;
 
-    impl<S: 'static + Send + Sync + Clone> BufferStory<S> {
+    impl BufferStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             let theme = theme(cx);
 
             Story::container(cx)
-                .child(Story::title_for::<_, Buffer<S>>(cx))
+                .child(Story::title_for::<_, Buffer>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(div().w(rems(64.)).h_96().child(empty_buffer_example()))
                 .child(Story::label(cx, "Hello World (Rust)"))
diff --git a/crates/ui2/src/components/buffer_search.rs b/crates/ui2/src/components/buffer_search.rs
index 1edbd58c8775e0eb59ca9d4678400a688895b58a..b5e74a481004b9373710ecafd90b51df7654760d 100644
--- a/crates/ui2/src/components/buffer_search.rs
+++ b/crates/ui2/src/components/buffer_search.rs
@@ -25,7 +25,7 @@ impl BufferSearch {
         view(cx.entity(|cx| Self::new()), Self::render)
     }
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         let theme = theme(cx);
 
         h_stack().bg(theme.toolbar).p_2().child(
diff --git a/crates/ui2/src/components/chat_panel.rs b/crates/ui2/src/components/chat_panel.rs
index 7afccd6d9d5ae23a9c88e09dc3d703380c3d2748..e4494f461487365187aed31839a455bf38d655a5 100644
--- a/crates/ui2/src/components/chat_panel.rs
+++ b/crates/ui2/src/components/chat_panel.rs
@@ -1,17 +1,15 @@
-use std::marker::PhantomData;
-
 use chrono::NaiveDateTime;
 
 use crate::prelude::*;
 use crate::{Icon, IconButton, Input, Label, LabelColor};
 
-#[derive(Element)]
-pub struct ChatPanel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct ChatPanel {
     element_id: ElementId,
-    messages: Vec<ChatMessage<S>>,
+    messages: Vec<ChatMessage>,
 }
 
-impl<S: 'static + Send + Sync> ChatPanel<S> {
+impl ChatPanel {
     pub fn new(element_id: impl Into<ElementId>) -> Self {
         Self {
             element_id: element_id.into(),
@@ -19,12 +17,12 @@ impl<S: 'static + Send + Sync> ChatPanel<S> {
         }
     }
 
-    pub fn messages(mut self, messages: Vec<ChatMessage<S>>) -> Self {
+    pub fn messages(mut self, messages: Vec<ChatMessage>) -> Self {
         self.messages = messages;
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div()
             .id(self.element_id.clone())
             .flex()
@@ -70,25 +68,23 @@ impl<S: 'static + Send + Sync> ChatPanel<S> {
     }
 }
 
-#[derive(Element)]
-pub struct ChatMessage<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct ChatMessage {
     author: String,
     text: String,
     sent_at: NaiveDateTime,
 }
 
-impl<S: 'static + Send + Sync> ChatMessage<S> {
+impl ChatMessage {
     pub fn new(author: String, text: String, sent_at: NaiveDateTime) -> Self {
         Self {
-            state_type: PhantomData,
             author,
             text,
             sent_at,
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div()
             .flex()
             .flex_col()
@@ -117,25 +113,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ChatPanelStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ChatPanelStory;
 
-    impl<S: 'static + Send + Sync> ChatPanelStory<S> {
+    impl ChatPanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, ChatPanel<S>>(cx))
+                .child(Story::title_for::<_, ChatPanel>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     Panel::new("chat-panel-1-outer", cx)
diff --git a/crates/ui2/src/components/collab_panel.rs b/crates/ui2/src/components/collab_panel.rs
index 6414e0e5ffbf00e3cd93cfc5d823e5e86ada2eda..6d2cbd8e14e402bfd2bc0d1480d4408c4767765d 100644
--- a/crates/ui2/src/components/collab_panel.rs
+++ b/crates/ui2/src/components/collab_panel.rs
@@ -3,23 +3,18 @@ use crate::{
     static_collab_panel_channels, static_collab_panel_current_call, v_stack, Icon, List,
     ListHeader, ToggleState,
 };
-use std::marker::PhantomData;
 
-#[derive(Element)]
-pub struct CollabPanel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct CollabPanel {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync> CollabPanel<S> {
+impl CollabPanel {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         v_stack()
@@ -98,25 +93,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct CollabPanelStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct CollabPanelStory;
 
-    impl<S: 'static + Send + Sync> CollabPanelStory<S> {
+    impl CollabPanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, CollabPanel<S>>(cx))
+                .child(Story::title_for::<_, CollabPanel>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(CollabPanel::new("collab-panel"))
         }
diff --git a/crates/ui2/src/components/command_palette.rs b/crates/ui2/src/components/command_palette.rs
index 45194e843c7a856ce45cf752bb60e09b0d911888..065ee9a052bdbe219cff6b7a4b4fff68f2c81aea 100644
--- a/crates/ui2/src/components/command_palette.rs
+++ b/crates/ui2/src/components/command_palette.rs
@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{example_editor_actions, OrderMethod, Palette};
 
-#[derive(Element)]
-pub struct CommandPalette<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct CommandPalette {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync> CommandPalette<S> {
+impl CommandPalette {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div().id(self.id.clone()).child(
             Palette::new("palette")
                 .items(example_editor_actions())
@@ -37,25 +31,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct CommandPaletteStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct CommandPaletteStory;
 
-    impl<S: 'static + Send + Sync> CommandPaletteStory<S> {
+    impl CommandPaletteStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, CommandPalette<S>>(cx))
+                .child(Story::title_for::<_, CommandPalette>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(CommandPalette::new("command-palette"))
         }
diff --git a/crates/ui2/src/components/context_menu.rs b/crates/ui2/src/components/context_menu.rs
index 73813ed61356926fec81d9c509b01a2de0d67cd5..3e0323d9422af69bf5b204ca935d9756a160f5e9 100644
--- a/crates/ui2/src/components/context_menu.rs
+++ b/crates/ui2/src/components/context_menu.rs
@@ -1,14 +1,14 @@
 use crate::{prelude::*, ListItemVariant};
 use crate::{v_stack, Label, List, ListEntry, ListItem, ListSeparator, ListSubHeader};
 
-pub enum ContextMenuItem<S: 'static + Send + Sync> {
+pub enum ContextMenuItem {
     Header(SharedString),
-    Entry(Label<S>),
+    Entry(Label),
     Separator,
 }
 
-impl<S: 'static + Send + Sync> ContextMenuItem<S> {
-    fn to_list_item(self) -> ListItem<S> {
+impl ContextMenuItem {
+    fn to_list_item<V: 'static>(self) -> ListItem<V> {
         match self {
             ContextMenuItem::Header(label) => ListSubHeader::new(label).into(),
             ContextMenuItem::Entry(label) => {
@@ -26,23 +26,23 @@ impl<S: 'static + Send + Sync> ContextMenuItem<S> {
         Self::Separator
     }
 
-    pub fn entry(label: Label<S>) -> Self {
+    pub fn entry(label: Label) -> Self {
         Self::Entry(label)
     }
 }
 
-#[derive(Element)]
-pub struct ContextMenu<S: 'static + Send + Sync> {
-    items: Vec<ContextMenuItem<S>>,
+#[derive(Component)]
+pub struct ContextMenu {
+    items: Vec<ContextMenuItem>,
 }
 
-impl<S: 'static + Send + Sync> ContextMenu<S> {
-    pub fn new(items: impl IntoIterator<Item = ContextMenuItem<S>>) -> Self {
+impl ContextMenu {
+    pub fn new(items: impl IntoIterator<Item = ContextMenuItem>) -> Self {
         Self {
             items: items.into_iter().collect(),
         }
     }
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         v_stack()
@@ -67,31 +67,21 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use std::marker::PhantomData;
-
     use crate::story::Story;
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ContextMenuStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ContextMenuStory;
 
-    impl<S: 'static + Send + Sync> ContextMenuStory<S> {
+    impl ContextMenuStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, ContextMenu<S>>(cx))
+                .child(Story::title_for::<_, ContextMenu>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(ContextMenu::new([
                     ContextMenuItem::header("Section header"),
diff --git a/crates/ui2/src/components/copilot.rs b/crates/ui2/src/components/copilot.rs
index b0f20cfa0d8928d949918a4bfa661534cfcfdbab..3c48ef20d085b7d5b0f9b44cb80aebf684d05e5f 100644
--- a/crates/ui2/src/components/copilot.rs
+++ b/crates/ui2/src/components/copilot.rs
@@ -1,22 +1,16 @@
-use std::marker::PhantomData;
-
 use crate::{prelude::*, Button, Label, LabelColor, Modal};
 
-#[derive(Element)]
-pub struct CopilotModal<S: 'static + Send + Sync + Clone> {
+#[derive(Component)]
+pub struct CopilotModal {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync + Clone> CopilotModal<S> {
+impl CopilotModal {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div().id(self.id.clone()).child(
             Modal::new("some-id")
                 .title("Connect Copilot to Zed")
@@ -35,25 +29,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct CopilotModalStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct CopilotModalStory;
 
-    impl<S: 'static + Send + Sync + Clone> CopilotModalStory<S> {
+    impl CopilotModalStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, CopilotModal<S>>(cx))
+                .child(Story::title_for::<_, CopilotModal>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(CopilotModal::new("copilot-modal"))
         }
diff --git a/crates/ui2/src/components/editor_pane.rs b/crates/ui2/src/components/editor_pane.rs
index 7489b3e47d8edfa2c5d1e0f2544a33aa71804e4c..9c9638d0579f89e430353816a96c1cab1b2f1613 100644
--- a/crates/ui2/src/components/editor_pane.rs
+++ b/crates/ui2/src/components/editor_pane.rs
@@ -10,10 +10,10 @@ use crate::{
 
 #[derive(Clone)]
 pub struct EditorPane {
-    tabs: Vec<Tab<Self>>,
+    tabs: Vec<Tab>,
     path: PathBuf,
     symbols: Vec<Symbol>,
-    buffer: Buffer<Self>,
+    buffer: Buffer,
     buffer_search: View<BufferSearch>,
     is_buffer_search_open: bool,
 }
@@ -21,10 +21,10 @@ pub struct EditorPane {
 impl EditorPane {
     pub fn new(
         cx: &mut WindowContext,
-        tabs: Vec<Tab<Self>>,
+        tabs: Vec<Tab>,
         path: PathBuf,
         symbols: Vec<Symbol>,
-        buffer: Buffer<Self>,
+        buffer: Buffer,
     ) -> Self {
         Self {
             tabs,
@@ -49,7 +49,7 @@ impl EditorPane {
         )
     }
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         v_stack()
             .w_full()
             .h_full()
diff --git a/crates/ui2/src/components/facepile.rs b/crates/ui2/src/components/facepile.rs
index 9a96d8001053e1c6ea81d347d5a781aca23a39a8..898489f1edb27551880201d1704068a4b0e4913a 100644
--- a/crates/ui2/src/components/facepile.rs
+++ b/crates/ui2/src/components/facepile.rs
@@ -1,23 +1,19 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{Avatar, Player};
 
-#[derive(Element)]
-pub struct Facepile<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Facepile {
     players: Vec<Player>,
 }
 
-impl<S: 'static + Send + Sync> Facepile<S> {
+impl Facepile {
     pub fn new<P: Iterator<Item = Player>>(players: P) -> Self {
         Self {
-            state_type: PhantomData,
             players: players.collect(),
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let player_count = self.players.len();
         let player_list = self.players.iter().enumerate().map(|(ix, player)| {
             let isnt_last = ix < player_count - 1;
@@ -39,27 +35,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct FacepileStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct FacepileStory;
 
-    impl<S: 'static + Send + Sync> FacepileStory<S> {
+    impl FacepileStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             let players = static_players();
 
             Story::container(cx)
-                .child(Story::title_for::<_, Facepile<S>>(cx))
+                .child(Story::title_for::<_, Facepile>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     div()
diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs
index b74165720d15f0b78486d2d40fb9e6df07bcd6fd..2891ce6bd837fd2d63d2194387c449dcc321fa23 100644
--- a/crates/ui2/src/components/icon_button.rs
+++ b/crates/ui2/src/components/icon_button.rs
@@ -1,4 +1,3 @@
-use std::marker::PhantomData;
 use std::sync::Arc;
 
 use gpui2::MouseButton;
@@ -6,19 +5,18 @@ use gpui2::MouseButton;
 use crate::{h_stack, prelude::*};
 use crate::{ClickHandler, Icon, IconColor, IconElement};
 
-struct IconButtonHandlers<S: 'static + Send + Sync> {
+struct IconButtonHandlers<S: 'static> {
     click: Option<ClickHandler<S>>,
 }
 
-impl<S: 'static + Send + Sync> Default for IconButtonHandlers<S> {
+impl<S: 'static> Default for IconButtonHandlers<S> {
     fn default() -> Self {
         Self { click: None }
     }
 }
 
-#[derive(Element)]
-pub struct IconButton<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct IconButton<S: 'static> {
     id: ElementId,
     icon: Icon,
     color: IconColor,
@@ -27,10 +25,9 @@ pub struct IconButton<S: 'static + Send + Sync> {
     handlers: IconButtonHandlers<S>,
 }
 
-impl<S: 'static + Send + Sync> IconButton<S> {
+impl<S: 'static> IconButton<S> {
     pub fn new(id: impl Into<ElementId>, icon: Icon) -> Self {
         Self {
-            state_type: PhantomData,
             id: id.into(),
             icon,
             color: IconColor::default(),
@@ -60,15 +57,12 @@ impl<S: 'static + Send + Sync> IconButton<S> {
         self
     }
 
-    pub fn on_click(
-        mut self,
-        handler: impl Fn(&mut S, &mut ViewContext<S>) + 'static + Send + Sync,
-    ) -> Self {
+    pub fn on_click(mut self, handler: impl 'static + Fn(&mut S, &mut ViewContext<S>) + Send + Sync) -> Self {
         self.handlers.click = Some(Arc::new(handler));
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let icon_color = match (self.state, self.color) {
diff --git a/crates/ui2/src/components/keybinding.rs b/crates/ui2/src/components/keybinding.rs
index 2fb40adac6446c1cc47d1682466110c6705db228..2b0eefa4eaa347bf8c6b5b3d05f985921a824298 100644
--- a/crates/ui2/src/components/keybinding.rs
+++ b/crates/ui2/src/components/keybinding.rs
@@ -1,14 +1,11 @@
 use std::collections::HashSet;
-use std::marker::PhantomData;
 
 use strum::{EnumIter, IntoEnumIterator};
 
 use crate::prelude::*;
 
-#[derive(Element)]
-pub struct Keybinding<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-
+#[derive(Component)]
+pub struct Keybinding {
     /// A keybinding consists of a key and a set of modifier keys.
     /// More then one keybinding produces a chord.
     ///
@@ -16,10 +13,9 @@ pub struct Keybinding<S: 'static + Send + Sync> {
     keybinding: Vec<(String, ModifierKeys)>,
 }
 
-impl<S: 'static + Send + Sync> Keybinding<S> {
+impl Keybinding {
     pub fn new(key: String, modifiers: ModifierKeys) -> Self {
         Self {
-            state_type: PhantomData,
             keybinding: vec![(key, modifiers)],
         }
     }
@@ -29,12 +25,11 @@ impl<S: 'static + Send + Sync> Keybinding<S> {
         second_note: (String, ModifierKeys),
     ) -> Self {
         Self {
-            state_type: PhantomData,
             keybinding: vec![first_note, second_note],
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div()
             .flex()
             .gap_2()
@@ -54,21 +49,17 @@ impl<S: 'static + Send + Sync> Keybinding<S> {
     }
 }
 
-#[derive(Element)]
-pub struct Key<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Key {
     key: SharedString,
 }
 
-impl<S: 'static + Send + Sync> Key<S> {
+impl Key {
     pub fn new(key: impl Into<SharedString>) -> Self {
-        Self {
-            state_type: PhantomData,
-            key: key.into(),
-        }
+        Self { key: key.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         div()
@@ -173,27 +164,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct KeybindingStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct KeybindingStory;
 
-    impl<S: 'static + Send + Sync + Clone> KeybindingStory<S> {
+    impl KeybindingStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let all_modifier_permutations = ModifierKey::iter().permutations(2);
 
             Story::container(cx)
-                .child(Story::title_for::<_, Keybinding<S>>(cx))
+                .child(Story::title_for::<_, Keybinding>(cx))
                 .child(Story::label(cx, "Single Key"))
                 .child(Keybinding::new("Z".to_string(), ModifierKeys::new()))
                 .child(Story::label(cx, "Single Key with Modifier"))
diff --git a/crates/ui2/src/components/language_selector.rs b/crates/ui2/src/components/language_selector.rs
index 224db69754441e0fd0e1f362c5ba534d423c8403..db42b28281171e243a1d8b7c47e6d67ac1c4dd02 100644
--- a/crates/ui2/src/components/language_selector.rs
+++ b/crates/ui2/src/components/language_selector.rs
@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{OrderMethod, Palette, PaletteItem};
 
-#[derive(Element)]
-pub struct LanguageSelector<S: 'static + Send + Sync + Clone> {
+#[derive(Component)]
+pub struct LanguageSelector {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync + Clone> LanguageSelector<S> {
+impl LanguageSelector {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div().id(self.id.clone()).child(
             Palette::new("palette")
                 .items(vec![
@@ -48,25 +42,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct LanguageSelectorStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct LanguageSelectorStory;
 
-    impl<S: 'static + Send + Sync + Clone> LanguageSelectorStory<S> {
+    impl LanguageSelectorStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, LanguageSelector<S>>(cx))
+                .child(Story::title_for::<_, LanguageSelector>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(LanguageSelector::new("language-selector"))
         }
diff --git a/crates/ui2/src/components/list.rs b/crates/ui2/src/components/list.rs
index 99282fa06dd45ef1834942bfae1c56946a2fcb4c..0bf413e2172654db6b2828cc383928ec05fa6499 100644
--- a/crates/ui2/src/components/list.rs
+++ b/crates/ui2/src/components/list.rs
@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{div, relative, Div};
 
 use crate::settings::user_settings;
@@ -17,9 +15,8 @@ pub enum ListItemVariant {
     Inset,
 }
 
-#[derive(Element)]
-pub struct ListHeader<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct ListHeader {
     label: SharedString,
     left_icon: Option<Icon>,
     variant: ListItemVariant,
@@ -27,10 +24,9 @@ pub struct ListHeader<S: 'static + Send + Sync> {
     toggleable: Toggleable,
 }
 
-impl<S: 'static + Send + Sync> ListHeader<S> {
+impl ListHeader {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             label: label.into(),
             left_icon: None,
             variant: ListItemVariant::default(),
@@ -59,7 +55,7 @@ impl<S: 'static + Send + Sync> ListHeader<S> {
         self
     }
 
-    fn disclosure_control(&self) -> Div<S> {
+    fn disclosure_control<S: 'static>(&self) -> Div<S> {
         let is_toggleable = self.toggleable != Toggleable::NotToggleable;
         let is_toggled = Toggleable::is_toggled(&self.toggleable);
 
@@ -92,7 +88,7 @@ impl<S: 'static + Send + Sync> ListHeader<S> {
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let is_toggleable = self.toggleable != Toggleable::NotToggleable;
@@ -134,18 +130,16 @@ impl<S: 'static + Send + Sync> ListHeader<S> {
     }
 }
 
-#[derive(Element)]
-pub struct ListSubHeader<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct ListSubHeader {
     label: SharedString,
     left_icon: Option<Icon>,
     variant: ListItemVariant,
 }
 
-impl<S: 'static + Send + Sync> ListSubHeader<S> {
+impl ListSubHeader {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             label: label.into(),
             left_icon: None,
             variant: ListItemVariant::default(),
@@ -157,7 +151,7 @@ impl<S: 'static + Send + Sync> ListSubHeader<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         h_stack().flex_1().w_full().relative().py_1().child(
             div()
                 .h_6()
@@ -197,40 +191,40 @@ pub enum ListEntrySize {
     Medium,
 }
 
-#[derive(Element)]
-pub enum ListItem<S: 'static + Send + Sync> {
-    Entry(ListEntry<S>),
+#[derive(Component)]
+pub enum ListItem<S: 'static> {
+    Entry(ListEntry),
     Details(ListDetailsEntry<S>),
-    Separator(ListSeparator<S>),
-    Header(ListSubHeader<S>),
+    Separator(ListSeparator),
+    Header(ListSubHeader),
 }
 
-impl<S: 'static + Send + Sync> From<ListEntry<S>> for ListItem<S> {
-    fn from(entry: ListEntry<S>) -> Self {
+impl<S: 'static> From<ListEntry> for ListItem<S> {
+    fn from(entry: ListEntry) -> Self {
         Self::Entry(entry)
     }
 }
 
-impl<S: 'static + Send + Sync> From<ListDetailsEntry<S>> for ListItem<S> {
+impl<S: 'static> From<ListDetailsEntry<S>> for ListItem<S> {
     fn from(entry: ListDetailsEntry<S>) -> Self {
         Self::Details(entry)
     }
 }
 
-impl<S: 'static + Send + Sync> From<ListSeparator<S>> for ListItem<S> {
-    fn from(entry: ListSeparator<S>) -> Self {
+impl<S: 'static> From<ListSeparator> for ListItem<S> {
+    fn from(entry: ListSeparator) -> Self {
         Self::Separator(entry)
     }
 }
 
-impl<S: 'static + Send + Sync> From<ListSubHeader<S>> for ListItem<S> {
-    fn from(entry: ListSubHeader<S>) -> Self {
+impl<S: 'static> From<ListSubHeader> for ListItem<S> {
+    fn from(entry: ListSubHeader) -> Self {
         Self::Header(entry)
     }
 }
 
-impl<S: 'static + Send + Sync> ListItem<S> {
-    fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+impl<S: 'static> ListItem<S> {
+    fn render(self, view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         match self {
             ListItem::Entry(entry) => div().child(entry.render(view, cx)),
             ListItem::Separator(separator) => div().child(separator.render(view, cx)),
@@ -239,11 +233,11 @@ impl<S: 'static + Send + Sync> ListItem<S> {
         }
     }
 
-    pub fn new(label: Label<S>) -> Self {
+    pub fn new(label: Label) -> Self {
         Self::Entry(ListEntry::new(label))
     }
 
-    pub fn as_entry(&mut self) -> Option<&mut ListEntry<S>> {
+    pub fn as_entry(&mut self) -> Option<&mut ListEntry> {
         if let Self::Entry(entry) = self {
             Some(entry)
         } else {
@@ -252,11 +246,11 @@ impl<S: 'static + Send + Sync> ListItem<S> {
     }
 }
 
-#[derive(Element)]
-pub struct ListEntry<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct ListEntry {
     disclosure_control_style: DisclosureControlVisibility,
     indent_level: u32,
-    label: Option<Label<S>>,
+    label: Option<Label>,
     left_content: Option<LeftContent>,
     variant: ListItemVariant,
     size: ListEntrySize,
@@ -265,8 +259,8 @@ pub struct ListEntry<S: 'static + Send + Sync> {
     overflow: OverflowStyle,
 }
 
-impl<S: 'static + Send + Sync> ListEntry<S> {
-    pub fn new(label: Label<S>) -> Self {
+impl ListEntry {
+    pub fn new(label: Label) -> Self {
         Self {
             disclosure_control_style: DisclosureControlVisibility::default(),
             indent_level: 0,
@@ -344,10 +338,10 @@ impl<S: 'static + Send + Sync> ListEntry<S> {
         }
     }
 
-    fn disclosure_control(
+    fn disclosure_control<V: 'static>(
         &mut self,
-        cx: &mut ViewContext<S>,
-    ) -> Option<impl Element<ViewState = S>> {
+        cx: &mut ViewContext<V>,
+    ) -> Option<impl Component<V>> {
         let disclosure_control_icon = if let Some(ToggleState::Toggled) = self.toggle {
             IconElement::new(Icon::ChevronDown)
         } else {
@@ -367,7 +361,7 @@ impl<S: 'static + Send + Sync> ListEntry<S> {
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let settings = user_settings(cx);
         let theme = theme(cx);
 
@@ -423,18 +417,18 @@ impl<S: 'static + Send + Sync> ListEntry<S> {
     }
 }
 
-struct ListDetailsEntryHandlers<S: 'static + Send + Sync> {
+struct ListDetailsEntryHandlers<S: 'static> {
     click: Option<ClickHandler<S>>,
 }
 
-impl<S: 'static + Send + Sync> Default for ListDetailsEntryHandlers<S> {
+impl<S: 'static> Default for ListDetailsEntryHandlers<S> {
     fn default() -> Self {
         Self { click: None }
     }
 }
 
-#[derive(Element)]
-pub struct ListDetailsEntry<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct ListDetailsEntry<S: 'static> {
     label: SharedString,
     meta: Option<SharedString>,
     left_content: Option<LeftContent>,
@@ -445,7 +439,7 @@ pub struct ListDetailsEntry<S: 'static + Send + Sync> {
     seen: bool,
 }
 
-impl<S: 'static + Send + Sync> ListDetailsEntry<S> {
+impl<S: 'static> ListDetailsEntry<S> {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
             label: label.into(),
@@ -477,7 +471,7 @@ impl<S: 'static + Send + Sync> ListDetailsEntry<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
         let settings = user_settings(cx);
 
@@ -522,34 +516,30 @@ impl<S: 'static + Send + Sync> ListDetailsEntry<S> {
     }
 }
 
-#[derive(Clone, Element)]
-pub struct ListSeparator<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-}
+#[derive(Clone, Component)]
+pub struct ListSeparator;
 
-impl<S: 'static + Send + Sync> ListSeparator<S> {
+impl ListSeparator {
     pub fn new() -> Self {
-        Self {
-            state_type: PhantomData,
-        }
+        Self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         div().h_px().w_full().bg(theme.border)
     }
 }
 
-#[derive(Element)]
-pub struct List<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct List<S: 'static> {
     items: Vec<ListItem<S>>,
     empty_message: SharedString,
-    header: Option<ListHeader<S>>,
+    header: Option<ListHeader>,
     toggleable: Toggleable,
 }
 
-impl<S: 'static + Send + Sync> List<S> {
+impl<S: 'static> List<S> {
     pub fn new(items: Vec<ListItem<S>>) -> Self {
         Self {
             items,
@@ -564,7 +554,7 @@ impl<S: 'static + Send + Sync> List<S> {
         self
     }
 
-    pub fn header(mut self, header: ListHeader<S>) -> Self {
+    pub fn header(mut self, header: ListHeader) -> Self {
         self.header = Some(header);
         self
     }
@@ -574,7 +564,7 @@ impl<S: 'static + Send + Sync> List<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let is_toggleable = self.toggleable != Toggleable::NotToggleable;
         let is_toggled = Toggleable::is_toggled(&self.toggleable);
 
diff --git a/crates/ui2/src/components/modal.rs b/crates/ui2/src/components/modal.rs
index 792f8e12682abe83d437df2758abe1c267ee79e4..2036c5df116019321b4a7225ca464a810e73e97a 100644
--- a/crates/ui2/src/components/modal.rs
+++ b/crates/ui2/src/components/modal.rs
@@ -1,25 +1,21 @@
-use std::marker::PhantomData;
-
 use gpui2::AnyElement;
 use smallvec::SmallVec;
 
 use crate::{h_stack, prelude::*, v_stack, Button, Icon, IconButton, Label};
 
-#[derive(Element)]
-pub struct Modal<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Modal<S: 'static> {
     id: ElementId,
-    state_type: PhantomData<S>,
     title: Option<SharedString>,
     primary_action: Option<Button<S>>,
     secondary_action: Option<Button<S>>,
     children: SmallVec<[AnyElement<S>; 2]>,
 }
 
-impl<S: 'static + Send + Sync> Modal<S> {
+impl<S: 'static> Modal<S> {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
             title: None,
             primary_action: None,
             secondary_action: None,
@@ -42,7 +38,7 @@ impl<S: 'static + Send + Sync> Modal<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         v_stack()
@@ -80,8 +76,8 @@ impl<S: 'static + Send + Sync> Modal<S> {
     }
 }
 
-impl<S: 'static + Send + Sync> ParentElement for Modal<S> {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]> {
+impl<S: 'static> ParentElement<S> for Modal<S> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<S>; 2]> {
         &mut self.children
     }
 }
diff --git a/crates/ui2/src/components/multi_buffer.rs b/crates/ui2/src/components/multi_buffer.rs
index b53ea13ef232f3681650923672ced4cccef06f91..bbf893f8eff2955ab4354c90e4a874d91e987146 100644
--- a/crates/ui2/src/components/multi_buffer.rs
+++ b/crates/ui2/src/components/multi_buffer.rs
@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{v_stack, Buffer, Icon, IconButton, Label};
 
-#[derive(Element)]
-pub struct MultiBuffer<S: 'static + Send + Sync + Clone> {
-    state_type: PhantomData<S>,
-    buffers: Vec<Buffer<S>>,
+#[derive(Component)]
+pub struct MultiBuffer {
+    buffers: Vec<Buffer>,
 }
 
-impl<S: 'static + Send + Sync + Clone> MultiBuffer<S> {
-    pub fn new(buffers: Vec<Buffer<S>>) -> Self {
-        Self {
-            state_type: PhantomData,
-            buffers,
-        }
+impl MultiBuffer {
+    pub fn new(buffers: Vec<Buffer>) -> Self {
+        Self { buffers }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         v_stack()
@@ -50,27 +44,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct MultiBufferStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct MultiBufferStory;
 
-    impl<S: 'static + Send + Sync + Clone> MultiBufferStory<S> {
+    impl MultiBufferStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let theme = theme(cx);
 
             Story::container(cx)
-                .child(Story::title_for::<_, MultiBuffer<S>>(cx))
+                .child(Story::title_for::<_, MultiBuffer>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(MultiBuffer::new(vec![
                     hello_world_rust_buffer_example(&theme),
diff --git a/crates/ui2/src/components/notification_toast.rs b/crates/ui2/src/components/notification_toast.rs
index b7709e1a58ee1e0cfb199a6d140b09245ea239a2..6be3e3b1b55e4b0f414c9cb93624961603111e4d 100644
--- a/crates/ui2/src/components/notification_toast.rs
+++ b/crates/ui2/src/components/notification_toast.rs
@@ -1,20 +1,16 @@
-use std::marker::PhantomData;
-
 use gpui2::rems;
 
 use crate::{h_stack, prelude::*, Icon};
 
-#[derive(Element)]
-pub struct NotificationToast<S: 'static + Send + Sync + Clone> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct NotificationToast {
     label: SharedString,
     icon: Option<Icon>,
 }
 
-impl<S: 'static + Send + Sync + Clone> NotificationToast<S> {
+impl NotificationToast {
     pub fn new(label: SharedString) -> Self {
         Self {
-            state_type: PhantomData,
             label,
             icon: None,
         }
@@ -28,7 +24,7 @@ impl<S: 'static + Send + Sync + Clone> NotificationToast<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         h_stack()
diff --git a/crates/ui2/src/components/notifications_panel.rs b/crates/ui2/src/components/notifications_panel.rs
index eaf64eb4848fc195488a7e9a80ec57a8f33c3a5e..e154d717d47acd4e525f02898924d285cc64dfb2 100644
--- a/crates/ui2/src/components/notifications_panel.rs
+++ b/crates/ui2/src/components/notifications_panel.rs
@@ -1,23 +1,20 @@
-use std::marker::PhantomData;
 
 use crate::{prelude::*, static_new_notification_items, static_read_notification_items};
 use crate::{List, ListHeader};
 
-#[derive(Element)]
-pub struct NotificationsPanel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct NotificationsPanel {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync> NotificationsPanel<S> {
+impl NotificationsPanel {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         div()
@@ -58,25 +55,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct NotificationsPanelStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct NotificationsPanelStory;
 
-    impl<S: 'static + Send + Sync + Clone> NotificationsPanelStory<S> {
+    impl NotificationsPanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, NotificationsPanel<S>>(cx))
+                .child(Story::title_for::<_, NotificationsPanel>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     Panel::new("panel", cx).child(NotificationsPanel::new("notifications_panel")),
diff --git a/crates/ui2/src/components/palette.rs b/crates/ui2/src/components/palette.rs
index 87eb88c76487861bd85cc970fb182a03edea5ff7..9f2da78a53942a49c4eea0130efac740f3c033b9 100644
--- a/crates/ui2/src/components/palette.rs
+++ b/crates/ui2/src/components/palette.rs
@@ -1,23 +1,19 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{h_stack, v_stack, Keybinding, Label, LabelColor};
 
-#[derive(Element)]
-pub struct Palette<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Palette {
     id: ElementId,
-    state_type: PhantomData<S>,
     input_placeholder: SharedString,
     empty_string: SharedString,
-    items: Vec<PaletteItem<S>>,
+    items: Vec<PaletteItem>,
     default_order: OrderMethod,
 }
 
-impl<S: 'static + Send + Sync> Palette<S> {
+impl Palette {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
             input_placeholder: "Find something...".into(),
             empty_string: "No items found.".into(),
             items: vec![],
@@ -25,7 +21,7 @@ impl<S: 'static + Send + Sync> Palette<S> {
         }
     }
 
-    pub fn items(mut self, items: Vec<PaletteItem<S>>) -> Self {
+    pub fn items(mut self, items: Vec<PaletteItem>) -> Self {
         self.items = items;
         self
     }
@@ -46,7 +42,7 @@ impl<S: 'static + Send + Sync> Palette<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         v_stack()
@@ -101,14 +97,14 @@ impl<S: 'static + Send + Sync> Palette<S> {
     }
 }
 
-#[derive(Element)]
-pub struct PaletteItem<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct PaletteItem {
     pub label: SharedString,
     pub sublabel: Option<SharedString>,
-    pub keybinding: Option<Keybinding<S>>,
+    pub keybinding: Option<Keybinding>,
 }
 
-impl<S: 'static + Send + Sync> PaletteItem<S> {
+impl PaletteItem {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
             label: label.into(),
@@ -129,13 +125,13 @@ impl<S: 'static + Send + Sync> PaletteItem<S> {
 
     pub fn keybinding<K>(mut self, keybinding: K) -> Self
     where
-        K: Into<Option<Keybinding<S>>>,
+        K: Into<Option<Keybinding>>,
     {
         self.keybinding = keybinding.into();
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div()
             .flex()
             .flex_row()
@@ -160,25 +156,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct PaletteStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct PaletteStory;
 
-    impl<S: 'static + Send + Sync + Clone> PaletteStory<S> {
+    impl PaletteStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, Palette<S>>(cx))
+                .child(Story::title_for::<_, Palette>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Palette::new("palette-1"))
                 .child(Story::label(cx, "With Items"))
diff --git a/crates/ui2/src/components/panel.rs b/crates/ui2/src/components/panel.rs
index 90dbcf39599566392773f658501e4450a4578b86..a1a075a4b2f1a81468137ec9964630fc897b7d55 100644
--- a/crates/ui2/src/components/panel.rs
+++ b/crates/ui2/src/components/panel.rs
@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{AbsoluteLength, AnyElement};
 use smallvec::SmallVec;
 
@@ -40,10 +38,9 @@ pub enum PanelSide {
 
 use std::collections::HashSet;
 
-#[derive(Element)]
-pub struct Panel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Panel<S: 'static> {
     id: ElementId,
-    state_type: PhantomData<S>,
     current_side: PanelSide,
     /// Defaults to PanelAllowedSides::LeftAndRight
     allowed_sides: PanelAllowedSides,
@@ -52,13 +49,12 @@ pub struct Panel<S: 'static + Send + Sync> {
     children: SmallVec<[AnyElement<S>; 2]>,
 }
 
-impl<S: 'static + Send + Sync> Panel<S> {
+impl<S: 'static> Panel<S> {
     pub fn new(id: impl Into<ElementId>, cx: &mut WindowContext) -> Self {
         let settings = user_settings(cx);
 
         Self {
             id: id.into(),
-            state_type: PhantomData,
             current_side: PanelSide::default(),
             allowed_sides: PanelAllowedSides::default(),
             initial_width: *settings.default_panel_size,
@@ -96,7 +92,7 @@ impl<S: 'static + Send + Sync> Panel<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let current_size = self.width.unwrap_or(self.initial_width);
@@ -121,8 +117,8 @@ impl<S: 'static + Send + Sync> Panel<S> {
     }
 }
 
-impl<S: 'static + Send + Sync> ParentElement for Panel<S> {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]> {
+impl<S: 'static> ParentElement<S> for Panel<S> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<S>; 2]> {
         &mut self.children
     }
 }
@@ -136,23 +132,15 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct PanelStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct PanelStory;
 
-    impl<S: 'static + Send + Sync + Clone> PanelStory<S> {
+    impl PanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
                 .child(Story::title_for::<_, Panel<S>>(cx))
                 .child(Story::label(cx, "Default"))
diff --git a/crates/ui2/src/components/panes.rs b/crates/ui2/src/components/panes.rs
index fd1ec56ae7cdf185bf00e2cf556b0e6d19ca4757..a45de158bbbb133d3cc910fa244f8f3784d84997 100644
--- a/crates/ui2/src/components/panes.rs
+++ b/crates/ui2/src/components/panes.rs
@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{hsla, red, AnyElement, ElementId, ExternalPaths, Hsla, Length, Size};
 use smallvec::SmallVec;
 
@@ -12,25 +10,29 @@ pub enum SplitDirection {
     Vertical,
 }
 
-#[derive(Element)]
-pub struct Pane<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Pane<V: 'static> {
     id: ElementId,
-    state_type: PhantomData<S>,
     size: Size<Length>,
     fill: Hsla,
-    children: SmallVec<[AnyElement<S>; 2]>,
+    children: SmallVec<[AnyElement<V>; 2]>,
 }
 
-impl<S: 'static + Send + Sync> Pane<S> {
+// impl<V: 'static> IntoAnyElement<V> for Pane<V> {
+//     fn into_any(self) -> AnyElement<V> {
+//         (move |view_state: &mut V, cx: &mut ViewContext<'_, '_, V>| self.render(view_state, cx))
+//             .into_any()
+//     }
+// }
+
+impl<V: 'static> Pane<V> {
     pub fn new(id: impl Into<ElementId>, size: Size<Length>) -> Self {
         // Fill is only here for debugging purposes, remove before release
 
         Self {
             id: id.into(),
-            state_type: PhantomData,
             size,
             fill: hsla(0.3, 0.3, 0.3, 1.),
-            // fill: system_color.transparent,
             children: SmallVec::new(),
         }
     }
@@ -40,7 +42,7 @@ impl<S: 'static + Send + Sync> Pane<S> {
         self
     }
 
-    fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         div()
             .id(self.id.clone())
             .flex()
@@ -49,12 +51,7 @@ impl<S: 'static + Send + Sync> Pane<S> {
             .w(self.size.width)
             .h(self.size.height)
             .relative()
-            .child(
-                div()
-                    .z_index(0)
-                    .size_full()
-                    .children(self.children.drain(..)),
-            )
+            .child(div().z_index(0).size_full().children(self.children))
             .child(
                 div()
                     .z_index(1)
@@ -69,40 +66,37 @@ impl<S: 'static + Send + Sync> Pane<S> {
     }
 }
 
-impl<S: 'static + Send + Sync> ParentElement for Pane<S> {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]> {
+impl<V: 'static> ParentElement<V> for Pane<V> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<V>; 2]> {
         &mut self.children
     }
 }
 
-#[derive(Element)]
-pub struct PaneGroup<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-    groups: Vec<PaneGroup<S>>,
-    panes: Vec<Pane<S>>,
+#[derive(Component)]
+pub struct PaneGroup<V: 'static> {
+    groups: Vec<PaneGroup<V>>,
+    panes: Vec<Pane<V>>,
     split_direction: SplitDirection,
 }
 
-impl<S: 'static + Send + Sync> PaneGroup<S> {
-    pub fn new_groups(groups: Vec<PaneGroup<S>>, split_direction: SplitDirection) -> Self {
+impl<V: 'static> PaneGroup<V> {
+    pub fn new_groups(groups: Vec<PaneGroup<V>>, split_direction: SplitDirection) -> Self {
         Self {
-            state_type: PhantomData,
             groups,
             panes: Vec::new(),
             split_direction,
         }
     }
 
-    pub fn new_panes(panes: Vec<Pane<S>>, split_direction: SplitDirection) -> Self {
+    pub fn new_panes(panes: Vec<Pane<V>>, split_direction: SplitDirection) -> Self {
         Self {
-            state_type: PhantomData,
             groups: Vec::new(),
             panes,
             split_direction,
         }
     }
 
-    fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         if !self.panes.is_empty() {
@@ -112,7 +106,7 @@ impl<S: 'static + Send + Sync> PaneGroup<S> {
                 .gap_px()
                 .w_full()
                 .h_full()
-                .children(self.panes.iter_mut().map(|pane| pane.render(view, cx)));
+                .children(self.panes.drain(..).map(|pane| pane.render(view, cx)));
 
             if self.split_direction == SplitDirection::Horizontal {
                 return el;
@@ -129,7 +123,7 @@ impl<S: 'static + Send + Sync> PaneGroup<S> {
                 .w_full()
                 .h_full()
                 .bg(theme.editor)
-                .children(self.groups.iter_mut().map(|group| group.render(view, cx)));
+                .children(self.groups.drain(..).map(|group| group.render(view, cx)));
 
             if self.split_direction == SplitDirection::Horizontal {
                 return el;
diff --git a/crates/ui2/src/components/player_stack.rs b/crates/ui2/src/components/player_stack.rs
index 0240af8f47c419d7e560553297e4d5991abc57a3..8c2d0bbf25788b5f0f74362656500335e31a191c 100644
--- a/crates/ui2/src/components/player_stack.rs
+++ b/crates/ui2/src/components/player_stack.rs
@@ -1,23 +1,19 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{Avatar, Facepile, PlayerWithCallStatus};
 
-#[derive(Element)]
-pub struct PlayerStack<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct PlayerStack {
     player_with_call_status: PlayerWithCallStatus,
 }
 
-impl<S: 'static + Send + Sync> PlayerStack<S> {
+impl PlayerStack {
     pub fn new(player_with_call_status: PlayerWithCallStatus) -> Self {
         Self {
-            state_type: PhantomData,
             player_with_call_status,
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
         let player = self.player_with_call_status.get_player();
         self.player_with_call_status.get_call_status();
diff --git a/crates/ui2/src/components/project_panel.rs b/crates/ui2/src/components/project_panel.rs
index 9328b21d4350a5eb35cd0a02bf208682a4bbaf6f..0898b70c8e48cdac8afb5dba985ccfcdf33d1cb7 100644
--- a/crates/ui2/src/components/project_panel.rs
+++ b/crates/ui2/src/components/project_panel.rs
@@ -1,25 +1,19 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{
     static_project_panel_project_items, static_project_panel_single_items, Input, List, ListHeader,
 };
 
-#[derive(Element)]
-pub struct ProjectPanel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct ProjectPanel {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync> ProjectPanel<S> {
+impl ProjectPanel {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         div()
@@ -67,25 +61,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ProjectPanelStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ProjectPanelStory;
 
-    impl<S: 'static + Send + Sync + Clone> ProjectPanelStory<S> {
+    impl ProjectPanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, ProjectPanel<S>>(cx))
+                .child(Story::title_for::<_, ProjectPanel>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     Panel::new("project-panel-outer", cx)
diff --git a/crates/ui2/src/components/recent_projects.rs b/crates/ui2/src/components/recent_projects.rs
index 6a5f570562fc6bf002ef04bfa80025af406b070d..67a32ad009d0a703d9b9ef9d054c175abc0c1737 100644
--- a/crates/ui2/src/components/recent_projects.rs
+++ b/crates/ui2/src/components/recent_projects.rs
@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{OrderMethod, Palette, PaletteItem};
 
-#[derive(Element)]
-pub struct RecentProjects<S: 'static + Send + Sync + Clone> {
+#[derive(Component)]
+pub struct RecentProjects {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync + Clone> RecentProjects<S> {
+impl RecentProjects {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div().id(self.id.clone()).child(
             Palette::new("palette")
                 .items(vec![
@@ -44,25 +38,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct RecentProjectsStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct RecentProjectsStory;
 
-    impl<S: 'static + Send + Sync + Clone> RecentProjectsStory<S> {
+    impl RecentProjectsStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, RecentProjects<S>>(cx))
+                .child(Story::title_for::<_, RecentProjects>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(RecentProjects::new("recent-projects"))
         }
diff --git a/crates/ui2/src/components/status_bar.rs b/crates/ui2/src/components/status_bar.rs
index db28ac5070353316dd5cec4db318ed6e20040caa..e2fcfe9e0240c8f6665cc71468332f50457034d4 100644
--- a/crates/ui2/src/components/status_bar.rs
+++ b/crates/ui2/src/components/status_bar.rs
@@ -28,8 +28,8 @@ impl Default for ToolGroup {
     }
 }
 
-#[derive(Element)]
-#[element(view_state = "Workspace")]
+#[derive(Component)]
+#[component(view_type = "Workspace")]
 pub struct StatusBar {
     left_tools: Option<ToolGroup>,
     right_tools: Option<ToolGroup>,
@@ -83,10 +83,10 @@ impl StatusBar {
     }
 
     fn render(
-        &mut self,
+        self,
         view: &mut Workspace,
         cx: &mut ViewContext<Workspace>,
-    ) -> impl Element<ViewState = Workspace> {
+    ) -> impl Component<Workspace> {
         let theme = theme(cx);
 
         div()
@@ -105,7 +105,7 @@ impl StatusBar {
         &self,
         workspace: &mut Workspace,
         cx: &WindowContext,
-    ) -> impl Element<ViewState = Workspace> {
+    ) -> impl Component<Workspace> {
         div()
             .flex()
             .items_center()
@@ -136,7 +136,7 @@ impl StatusBar {
         &self,
         workspace: &mut Workspace,
         cx: &WindowContext,
-    ) -> impl Element<ViewState = Workspace> {
+    ) -> impl Component<Workspace> {
         div()
             .flex()
             .items_center()
diff --git a/crates/ui2/src/components/tab.rs b/crates/ui2/src/components/tab.rs
index 451dba9aa47978351b1b06777340465fc421e862..45c57ae4842a813acf87d8017a934271c1531528 100644
--- a/crates/ui2/src/components/tab.rs
+++ b/crates/ui2/src/components/tab.rs
@@ -1,11 +1,8 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{Icon, IconColor, IconElement, Label, LabelColor};
 
-#[derive(Element, Clone)]
-pub struct Tab<S: 'static + Send + Sync + Clone> {
-    state_type: PhantomData<S>,
+#[derive(Component, Clone)]
+pub struct Tab {
     id: ElementId,
     title: String,
     icon: Option<Icon>,
@@ -22,10 +19,9 @@ struct TabDragState {
     title: String,
 }
 
-impl<S: 'static + Send + Sync + Clone> Tab<S> {
+impl Tab {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
-            state_type: PhantomData,
             id: id.into(),
             title: "untitled".to_string(),
             icon: None,
@@ -81,7 +77,7 @@ impl<S: 'static + Send + Sync + Clone> Tab<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
         let has_fs_conflict = self.fs_status == FileSystemStatus::Conflict;
         let is_deleted = self.fs_status == FileSystemStatus::Deleted;
@@ -176,28 +172,20 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct TabStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct TabStory;
 
-    impl<S: 'static + Send + Sync + Clone> TabStory<S> {
+    impl TabStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let git_statuses = GitStatus::iter();
             let fs_statuses = FileSystemStatus::iter();
 
             Story::container(cx)
-                .child(Story::title_for::<_, Tab<S>>(cx))
+                .child(Story::title_for::<_, Tab>(cx))
                 .child(
                     h_stack().child(
                         v_stack()
diff --git a/crates/ui2/src/components/tab_bar.rs b/crates/ui2/src/components/tab_bar.rs
index ef67088287db104e8669a1b9c2fc62687fff0077..4ebf7c6376960267b01c3b494d5ae4f81520eb9c 100644
--- a/crates/ui2/src/components/tab_bar.rs
+++ b/crates/ui2/src/components/tab_bar.rs
@@ -1,22 +1,18 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{Icon, IconButton, Tab};
 
-#[derive(Element)]
-pub struct TabBar<S: 'static + Send + Sync + Clone> {
+#[derive(Component)]
+pub struct TabBar {
     id: ElementId,
-    state_type: PhantomData<S>,
     /// Backwards, Forwards
     can_navigate: (bool, bool),
-    tabs: Vec<Tab<S>>,
+    tabs: Vec<Tab>,
 }
 
-impl<S: 'static + Send + Sync + Clone> TabBar<S> {
-    pub fn new(id: impl Into<ElementId>, tabs: Vec<Tab<S>>) -> Self {
+impl TabBar {
+    pub fn new(id: impl Into<ElementId>, tabs: Vec<Tab>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
             can_navigate: (false, false),
             tabs,
         }
@@ -27,7 +23,7 @@ impl<S: 'static + Send + Sync + Clone> TabBar<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let (can_navigate_back, can_navigate_forward) = self.can_navigate;
@@ -100,25 +96,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct TabBarStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct TabBarStory;
 
-    impl<S: 'static + Send + Sync + Clone> TabBarStory<S> {
+    impl TabBarStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, TabBar<S>>(cx))
+                .child(Story::title_for::<_, TabBar>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(TabBar::new(
                     "tab-bar",
diff --git a/crates/ui2/src/components/terminal.rs b/crates/ui2/src/components/terminal.rs
index 236a8961bbad8a8337dbdc653d75c1ecfc1bf3f5..eb95458f0fb8282c94044ed7e2b1f2c2021903ec 100644
--- a/crates/ui2/src/components/terminal.rs
+++ b/crates/ui2/src/components/terminal.rs
@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use gpui2::{relative, rems, Size};
 
 use crate::prelude::*;
 use crate::{Icon, IconButton, Pane, Tab};
 
-#[derive(Element)]
-pub struct Terminal<S: 'static + Send + Sync + Clone> {
-    state_type: PhantomData<S>,
-}
+#[derive(Component)]
+pub struct Terminal;
 
-impl<S: 'static + Send + Sync + Clone> Terminal<S> {
+impl Terminal {
     pub fn new() -> Self {
-        Self {
-            state_type: PhantomData,
-        }
+        Self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let can_navigate_back = true;
@@ -93,25 +87,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct TerminalStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct TerminalStory;
 
-    impl<S: 'static + Send + Sync + Clone> TerminalStory<S> {
+    impl TerminalStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, Terminal<S>>(cx))
+                .child(Story::title_for::<_, Terminal>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Terminal::new())
         }
diff --git a/crates/ui2/src/components/theme_selector.rs b/crates/ui2/src/components/theme_selector.rs
index 3186e814bdcd9a081c74e7b06a414297d0148f58..18dbaac407a433528c1fca1a72b92d205f99bb8f 100644
--- a/crates/ui2/src/components/theme_selector.rs
+++ b/crates/ui2/src/components/theme_selector.rs
@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{OrderMethod, Palette, PaletteItem};
 
-#[derive(Element)]
-pub struct ThemeSelector<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct ThemeSelector {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync> ThemeSelector<S> {
+impl ThemeSelector {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div().child(
             Palette::new(self.id.clone())
                 .items(vec![
@@ -49,25 +43,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ThemeSelectorStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ThemeSelectorStory;
 
-    impl<S: 'static + Send + Sync + Clone> ThemeSelectorStory<S> {
+    impl ThemeSelectorStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, ThemeSelector<S>>(cx))
+                .child(Story::title_for::<_, ThemeSelector>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(ThemeSelector::new("theme-selector"))
         }
diff --git a/crates/ui2/src/components/title_bar.rs b/crates/ui2/src/components/title_bar.rs
index 4cfb0921691bd00608745eb51dcae495807dd23e..2d080ac649dafa3dcc908be9e86d7c3ffc4ae6c8 100644
--- a/crates/ui2/src/components/title_bar.rs
+++ b/crates/ui2/src/components/title_bar.rs
@@ -87,7 +87,7 @@ impl TitleBar {
         )
     }
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         let theme = theme(cx);
         let settings = user_settings(cx);
 
@@ -204,7 +204,7 @@ mod stories {
             )
         }
 
-        fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
             Story::container(cx)
                 .child(Story::title_for::<_, TitleBar>(cx))
                 .child(Story::label(cx, "Default"))
diff --git a/crates/ui2/src/components/toast.rs b/crates/ui2/src/components/toast.rs
index f75f9218417843fa831e7212959c9eff5c909ff4..40c1e3a6a4a667aad6f526898072111b64faf4c8 100644
--- a/crates/ui2/src/components/toast.rs
+++ b/crates/ui2/src/components/toast.rs
@@ -22,13 +22,13 @@ pub enum ToastOrigin {
 /// they are actively showing the a process in progress.
 ///
 /// Only one toast may be visible at a time.
-#[derive(Element)]
-pub struct Toast<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Toast<S: 'static> {
     origin: ToastOrigin,
     children: SmallVec<[AnyElement<S>; 2]>,
 }
 
-impl<S: 'static + Send + Sync> Toast<S> {
+impl<S: 'static> Toast<S> {
     pub fn new(origin: ToastOrigin) -> Self {
         Self {
             origin,
@@ -36,7 +36,7 @@ impl<S: 'static + Send + Sync> Toast<S> {
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let mut div = div();
@@ -57,12 +57,12 @@ impl<S: 'static + Send + Sync> Toast<S> {
             .shadow_md()
             .overflow_hidden()
             .bg(theme.elevated_surface)
-            .children(self.children.drain(..))
+            .children(self.children)
     }
 }
 
-impl<S: 'static + Send + Sync> ParentElement for Toast<S> {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]> {
+impl<S: 'static> ParentElement<S> for Toast<S> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<S>; 2]> {
         &mut self.children
     }
 }
@@ -72,29 +72,19 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use std::marker::PhantomData;
-
     use crate::{Label, Story};
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ToastStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ToastStory;
 
-    impl<S: 'static + Send + Sync> ToastStory<S> {
+    impl ToastStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
                 .child(Story::title_for::<_, Toast<S>>(cx))
                 .child(Story::label(cx, "Default"))
diff --git a/crates/ui2/src/components/toolbar.rs b/crates/ui2/src/components/toolbar.rs
index 2dc5dbff2fb09a803fe2c0eada5cd9a5fe1119f7..e32697388e0d24908e3e8aa18409701b7fddf0b7 100644
--- a/crates/ui2/src/components/toolbar.rs
+++ b/crates/ui2/src/components/toolbar.rs
@@ -6,13 +6,13 @@ use crate::prelude::*;
 #[derive(Clone)]
 pub struct ToolbarItem {}
 
-#[derive(Element)]
-pub struct Toolbar<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Toolbar<S: 'static> {
     left_items: SmallVec<[AnyElement<S>; 2]>,
     right_items: SmallVec<[AnyElement<S>; 2]>,
 }
 
-impl<S: 'static + Send + Sync> Toolbar<S> {
+impl<S: 'static> Toolbar<S> {
     pub fn new() -> Self {
         Self {
             left_items: SmallVec::new(),
@@ -20,41 +20,41 @@ impl<S: 'static + Send + Sync> Toolbar<S> {
         }
     }
 
-    pub fn left_item(mut self, child: impl IntoAnyElement<S>) -> Self
+    pub fn left_item(mut self, child: impl Component<S>) -> Self
     where
         Self: Sized,
     {
-        self.left_items.push(child.into_any());
+        self.left_items.push(child.render());
         self
     }
 
-    pub fn left_items(mut self, iter: impl IntoIterator<Item = impl IntoAnyElement<S>>) -> Self
+    pub fn left_items(mut self, iter: impl IntoIterator<Item = impl Component<S>>) -> Self
     where
         Self: Sized,
     {
         self.left_items
-            .extend(iter.into_iter().map(|item| item.into_any()));
+            .extend(iter.into_iter().map(|item| item.render()));
         self
     }
 
-    pub fn right_item(mut self, child: impl IntoAnyElement<S>) -> Self
+    pub fn right_item(mut self, child: impl Component<S>) -> Self
     where
         Self: Sized,
     {
-        self.right_items.push(child.into_any());
+        self.right_items.push(child.render());
         self
     }
 
-    pub fn right_items(mut self, iter: impl IntoIterator<Item = impl IntoAnyElement<S>>) -> Self
+    pub fn right_items(mut self, iter: impl IntoIterator<Item = impl Component<S>>) -> Self
     where
         Self: Sized,
     {
         self.right_items
-            .extend(iter.into_iter().map(|item| item.into_any()));
+            .extend(iter.into_iter().map(|item| item.render()));
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         div()
@@ -72,7 +72,6 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use std::marker::PhantomData;
     use std::path::PathBuf;
     use std::str::FromStr;
 
@@ -80,27 +79,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ToolbarStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ToolbarStory;
 
-    impl<S: 'static + Send + Sync + Clone> ToolbarStory<S> {
+    impl ToolbarStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let theme = theme(cx);
 
             Story::container(cx)
-                .child(Story::title_for::<_, Toolbar<S>>(cx))
+                .child(Story::title_for::<_, Toolbar<V>>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     Toolbar::new()
diff --git a/crates/ui2/src/components/traffic_lights.rs b/crates/ui2/src/components/traffic_lights.rs
index 254855bc3f783eb5b1649a67018a36aed6d77b65..e3698adbf90dc940d781ed7e7570de18b3f4215c 100644
--- a/crates/ui2/src/components/traffic_lights.rs
+++ b/crates/ui2/src/components/traffic_lights.rs
@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 
 #[derive(Clone, Copy)]
@@ -9,23 +7,21 @@ enum TrafficLightColor {
     Green,
 }
 
-#[derive(Element)]
-struct TrafficLight<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+struct TrafficLight {
     color: TrafficLightColor,
     window_has_focus: bool,
 }
 
-impl<S: 'static + Send + Sync> TrafficLight<S> {
+impl TrafficLight {
     fn new(color: TrafficLightColor, window_has_focus: bool) -> Self {
         Self {
-            state_type: PhantomData,
             color,
             window_has_focus,
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let fill = match (self.window_has_focus, self.color) {
@@ -39,16 +35,14 @@ impl<S: 'static + Send + Sync> TrafficLight<S> {
     }
 }
 
-#[derive(Element)]
-pub struct TrafficLights<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct TrafficLights {
     window_has_focus: bool,
 }
 
-impl<S: 'static + Send + Sync> TrafficLights<S> {
+impl TrafficLights {
     pub fn new() -> Self {
         Self {
-            state_type: PhantomData,
             window_has_focus: true,
         }
     }
@@ -58,7 +52,7 @@ impl<S: 'static + Send + Sync> TrafficLights<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div()
             .flex()
             .items_center()
@@ -87,25 +81,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct TrafficLightsStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct TrafficLightsStory;
 
-    impl<S: 'static + Send + Sync> TrafficLightsStory<S> {
+    impl TrafficLightsStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, TrafficLights<S>>(cx))
+                .child(Story::title_for::<_, TrafficLights>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(TrafficLights::new())
                 .child(Story::label(cx, "Unfocused"))
diff --git a/crates/ui2/src/components/workspace.rs b/crates/ui2/src/components/workspace.rs
index e31b21e592bbfd39b15bc36768a88c504d7def26..e979de6d7c9db94f5938a4e340890f83d2524fe4 100644
--- a/crates/ui2/src/components/workspace.rs
+++ b/crates/ui2/src/components/workspace.rs
@@ -174,7 +174,7 @@ impl Workspace {
         view(cx.entity(|cx| Self::new(cx)), Self::render)
     }
 
-    pub fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    pub fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         let theme = old_theme(cx).clone();
 
         // HACK: This should happen inside of `debug_toggle_user_settings`, but
diff --git a/crates/ui2/src/element_ext.rs b/crates/ui2/src/element_ext.rs
index a6ad48e6296aafeeee7090b8f44f2197cddfce84..69603bbb59cd37826083dc1026214816fe77ee21 100644
--- a/crates/ui2/src/element_ext.rs
+++ b/crates/ui2/src/element_ext.rs
@@ -1,18 +1,15 @@
 use gpui2::Element;
 
-pub trait ElementExt<S: 'static + Send + Sync>: Element<ViewState = S> {
-    /// Applies a given function `then` to the current element if `condition` is true.
-    /// This function is used to conditionally modify the element based on a given condition.
-    /// If `condition` is false, it just returns the current element as it is.
-    fn when(mut self, condition: bool, then: impl FnOnce(Self) -> Self) -> Self
-    where
-        Self: Sized,
-    {
-        if condition {
-            self = then(self);
-        }
-        self
-    }
+pub trait ElementExt<S: 'static>: Element<S> {
+    // fn when(mut self, condition: bool, then: impl FnOnce(Self) -> Self) -> Self
+    // where
+    //     Self: Sized,
+    // {
+    //     if condition {
+    //         self = then(self);
+    //     }
+    //     self
+    // }
 
     // fn when_some<T, U>(mut self, option: Option<T>, then: impl FnOnce(Self, T) -> U) -> U
     // where
@@ -25,4 +22,4 @@ pub trait ElementExt<S: 'static + Send + Sync>: Element<ViewState = S> {
     // }
 }
 
-impl<S: 'static + Send + Sync, E: Element<ViewState = S>> ElementExt<S> for E {}
+impl<S: 'static, E: Element<S>> ElementExt<S> for E {}
diff --git a/crates/ui2/src/elements/avatar.rs b/crates/ui2/src/elements/avatar.rs
index 416a55a4f7ababbc0068891e6da418c258f4502a..3d540ec9ee29fd2624be11cd34af96fe35fc2422 100644
--- a/crates/ui2/src/elements/avatar.rs
+++ b/crates/ui2/src/elements/avatar.rs
@@ -1,20 +1,16 @@
-use std::marker::PhantomData;
-
 use gpui2::img;
 
 use crate::prelude::*;
 
-#[derive(Element)]
-pub struct Avatar<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Avatar {
     src: SharedString,
     shape: Shape,
 }
 
-impl<S: 'static + Send + Sync> Avatar<S> {
+impl Avatar {
     pub fn new(src: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             src: src.into(),
             shape: Shape::Circle,
         }
@@ -25,7 +21,7 @@ impl<S: 'static + Send + Sync> Avatar<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         let mut img = img();
@@ -51,25 +47,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct AvatarStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct AvatarStory;
 
-    impl<S: 'static + Send + Sync> AvatarStory<S> {
+    impl AvatarStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, Avatar<S>>(cx))
+                .child(Story::title_for::<_, Avatar>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Avatar::new(
                     "https://avatars.githubusercontent.com/u/1714999?v=4",
diff --git a/crates/ui2/src/elements/button.rs b/crates/ui2/src/elements/button.rs
index 9948c91999a7c9b58bf9b44b5b2cb4c3f513a2ea..24776c52c3ad162c349c4297ced751663cd0e8c7 100644
--- a/crates/ui2/src/elements/button.rs
+++ b/crates/ui2/src/elements/button.rs
@@ -1,4 +1,3 @@
-use std::marker::PhantomData;
 use std::sync::Arc;
 
 use gpui2::{div, DefiniteLength, Hsla, MouseButton, WindowContext};
@@ -49,21 +48,23 @@ impl ButtonVariant {
     }
 }
 
-pub type ClickHandler<S> = Arc<dyn Fn(&mut S, &mut ViewContext<S>) + 'static + Send + Sync>;
+pub type ClickHandler<S> = Arc<dyn Fn(&mut S, &mut ViewContext<S>) + Send + Sync>;
 
-struct ButtonHandlers<S: 'static + Send + Sync> {
+struct ButtonHandlers<S: 'static> {
     click: Option<ClickHandler<S>>,
 }
 
-impl<S: 'static + Send + Sync> Default for ButtonHandlers<S> {
+unsafe impl<S> Send for ButtonHandlers<S> {}
+unsafe impl<S> Sync for ButtonHandlers<S> {}
+
+impl<S: 'static> Default for ButtonHandlers<S> {
     fn default() -> Self {
         Self { click: None }
     }
 }
 
-#[derive(Element)]
-pub struct Button<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Button<S: 'static> {
     disabled: bool,
     handlers: ButtonHandlers<S>,
     icon: Option<Icon>,
@@ -73,10 +74,9 @@ pub struct Button<S: 'static + Send + Sync> {
     width: Option<DefiniteLength>,
 }
 
-impl<S: 'static + Send + Sync> Button<S> {
+impl<S: 'static> Button<S> {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             disabled: false,
             handlers: ButtonHandlers::default(),
             icon: None,
@@ -140,21 +140,17 @@ impl<S: 'static + Send + Sync> Button<S> {
         }
     }
 
-    fn render_label(&self) -> Label<S> {
+    fn render_label(&self) -> Label {
         Label::new(self.label.clone())
             .color(self.label_color())
             .line_height_style(LineHeightStyle::UILabel)
     }
 
-    fn render_icon(&self, icon_color: IconColor) -> Option<IconElement<S>> {
+    fn render_icon(&self, icon_color: IconColor) -> Option<IconElement> {
         self.icon.map(|i| IconElement::new(i).color(icon_color))
     }
 
-    pub fn render(
-        &mut self,
-        _view: &mut S,
-        cx: &mut ViewContext<S>,
-    ) -> impl Element<ViewState = S> {
+    pub fn render(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let icon_color = self.icon_color();
 
         let mut button = h_stack()
@@ -197,24 +193,20 @@ impl<S: 'static + Send + Sync> Button<S> {
     }
 }
 
-#[derive(Element)]
-pub struct ButtonGroup<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-    buttons: Vec<Button<S>>,
+#[derive(Component)]
+pub struct ButtonGroup<V: 'static> {
+    buttons: Vec<Button<V>>,
 }
 
-impl<S: 'static + Send + Sync> ButtonGroup<S> {
-    pub fn new(buttons: Vec<Button<S>>) -> Self {
-        Self {
-            state_type: PhantomData,
-            buttons,
-        }
+impl<V: 'static> ButtonGroup<V> {
+    pub fn new(buttons: Vec<Button<V>>) -> Self {
+        Self { buttons }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let mut el = h_stack().text_size(ui_size(cx, 1.));
 
-        for button in &mut self.buttons {
+        for button in self.buttons {
             el = el.child(button.render(_view, cx));
         }
 
@@ -234,27 +226,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ButtonStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ButtonStory;
 
-    impl<S: 'static + Send + Sync + Clone> ButtonStory<S> {
+    impl ButtonStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let states = InteractionState::iter();
 
             Story::container(cx)
-                .child(Story::title_for::<_, Button<S>>(cx))
+                .child(Story::title_for::<_, Button<V>>(cx))
                 .child(
                     div()
                         .flex()
diff --git a/crates/ui2/src/elements/details.rs b/crates/ui2/src/elements/details.rs
index 9a37fb093587cce15d04297ad1b605d97d000ef1..e39b8b9e1a145fbe42522aaeaf93c27768728e83 100644
--- a/crates/ui2/src/elements/details.rs
+++ b/crates/ui2/src/elements/details.rs
@@ -1,19 +1,15 @@
-use std::marker::PhantomData;
-
 use crate::{prelude::*, v_stack, ButtonGroup};
 
-#[derive(Element)]
-pub struct Details<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Details<V: 'static> {
     text: &'static str,
     meta: Option<&'static str>,
-    actions: Option<ButtonGroup<S>>,
+    actions: Option<ButtonGroup<V>>,
 }
 
-impl<S: 'static + Send + Sync> Details<S> {
+impl<S: 'static> Details<S> {
     pub fn new(text: &'static str) -> Self {
         Self {
-            state_type: PhantomData,
             text,
             meta: None,
             actions: None,
@@ -30,7 +26,7 @@ impl<S: 'static + Send + Sync> Details<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         v_stack()
@@ -54,25 +50,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct DetailsStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct DetailsStory;
 
-    impl<S: 'static + Send + Sync + Clone> DetailsStory<S> {
+    impl DetailsStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, Details<S>>(cx))
+                .child(Story::title_for::<_, Details<V>>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Details::new("The quick brown fox jumps over the lazy dog"))
                 .child(Story::label(cx, "With meta"))
diff --git a/crates/ui2/src/elements/icon.rs b/crates/ui2/src/elements/icon.rs
index ebeed25ea839b4cb33b8405e60751a8868bcdf0d..7816086a78c0a01e34160b8efb4c036797fdb038 100644
--- a/crates/ui2/src/elements/icon.rs
+++ b/crates/ui2/src/elements/icon.rs
@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{svg, Hsla};
 use strum::EnumIter;
 
@@ -148,18 +146,16 @@ impl Icon {
     }
 }
 
-#[derive(Element)]
-pub struct IconElement<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct IconElement {
     icon: Icon,
     color: IconColor,
     size: IconSize,
 }
 
-impl<S: 'static + Send + Sync> IconElement<S> {
+impl IconElement {
     pub fn new(icon: Icon) -> Self {
         Self {
-            state_type: PhantomData,
             icon,
             color: IconColor::default(),
             size: IconSize::default(),
@@ -176,7 +172,7 @@ impl<S: 'static + Send + Sync> IconElement<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let fill = self.color.color(cx);
         let svg_size = match self.size {
             IconSize::Small => ui_size(cx, 12. / 14.),
@@ -202,27 +198,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element, Default)]
-    pub struct IconStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct IconStory;
 
-    impl<S: 'static + Send + Sync> IconStory<S> {
+    impl IconStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let icons = Icon::iter();
 
             Story::container(cx)
-                .child(Story::title_for::<_, IconElement<S>>(cx))
+                .child(Story::title_for::<_, IconElement>(cx))
                 .child(Story::label(cx, "All Icons"))
                 .child(div().flex().gap_3().children(icons.map(IconElement::new)))
         }
diff --git a/crates/ui2/src/elements/input.rs b/crates/ui2/src/elements/input.rs
index af0e73c9eb41d1a19467bcf0d8805166afbc654d..30b930b315d71c3b7c5f3d9a6d3a2cb2437373b0 100644
--- a/crates/ui2/src/elements/input.rs
+++ b/crates/ui2/src/elements/input.rs
@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::Label;
 use crate::LabelColor;
@@ -11,9 +9,8 @@ pub enum InputVariant {
     Filled,
 }
 
-#[derive(Element)]
-pub struct Input<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Input {
     placeholder: SharedString,
     value: String,
     state: InteractionState,
@@ -22,10 +19,9 @@ pub struct Input<S: 'static + Send + Sync> {
     is_active: bool,
 }
 
-impl<S: 'static + Send + Sync> Input<S> {
+impl Input {
     pub fn new(placeholder: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             placeholder: placeholder.into(),
             value: "".to_string(),
             state: InteractionState::default(),
@@ -60,7 +56,7 @@ impl<S: 'static + Send + Sync> Input<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let (input_bg, input_hover_bg, input_active_bg) = match self.variant {
@@ -120,25 +116,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct InputStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct InputStory;
 
-    impl<S: 'static + Send + Sync> InputStory<S> {
+    impl InputStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, Input<S>>(cx))
+                .child(Story::title_for::<_, Input>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(div().flex().child(Input::new("Search")))
         }
diff --git a/crates/ui2/src/elements/label.rs b/crates/ui2/src/elements/label.rs
index 81219206a996013d97efe7f6b577d2088b84843d..87076441ae3ff656706f3430c3824e12ff9d9864 100644
--- a/crates/ui2/src/elements/label.rs
+++ b/crates/ui2/src/elements/label.rs
@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{relative, Hsla, WindowContext};
 use smallvec::SmallVec;
 
@@ -48,19 +46,17 @@ pub enum LineHeightStyle {
     UILabel,
 }
 
-#[derive(Element)]
-pub struct Label<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Label {
     label: SharedString,
     line_height_style: LineHeightStyle,
     color: LabelColor,
     strikethrough: bool,
 }
 
-impl<S: 'static + Send + Sync> Label<S> {
+impl Label {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             label: label.into(),
             line_height_style: LineHeightStyle::default(),
             color: LabelColor::Default,
@@ -83,7 +79,7 @@ impl<S: 'static + Send + Sync> Label<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         div()
             .when(self.strikethrough, |this| {
                 this.relative().child(
@@ -105,19 +101,17 @@ impl<S: 'static + Send + Sync> Label<S> {
     }
 }
 
-#[derive(Element)]
-pub struct HighlightedLabel<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct HighlightedLabel {
     label: SharedString,
     color: LabelColor,
     highlight_indices: Vec<usize>,
     strikethrough: bool,
 }
 
-impl<S: 'static + Send + Sync> HighlightedLabel<S> {
+impl HighlightedLabel {
     pub fn new(label: impl Into<SharedString>, highlight_indices: Vec<usize>) -> Self {
         Self {
-            state_type: PhantomData,
             label: label.into(),
             color: LabelColor::Default,
             highlight_indices,
@@ -135,7 +129,7 @@ impl<S: 'static + Send + Sync> HighlightedLabel<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         let highlight_color = theme.text_accent;
@@ -211,25 +205,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct LabelStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct LabelStory;
 
-    impl<S: 'static + Send + Sync> LabelStory<S> {
+    impl LabelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, Label<S>>(cx))
+                .child(Story::title_for::<_, Label>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Label::new("Hello, world!"))
                 .child(Story::label(cx, "Highlighted"))
diff --git a/crates/ui2/src/elements/stack.rs b/crates/ui2/src/elements/stack.rs
index dbd0dae9d3be9e650cdd173c4b1bd55f80d7f6be..35ba00cecdb8782f5d46739bd4dc66fd95125a01 100644
--- a/crates/ui2/src/elements/stack.rs
+++ b/crates/ui2/src/elements/stack.rs
@@ -14,18 +14,18 @@ pub trait Stack: Styled + Sized {
     }
 }
 
-impl<S: 'static + Send + Sync> Stack for Div<S> {}
+impl<S: 'static> Stack for Div<S> {}
 
 /// Horizontally stacks elements.
 ///
 /// Sets `flex()`, `flex_row()`, `items_center()`
-pub fn h_stack<S: 'static + Send + Sync>() -> Div<S> {
+pub fn h_stack<S: 'static>() -> Div<S> {
     div().h_stack()
 }
 
 /// Vertically stacks elements.
 ///
 /// Sets `flex()`, `flex_col()`
-pub fn v_stack<S: 'static + Send + Sync>() -> Div<S> {
+pub fn v_stack<S: 'static>() -> Div<S> {
     div().v_stack()
 }
diff --git a/crates/ui2/src/elements/tool_divider.rs b/crates/ui2/src/elements/tool_divider.rs
index 68b97ccb035c9c43be3793ed040a245a07e078b7..e1ebb294a003a398cf5f26a9c8a58823089e6bd2 100644
--- a/crates/ui2/src/elements/tool_divider.rs
+++ b/crates/ui2/src/elements/tool_divider.rs
@@ -1,20 +1,14 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 
-#[derive(Element)]
-pub struct ToolDivider<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-}
+#[derive(Component)]
+pub struct ToolDivider;
 
-impl<S: 'static + Send + Sync> ToolDivider<S> {
+impl ToolDivider {
     pub fn new() -> Self {
-        Self {
-            state_type: PhantomData,
-        }
+        Self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         div().w_px().h_3().bg(theme.border)
diff --git a/crates/ui2/src/prelude.rs b/crates/ui2/src/prelude.rs
index 141c20c5055fec9c4d6353fffeb482af4c92a46e..8098d3e40b34a7e869a6c148b03dba8531ca6ae4 100644
--- a/crates/ui2/src/prelude.rs
+++ b/crates/ui2/src/prelude.rs
@@ -1,5 +1,5 @@
 pub use gpui2::{
-    div, Element, ElementId, IntoAnyElement, ParentElement, SharedString, StatefulInteractive,
+    div, Element, ElementId, Component, ParentElement, SharedString, StatefulInteractive,
     StatelessInteractive, Styled, ViewContext, WindowContext,
 };
 
diff --git a/crates/ui2/src/static_data.rs b/crates/ui2/src/static_data.rs
index 82ab7da0e4cbc435e03334a20bdee78b68be5903..f1b2405e72bc6fd559e37b2590fd9bd029a965c8 100644
--- a/crates/ui2/src/static_data.rs
+++ b/crates/ui2/src/static_data.rs
@@ -13,7 +13,7 @@ use crate::{
 };
 use crate::{HighlightedText, ListDetailsEntry};
 
-pub fn static_tabs_example<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
+pub fn static_tabs_example() -> Vec<Tab> {
     vec![
         Tab::new("wip.rs")
             .title("wip.rs".to_string())
@@ -63,7 +63,7 @@ pub fn static_tabs_example<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
     ]
 }
 
-pub fn static_tabs_1<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
+pub fn static_tabs_1() -> Vec<Tab> {
     vec![
         Tab::new("project_panel.rs")
             .title("project_panel.rs".to_string())
@@ -87,7 +87,7 @@ pub fn static_tabs_1<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
     ]
 }
 
-pub fn static_tabs_2<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
+pub fn static_tabs_2() -> Vec<Tab> {
     vec![
         Tab::new("tab_bar.rs")
             .title("tab_bar.rs".to_string())
@@ -102,7 +102,7 @@ pub fn static_tabs_2<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
     ]
 }
 
-pub fn static_tabs_3<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
+pub fn static_tabs_3() -> Vec<Tab> {
     vec![Tab::new("static_tabs_3")
         .git_status(GitStatus::Created)
         .current(true)]
@@ -325,7 +325,7 @@ pub fn static_players_with_call_status() -> Vec<PlayerWithCallStatus> {
     ]
 }
 
-pub fn static_new_notification_items<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_new_notification_items<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListDetailsEntry::new("maxdeviant invited you to join a stream in #design.")
             .meta("4 people in stream."),
@@ -336,7 +336,7 @@ pub fn static_new_notification_items<S: 'static + Send + Sync>() -> Vec<ListItem
     .collect()
 }
 
-pub fn static_read_notification_items<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_read_notification_items<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListDetailsEntry::new("mikaylamaki added you as a contact.").actions(vec![
             Button::new("Decline"),
@@ -352,7 +352,7 @@ pub fn static_read_notification_items<S: 'static + Send + Sync>() -> Vec<ListIte
     .collect()
 }
 
-pub fn static_project_panel_project_items<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_project_panel_project_items<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListEntry::new(Label::new("zed"))
             .left_icon(Icon::FolderOpen.into())
@@ -479,7 +479,7 @@ pub fn static_project_panel_project_items<S: 'static + Send + Sync>() -> Vec<Lis
     .collect()
 }
 
-pub fn static_project_panel_single_items<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_project_panel_single_items<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListEntry::new(Label::new("todo.md"))
             .left_icon(Icon::FileDoc.into())
@@ -496,7 +496,7 @@ pub fn static_project_panel_single_items<S: 'static + Send + Sync>() -> Vec<List
     .collect()
 }
 
-pub fn static_collab_panel_current_call<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_collab_panel_current_call<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListEntry::new(Label::new("as-cii")).left_avatar("http://github.com/as-cii.png?s=50"),
         ListEntry::new(Label::new("nathansobo"))
@@ -509,7 +509,7 @@ pub fn static_collab_panel_current_call<S: 'static + Send + Sync>() -> Vec<ListI
     .collect()
 }
 
-pub fn static_collab_panel_channels<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_collab_panel_channels<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListEntry::new(Label::new("zed"))
             .left_icon(Icon::Hash.into())
@@ -573,7 +573,7 @@ pub fn static_collab_panel_channels<S: 'static + Send + Sync>() -> Vec<ListItem<
     .collect()
 }
 
-pub fn example_editor_actions<S: 'static + Send + Sync>() -> Vec<PaletteItem<S>> {
+pub fn example_editor_actions() -> Vec<PaletteItem> {
     vec![
         PaletteItem::new("New File").keybinding(Keybinding::new(
             "N".to_string(),
@@ -638,7 +638,7 @@ pub fn empty_editor_example(cx: &mut WindowContext) -> EditorPane {
     )
 }
 
-pub fn empty_buffer_example<S: 'static + Send + Sync + Clone>() -> Buffer<S> {
+pub fn empty_buffer_example() -> Buffer {
     Buffer::new("empty-buffer").set_rows(Some(BufferRows::default()))
 }
 
@@ -663,9 +663,7 @@ pub fn hello_world_rust_editor_example(cx: &mut WindowContext) -> EditorPane {
     )
 }
 
-pub fn hello_world_rust_buffer_example<S: 'static + Send + Sync + Clone>(
-    theme: &Theme,
-) -> Buffer<S> {
+pub fn hello_world_rust_buffer_example(theme: &Theme) -> Buffer {
     Buffer::new("hello-world-rust-buffer")
         .set_title("hello_world.rs".to_string())
         .set_path("src/hello_world.rs".to_string())
@@ -804,9 +802,7 @@ pub fn hello_world_rust_editor_with_status_example(cx: &mut WindowContext) -> Ed
     )
 }
 
-pub fn hello_world_rust_buffer_with_status_example<S: 'static + Send + Sync + Clone>(
-    theme: &Theme,
-) -> Buffer<S> {
+pub fn hello_world_rust_buffer_with_status_example(theme: &Theme) -> Buffer {
     Buffer::new("hello-world-rust-buffer-with-status")
         .set_title("hello_world.rs".to_string())
         .set_path("src/hello_world.rs".to_string())
@@ -952,7 +948,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec<BufferRow>
     ]
 }
 
-pub fn terminal_buffer<S: 'static + Send + Sync + Clone>(theme: &Theme) -> Buffer<S> {
+pub fn terminal_buffer(theme: &Theme) -> Buffer {
     Buffer::new("terminal")
         .set_title("zed — fish".to_string())
         .set_rows(Some(BufferRows {
diff --git a/crates/ui2/src/story.rs b/crates/ui2/src/story.rs
index 7a5358dfed1fb3b7f8d6105929c9d02681b99958..fae65a16b705f84f8532a5c514da7c4cac92798d 100644
--- a/crates/ui2/src/story.rs
+++ b/crates/ui2/src/story.rs
@@ -5,7 +5,7 @@ use crate::prelude::*;
 pub struct Story {}
 
 impl Story {
-    pub fn container<S: 'static + Send + Sync>(cx: &mut ViewContext<S>) -> Div<S> {
+    pub fn container<S: 'static>(cx: &mut ViewContext<S>) -> Div<S> {
         let theme = theme(cx);
 
         div()
@@ -18,10 +18,10 @@ impl Story {
             .bg(theme.background)
     }
 
-    pub fn title<S: 'static + Send + Sync>(
+    pub fn title<S: 'static>(
         cx: &mut ViewContext<S>,
         title: &str,
-    ) -> impl Element<ViewState = S> {
+    ) -> impl Component<S> {
         let theme = theme(cx);
 
         div()
@@ -30,16 +30,14 @@ impl Story {
             .child(title.to_owned())
     }
 
-    pub fn title_for<S: 'static + Send + Sync, T>(
-        cx: &mut ViewContext<S>,
-    ) -> impl Element<ViewState = S> {
+    pub fn title_for<S: 'static, T>(cx: &mut ViewContext<S>) -> impl Component<S> {
         Self::title(cx, std::any::type_name::<T>())
     }
 
-    pub fn label<S: 'static + Send + Sync>(
+    pub fn label<S: 'static>(
         cx: &mut ViewContext<S>,
         label: &str,
-    ) -> impl Element<ViewState = S> {
+    ) -> impl Component<S> {
         let theme = theme(cx);
 
         div()
diff --git a/crates/ui2/src/theme.rs b/crates/ui2/src/theme.rs
index 00f20f5967402c4af1914e930b9c2bbb6fab21bc..d8d924dbb095ff5a4c9d485019bc718240390e19 100644
--- a/crates/ui2/src/theme.rs
+++ b/crates/ui2/src/theme.rs
@@ -1,5 +1,5 @@
 use gpui2::{
-    AnyElement, Bounds, Element, Hsla, IntoAnyElement, LayoutId, Pixels, Result, ViewContext,
+    AnyElement, Bounds, Component, Element, Hsla, LayoutId, Pixels, Result, ViewContext,
     WindowContext,
 };
 use serde::{de::Visitor, Deserialize, Deserializer};
@@ -132,10 +132,11 @@ where
     deserializer.deserialize_map(SyntaxVisitor)
 }
 
-pub fn themed<E, F>(theme: Theme, cx: &mut ViewContext<E::ViewState>, build_child: F) -> Themed<E>
+pub fn themed<V, E, F>(theme: Theme, cx: &mut ViewContext<V>, build_child: F) -> Themed<E>
 where
-    E: Element,
-    F: FnOnce(&mut ViewContext<E::ViewState>) -> E,
+    V: 'static,
+    E: Element<V>,
+    F: FnOnce(&mut ViewContext<V>) -> E,
 {
     cx.default_global::<ThemeStack>().0.push(theme.clone());
     let child = build_child(cx);
@@ -148,12 +149,13 @@ pub struct Themed<E> {
     pub(crate) child: E,
 }
 
-impl<E> IntoAnyElement<E::ViewState> for Themed<E>
+impl<V, E> Component<V> for Themed<E>
 where
-    E: 'static + Element + Send + Sync,
+    V: 'static,
+    E: 'static + Element<V> + Send + Sync,
     E::ElementState: Send + Sync,
 {
-    fn into_any(self) -> AnyElement<E::ViewState> {
+    fn render(self) -> AnyElement<V> {
         AnyElement::new(self)
     }
 }
@@ -161,11 +163,11 @@ where
 #[derive(Default)]
 struct ThemeStack(Vec<Theme>);
 
-impl<E: 'static + Element + Send + Sync> Element for Themed<E>
+impl<V, E: 'static + Element<V> + Send + Sync> Element<V> for Themed<E>
 where
+    V: 'static,
     E::ElementState: Send + Sync,
 {
-    type ViewState = E::ViewState;
     type ElementState = E::ElementState;
 
     fn id(&self) -> Option<gpui2::ElementId> {
@@ -174,9 +176,9 @@ where
 
     fn initialize(
         &mut self,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> Self::ElementState {
         cx.default_global::<ThemeStack>().0.push(self.theme.clone());
         let element_state = self.child.initialize(view_state, element_state, cx);
@@ -186,9 +188,9 @@ where
 
     fn layout(
         &mut self,
-        view_state: &mut E::ViewState,
+        view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<E::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> LayoutId
     where
         Self: Sized,
@@ -202,9 +204,9 @@ where
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         frame_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) where
         Self: Sized,
     {