diff --git a/thaw/src/anchor/anchor_link.rs b/thaw/src/anchor/anchor_link.rs
index f281c12..a810624 100644
--- a/thaw/src/anchor/anchor_link.rs
+++ b/thaw/src/anchor/anchor_link.rs
@@ -1,5 +1,5 @@
 use crate::use_anchor;
-use leptos::*;
+use leptos::{html, prelude::*};
 use thaw_components::OptionComp;
 use thaw_utils::{class_list, OptionalProp, StoredMaybeSignal};
 
@@ -39,7 +39,10 @@ pub fn AnchorLink(
                 });
             });
 
-            title_ref.on_load(move |title_el| {
+            Effect::new(|_| {
+                let Some(title_el) = title_ref.get() else {
+                    return;
+                };
                 let _ = watch(
                     move || is_active.get(),
                     move |is_active, _, _| {
@@ -70,7 +73,7 @@ pub fn AnchorLink(
                 href=href
                 class="thaw-anchor-link__title"
                 on:click=on_click
-                ref=title_ref
+                node_ref=title_ref
                 title=move || title.get()
             >
                 {move || title.get()}
diff --git a/thaw/src/anchor/mod.rs b/thaw/src/anchor/mod.rs
index fead0a4..6b183b0 100644
--- a/thaw/src/anchor/mod.rs
+++ b/thaw/src/anchor/mod.rs
@@ -2,7 +2,7 @@ mod anchor_link;
 
 pub use anchor_link::AnchorLink;
 
-use leptos::*;
+use leptos::{context::Provider, ev, html, prelude::*};
 use std::cmp::Ordering;
 use thaw_utils::{add_event_listener_with_bool, class_list, mount_style, throttle, OptionalProp};
 use web_sys::{DomRect, Element};
@@ -87,7 +87,7 @@ pub fn Anchor(
     view! {
         <div
             class=class_list!["thaw-anchor", class.map(| c | move || c.get())]
-            ref=anchor_ref
+            node_ref=anchor_ref
         >
             <div class="thaw-anchor-rail">
                 <div
@@ -97,7 +97,7 @@ pub fn Anchor(
                         move || active_id.with(|id| id.is_some()),
                     )
 
-                    ref=bar_ref
+                    node_ref=bar_ref
                 ></div>
             </div>
             <Provider value=AnchorInjection::new(
@@ -164,9 +164,8 @@ impl AnchorInjection {
             let offset_top = title_rect.top() - anchor_rect.top();
             // let offset_left = title_rect.left() - anchor_rect.left();
 
-            let _ = bar_el
-                .style("top", format!("{}px", offset_top))
-                .style("height", format!("{}px", title_rect.height()));
+            bar_el.style(("top", format!("{}px", offset_top)));
+            bar_el.style(("height", format!("{}px", title_rect.height())));
         }
     }
 }
diff --git a/thaw/src/auto_complete/auto_complete_option.rs b/thaw/src/auto_complete/auto_complete_option.rs
index f091677..1f98221 100644
--- a/thaw/src/auto_complete/auto_complete_option.rs
+++ b/thaw/src/auto_complete/auto_complete_option.rs
@@ -1,5 +1,5 @@
 use super::AutoCompleteInjection;
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn AutoCompleteOption(key: String, children: Children) -> impl IntoView {
@@ -11,7 +11,7 @@ pub fn AutoCompleteOption(key: String, children: Children) -> impl IntoView {
         <div
             class="thaw-auto-complete-option"
             role="option"
-            aria-selected=move || if is_selected.get() { "true" } else { "false" }
+            // aria-selected=move || if is_selected.get() { "true" } else { "false" }
             on:click=move |_| auto_complete.select_value(value.clone())
         >
             {children()}
diff --git a/thaw/src/auto_complete/mod.rs b/thaw/src/auto_complete/mod.rs
index 16a8ffe..b8c334d 100644
--- a/thaw/src/auto_complete/mod.rs
+++ b/thaw/src/auto_complete/mod.rs
@@ -3,7 +3,7 @@ mod auto_complete_option;
 pub use auto_complete_option::AutoCompleteOption;
 
 use crate::{ComponentRef, ConfigInjection, Input, InputPrefix, InputRef, InputSuffix};
-use leptos::*;
+use leptos::{prelude::*, html};
 use thaw_components::{
     Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth, OptionComp,
 };
@@ -42,10 +42,10 @@ pub fn AutoComplete(
 
     let default_index = if allow_free_input { None } else { Some(0) };
 
-    let select_option_index = create_rw_signal::<Option<usize>>(default_index);
-    let menu_ref = create_node_ref::<html::Div>();
-    let is_show_menu = create_rw_signal(false);
-    let auto_complete_ref = create_node_ref::<html::Div>();
+    let select_option_index = RwSignal::<Option<usize>>::new(default_index);
+    let menu_ref = NodeRef::<html::Div>::new();
+    let is_show_menu = RwSignal::new(false);
+    let auto_complete_ref = NodeRef::<html::Div>::new();
     let open_menu = move || {
         select_option_index.set(default_index);
         is_show_menu.set(true);
@@ -141,7 +141,7 @@ pub fn AutoComplete(
             <Binder target_ref=auto_complete_ref>
                 <div
                     class=class_list!["thaw-auto-complete", class.map(| c | move || c.get())]
-                    ref=auto_complete_ref
+                    node_ref=auto_complete_ref
     //                on:keydown=on_keydown
                 >
                     <Input
@@ -193,7 +193,7 @@ pub fn AutoComplete(
                                 class="thaw-config-provider thaw-auto-complete__listbox"
                                 style=move || display.get()
                                 data-thaw-id=config_provider.id().clone()
-                                ref=menu_ref
+                                node_ref=menu_ref
                                 role="listbox"
                             >
 
diff --git a/thaw/src/avatar/mod.rs b/thaw/src/avatar/mod.rs
index 147b7cf..7bafd46 100644
--- a/thaw/src/avatar/mod.rs
+++ b/thaw/src/avatar/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style, OptionalProp, StoredMaybeSignal};
 
@@ -49,7 +49,7 @@ pub fn Avatar(
     view! {
         <span
             class=class_list!["thaw-avatar", move || format!("thaw-avatar--{}", shape.get().as_str()), class.map(| c | move || c.get())]
-            style=style
+            style=move || style().unwrap_or_default()
             role="img"
             aria-label=move || name.as_ref().map(|n| n.get())
         >
diff --git a/thaw/src/back_top/mod.rs b/thaw/src/back_top/mod.rs
index 2da90a5..bde1938 100644
--- a/thaw/src/back_top/mod.rs
+++ b/thaw/src/back_top/mod.rs
@@ -1,5 +1,5 @@
 use crate::{ConfigInjection, Icon};
-use leptos::{html::ToHtmlElement, *};
+use leptos::{ev, html, html::ToHtmlElement, prelude::*};
 use thaw_components::{CSSTransition, Fallback, OptionComp, Teleport};
 use thaw_utils::{
     add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle,
@@ -32,10 +32,14 @@ pub fn BackTop(
     let scroll_to_top = StoredValue::new(None::<Callback<()>>);
     let scroll_handle = StoredValue::new(None::<EventListenerHandle>);
 
-    placeholder_ref.on_load(move |el| {
+    Effect::new(move |_| {
+        let Some(placeholder_el) = placeholder_ref.get() else {
+            return;
+        };
+
         request_animation_frame(move || {
-            let scroll_el = get_scroll_parent(&el.into_any())
-                .unwrap_or_else(|| document().document_element().unwrap().to_leptos_element());
+            let scroll_el = get_scroll_parent(&placeholder_el)
+                .unwrap_or_else(|| document().document_element().unwrap());
 
             {
                 let scroll_el = scroll_el.clone();
@@ -72,7 +76,7 @@ pub fn BackTop(
     };
 
     view! {
-        <div style="display: none" class="thaw-back-top-placeholder" ref=placeholder_ref>
+        <div style="display: none" class="thaw-back-top-placeholder" node_ref=placeholder_ref>
             <Teleport immediate=is_show_back_top>
                 <CSSTransition
                     node_ref=back_top_ref
@@ -84,7 +88,7 @@ pub fn BackTop(
                     <div
                         class=class_list!["thaw-config-provider thaw-back-top", class.map(| c | move || c.get())]
                         data-thaw-id=config_provider.id().clone()
-                        ref=back_top_ref
+                        node_ref=back_top_ref
                         style=move || {
                             display.get().map_or_else(|| format!("right: {}px; bottom: {}px", right.get(), bottom.get()), |d| d.to_string())
                         }
diff --git a/thaw/src/badge/badge.rs b/thaw/src/badge/badge.rs
index 9c8b67d..699876c 100644
--- a/thaw/src/badge/badge.rs
+++ b/thaw/src/badge/badge.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style};
 
diff --git a/thaw/src/breadcrumb/mod.rs b/thaw/src/breadcrumb/mod.rs
index eaf69ff..af0f87c 100644
--- a/thaw/src/breadcrumb/mod.rs
+++ b/thaw/src/breadcrumb/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style};
 
 #[component]
diff --git a/thaw/src/button/button_group.rs b/thaw/src/button/button_group.rs
index eb51fe0..f5e991e 100644
--- a/thaw/src/button/button_group.rs
+++ b/thaw/src/button/button_group.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[component]
diff --git a/thaw/src/button/mod.rs b/thaw/src/button/mod.rs
index 980ab72..0cde01f 100644
--- a/thaw/src/button/mod.rs
+++ b/thaw/src/button/mod.rs
@@ -3,7 +3,7 @@ mod button_group;
 pub use button_group::ButtonGroup;
 
 use crate::icon::Icon;
-use leptos::*;
+use leptos::{ev, prelude::*};
 use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
 
diff --git a/thaw/src/calendar/mod.rs b/thaw/src/calendar/mod.rs
index 795f951..8c17b6f 100644
--- a/thaw/src/calendar/mod.rs
+++ b/thaw/src/calendar/mod.rs
@@ -1,6 +1,6 @@
 use crate::{Button, ButtonGroup};
 use chrono::{Datelike, Days, Local, Month, Months, NaiveDate};
-use leptos::*;
+use leptos::prelude::*;
 use std::ops::Deref;
 use thaw_utils::{class_list, mount_style, Model, OptionalProp};
 
diff --git a/thaw/src/card/card_footer.rs b/thaw/src/card/card_footer.rs
index 1271f23..39d0904 100644
--- a/thaw/src/card/card_footer.rs
+++ b/thaw/src/card/card_footer.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::mount_style;
 
 #[component]
diff --git a/thaw/src/card/card_header.rs b/thaw/src/card/card_header.rs
index f78b8b7..fa6caca 100644
--- a/thaw/src/card/card_header.rs
+++ b/thaw/src/card/card_header.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_components::OptionComp;
 use thaw_utils::mount_style;
 
diff --git a/thaw/src/card/card_preview.rs b/thaw/src/card/card_preview.rs
index 006be8b..bc3e423 100644
--- a/thaw/src/card/card_preview.rs
+++ b/thaw/src/card/card_preview.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn CardPreview(children: Children) -> impl IntoView {
diff --git a/thaw/src/card/mod.rs b/thaw/src/card/mod.rs
index d5bf27f..5fed067 100644
--- a/thaw/src/card/mod.rs
+++ b/thaw/src/card/mod.rs
@@ -6,7 +6,7 @@ pub use card_footer::*;
 pub use card_header::*;
 pub use card_preview::*;
 
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[component]
diff --git a/thaw/src/checkbox/checkbox_group.rs b/thaw/src/checkbox/checkbox_group.rs
index 533b8c9..573dcca 100644
--- a/thaw/src/checkbox/checkbox_group.rs
+++ b/thaw/src/checkbox/checkbox_group.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::{context::Provider, prelude::*};
 use std::collections::HashSet;
 use thaw_utils::Model;
 
diff --git a/thaw/src/checkbox/mod.rs b/thaw/src/checkbox/mod.rs
index e506cf5..511c69a 100644
--- a/thaw/src/checkbox/mod.rs
+++ b/thaw/src/checkbox/mod.rs
@@ -3,7 +3,7 @@ mod checkbox_group;
 pub use checkbox_group::CheckboxGroup;
 
 use checkbox_group::CheckboxGroupInjection;
-use leptos::*;
+use leptos::{html, prelude::*};
 use thaw_utils::{class_list, mount_style, Model, OptionalProp};
 
 #[component]
@@ -67,7 +67,7 @@ pub fn Checkbox(
                 type="checkbox"
                 id=id.clone()
                 checked=checked
-                ref=input_ref
+                node_ref=input_ref
                 on:change=on_change
             />
             <div aria-hidden="true" class="thaw-checkbox__indicator">
diff --git a/thaw/src/code/mod.rs b/thaw/src/code/mod.rs
index 9d2b445..c892fcd 100644
--- a/thaw/src/code/mod.rs
+++ b/thaw/src/code/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[component]
@@ -14,9 +14,9 @@ pub fn Code(
         ]>
 
             {if let Some(inner_html) = inner_html {
-                view! { <pre inner_html=inner_html></pre> }.into()
+                view! { <pre inner_html=inner_html></pre> }.into_any().into()
             } else if let Some(text) = text {
-                view! { <pre>{text}</pre> }.into()
+                view! { <pre>{text}</pre> }.into_any().into()
             } else {
                 None
             }}
diff --git a/thaw/src/color_picker/mod.rs b/thaw/src/color_picker/mod.rs
index 9ddbca3..e510f81 100644
--- a/thaw/src/color_picker/mod.rs
+++ b/thaw/src/color_picker/mod.rs
@@ -4,7 +4,7 @@ pub use color::*;
 
 use crate::ConfigInjection;
 use leptos::leptos_dom::helpers::WindowListenerHandle;
-use leptos::*;
+use leptos::{ev, html, prelude::*};
 use palette::{Hsv, IntoColor, Srgb};
 use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
 use thaw_utils::{class_list, mount_style, Model, OptionalProp};
@@ -114,8 +114,8 @@ pub fn ColorPicker(
                 if current_el == *body {
                     break;
                 };
-                if current_el == ***popover_ref.get().unwrap()
-                    || current_el == ***trigger_ref.get().unwrap()
+                if current_el == popover_ref.get().unwrap()
+                    || current_el == trigger_ref.get().unwrap()
                 {
                     return;
                 }
@@ -131,7 +131,7 @@ pub fn ColorPicker(
             <div
                 class=class_list!["thaw-color-picker-trigger", class.map(| c | move || c.get())]
                 on:click=show_popover
-                ref=trigger_ref
+                node_ref=trigger_ref
             >
                 <div class="thaw-color-picker-trigger__content" style=move || style.get()>
                     {move || label.get()}
@@ -147,7 +147,7 @@ pub fn ColorPicker(
                 >
                     <div
                         class="thaw-config-provider thaw-color-picker-popover"
-                        ref=popover_ref
+                        node_ref=popover_ref
                         style=move || display.get()
                         data-thaw-id=config_provider.id().clone()
                     >
@@ -210,7 +210,7 @@ fn ColorPanel(hue: ReadSignal<f32>, sv: RwSignal<(f32, f32)>) -> impl IntoView {
     };
 
     view! {
-        <div class="thaw-color-picker-popover__panel" ref=panel_ref on:mousedown=on_mouse_down>
+        <div class="thaw-color-picker-popover__panel" node_ref=panel_ref on:mousedown=on_mouse_down>
             <div
                 class="thaw-color-picker-popover__layer"
                 style:background-image=move || {
@@ -271,7 +271,7 @@ fn HueSlider(hue: RwSignal<f32>) -> impl IntoView {
         });
     };
     view! {
-        <div class="thaw-color-picker-slider" ref=rail_ref on:mousedown=on_mouse_down>
+        <div class="thaw-color-picker-slider" node_ref=rail_ref on:mousedown=on_mouse_down>
             <div
                 class="thaw-color-picker-slider__handle"
                 style=move || format!("left: calc({}% - 6px)", f32::from(hue.get()) / 359.0 * 100.0)
diff --git a/thaw/src/combobox/combobox.rs b/thaw/src/combobox/combobox.rs
index 939ec78..14fffbb 100644
--- a/thaw/src/combobox/combobox.rs
+++ b/thaw/src/combobox/combobox.rs
@@ -1,5 +1,5 @@
 use crate::ConfigInjection;
-use leptos::*;
+use leptos::{context::Provider, ev, html, prelude::*};
 use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth};
 use thaw_utils::{add_event_listener, mount_style, Model};
 
@@ -26,8 +26,11 @@ pub fn Combobox(
         }
     });
     if clearable {
-        clear_icon_ref.on_load(move |clear_icon_el| {
-            let handler = add_event_listener(clear_icon_el.into_any(), ev::click, move |e| {
+        Effect::new(move |_| {
+            let Some(clear_icon_el) = clear_icon_ref.get() else {
+                return;
+            };
+            let handler = add_event_listener(clear_icon_el.into(), ev::click, move |e| {
                 e.stop_propagation();
                 selected_options.set(vec![]);
             });
@@ -52,10 +55,10 @@ pub fn Combobox(
                         if current_el == *body {
                             break;
                         };
-                        if current_el == ***listbox_el {
+                        if current_el == listbox_el {
                             return;
                         }
-                        if current_el == ***trigger_el {
+                        if current_el == trigger_el {
                             return;
                         }
                         el = current_el.parent_element();
@@ -97,7 +100,7 @@ pub fn Combobox(
         <Binder target_ref=trigger_ref>
             <div
                 class="thaw-combobox"
-                ref=trigger_ref
+                node_ref=trigger_ref
                 on:click=move |_| {
                     is_show_listbox.update(|show| *show = !*show);
                 }
@@ -120,7 +123,7 @@ pub fn Combobox(
                                 aria-hidden="true"
                                 class="thaw-combobox__clear-icon"
                                 style=move || (!is_show_clear_icon.get()).then(|| "display: none")
-                                ref=clear_icon_ref
+                                node_ref=clear_icon_ref
                             >
                                 <svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20">
                                     <path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z" fill="currentColor"></path>
@@ -162,7 +165,7 @@ pub fn Combobox(
                             class="thaw-config-provider thaw-combobox__listbox"
                             style=move || display.get()
                             data-thaw-id=config_provider.id().clone()
-                            ref=listbox_ref
+                            node_ref=listbox_ref
                             role="listbox"
                         >
                             {children()}
diff --git a/thaw/src/combobox/combobox_option.rs b/thaw/src/combobox/combobox_option.rs
index 3cc16c2..1cb750d 100644
--- a/thaw/src/combobox/combobox_option.rs
+++ b/thaw/src/combobox/combobox_option.rs
@@ -1,5 +1,5 @@
 use crate::ComboboxInjection;
-use leptos::*;
+use leptos::prelude::*;
 use thaw_components::{Fallback, If, OptionComp, Then};
 use thaw_utils::class_list;
 
diff --git a/thaw/src/config_provider/mod.rs b/thaw/src/config_provider/mod.rs
index cf1498c..be5f50f 100644
--- a/thaw/src/config_provider/mod.rs
+++ b/thaw/src/config_provider/mod.rs
@@ -1,5 +1,5 @@
 use crate::Theme;
-use leptos::*;
+use leptos::{context::Provider, prelude::*};
 use thaw_utils::{mount_dynamic_style, mount_style};
 
 #[component]
diff --git a/thaw/src/date_picker/mod.rs b/thaw/src/date_picker/mod.rs
index bc1a362..56ecff5 100644
--- a/thaw/src/date_picker/mod.rs
+++ b/thaw/src/date_picker/mod.rs
@@ -1,7 +1,7 @@
 mod panel;
 use crate::{Icon, Input, InputSuffix, SignalWatch};
 use chrono::NaiveDate;
-use leptos::*;
+use leptos::{prelude::*, html};
 use panel::{Panel, PanelRef};
 use thaw_components::{Binder, Follower, FollowerPlacement};
 use thaw_utils::{mount_style, now_date, ComponentRef, Model, OptionalProp};
@@ -68,7 +68,7 @@ pub fn DatePicker(
 
     view! {
         <Binder target_ref=date_picker_ref>
-            <div ref=date_picker_ref>
+            <div node_ref=date_picker_ref>
                 <Input attrs class value=show_date_text on_focus=open_panel on_blur=on_input_blur>
                     <InputSuffix slot>
                         <Icon icon=icondata_ai::AiCalendarOutlined style="font-size: 18px"/>
diff --git a/thaw/src/date_picker/panel/date_panel.rs b/thaw/src/date_picker/panel/date_panel.rs
index 8b1df88..46dc2c7 100644
--- a/thaw/src/date_picker/panel/date_panel.rs
+++ b/thaw/src/date_picker/panel/date_panel.rs
@@ -1,7 +1,7 @@
 use super::PanelVariant;
 use crate::{Button, ButtonAppearance, ButtonSize, CalendarItemDate};
 use chrono::{Datelike, Days, Month, Months, NaiveDate};
-use leptos::*;
+use leptos::prelude::*;
 use std::ops::Deref;
 use thaw_utils::now_date;
 
diff --git a/thaw/src/date_picker/panel/mod.rs b/thaw/src/date_picker/panel/mod.rs
index f19b614..e502c36 100644
--- a/thaw/src/date_picker/panel/mod.rs
+++ b/thaw/src/date_picker/panel/mod.rs
@@ -5,7 +5,7 @@ mod year_panel;
 use crate::ConfigInjection;
 use chrono::NaiveDate;
 use date_panel::DatePanel;
-use leptos::*;
+use leptos::{ev, html, prelude::*};
 use month_panel::MonthPanel;
 use thaw_components::CSSTransition;
 use thaw_utils::{now_date, ComponentRef};
@@ -74,7 +74,7 @@ pub fn Panel(
                 class="thaw-config-provider thaw-date-picker-panel"
                 data-thaw-id=config_provider.id().clone()
                 style=move || display.get()
-                ref=panel_ref
+                node_ref=panel_ref
             >
 
                 {move || {
diff --git a/thaw/src/date_picker/panel/month_panel.rs b/thaw/src/date_picker/panel/month_panel.rs
index ef35d69..ff0fc3e 100644
--- a/thaw/src/date_picker/panel/month_panel.rs
+++ b/thaw/src/date_picker/panel/month_panel.rs
@@ -1,7 +1,7 @@
 use super::PanelVariant;
 use crate::{Button, ButtonAppearance, ButtonSize};
 use chrono::{Datelike, Month, Months, NaiveDate};
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn MonthPanel(
diff --git a/thaw/src/date_picker/panel/year_panel.rs b/thaw/src/date_picker/panel/year_panel.rs
index 18de06a..553f072 100644
--- a/thaw/src/date_picker/panel/year_panel.rs
+++ b/thaw/src/date_picker/panel/year_panel.rs
@@ -1,7 +1,7 @@
 use super::PanelVariant;
 use crate::{Button, ButtonAppearance, ButtonSize};
 use chrono::{Datelike, NaiveDate};
-use leptos::*;
+use leptos::prelude::*;
 
 const MAX_YEAR: i32 = (i32::MAX >> 13) / 10 - 1;
 const MIN_YEAR: i32 = (i32::MIN >> 13) / 10 + 1;
@@ -11,7 +11,7 @@ pub fn YearPanel(
     date_panel_show_date: RwSignal<NaiveDate>,
     panel_variant: RwSignal<PanelVariant>,
 ) -> impl IntoView {
-    let show_min_year = create_rw_signal(date_panel_show_date.get_untracked().year() / 10);
+    let show_min_year = RwSignal::new(date_panel_show_date.get_untracked().year() / 10);
     let previous_year_range = move |_| {
         show_min_year.update(|year| {
             if *year > MIN_YEAR {
@@ -74,7 +74,7 @@ pub fn YearPanel(
 
 #[component]
 fn YearPanelItem(date_panel_show_date: RwSignal<NaiveDate>, year: i32) -> impl IntoView {
-    let is_selected = create_memo(move |_| date_panel_show_date.with(|date| date.year() == year));
+    let is_selected = Memo::new(move |_| date_panel_show_date.with(|date| date.year() == year));
 
     view! {
         <div
diff --git a/thaw/src/dialog/dialog.rs b/thaw/src/dialog/dialog.rs
index b5efde8..750224a 100644
--- a/thaw/src/dialog/dialog.rs
+++ b/thaw/src/dialog/dialog.rs
@@ -1,5 +1,5 @@
 use crate::ConfigInjection;
-use leptos::*;
+use leptos::{context::Provider, ev, html, prelude::*};
 use thaw_components::{CSSTransition, FocusTrap, Teleport};
 use thaw_utils::{mount_style, Model};
 
@@ -41,7 +41,7 @@ pub fn Dialog(
                             class="thaw-dialog-surface__backdrop"
                             style=move || display.get()
                             on:click=on_mask_click
-                            ref=mask_ref
+                            node_ref=mask_ref
                             aria-hidden="true"
                         ></div>
                     </CSSTransition>
diff --git a/thaw/src/dialog/dialog_actions.rs b/thaw/src/dialog/dialog_actions.rs
index 85cb3ad..ac1b5e5 100644
--- a/thaw/src/dialog/dialog_actions.rs
+++ b/thaw/src/dialog/dialog_actions.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn DialogActions(children: Children) -> impl IntoView {
diff --git a/thaw/src/dialog/dialog_body.rs b/thaw/src/dialog/dialog_body.rs
index e00c39f..7dccce1 100644
--- a/thaw/src/dialog/dialog_body.rs
+++ b/thaw/src/dialog/dialog_body.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn DialogBody(children: Children) -> impl IntoView {
diff --git a/thaw/src/dialog/dialog_content.rs b/thaw/src/dialog/dialog_content.rs
index 8dcf9a1..8095a17 100644
--- a/thaw/src/dialog/dialog_content.rs
+++ b/thaw/src/dialog/dialog_content.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn DialogContent(children: Children) -> impl IntoView {
diff --git a/thaw/src/dialog/dialog_surface.rs b/thaw/src/dialog/dialog_surface.rs
index d779a47..2775d22 100644
--- a/thaw/src/dialog/dialog_surface.rs
+++ b/thaw/src/dialog/dialog_surface.rs
@@ -1,5 +1,5 @@
 use super::dialog::DialogInjection;
-use leptos::*;
+use leptos::{html, prelude::*};
 use thaw_components::CSSTransition;
 
 #[component]
@@ -17,7 +17,7 @@ pub fn DialogSurface(children: Children) -> impl IntoView {
         >
             <div
                 class="thaw-dialog-surface"
-                ref=surface_ref
+                node_ref=surface_ref
                 role="dialog"
                 aria-modal="true"
                 style:display=move || display.get().map(|_| "none")
diff --git a/thaw/src/dialog/dialog_title.rs b/thaw/src/dialog/dialog_title.rs
index 552f1cb..861e860 100644
--- a/thaw/src/dialog/dialog_title.rs
+++ b/thaw/src/dialog/dialog_title.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn DialogTitle(children: Children) -> impl IntoView {
diff --git a/thaw/src/divider/mod.rs b/thaw/src/divider/mod.rs
index 830926a..7104479 100644
--- a/thaw/src/divider/mod.rs
+++ b/thaw/src/divider/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
diff --git a/thaw/src/drawer/drawer_body.rs b/thaw/src/drawer/drawer_body.rs
index 330e7de..4a52520 100644
--- a/thaw/src/drawer/drawer_body.rs
+++ b/thaw/src/drawer/drawer_body.rs
@@ -1,5 +1,5 @@
 use crate::Scrollbar;
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn DrawerBody(children: Children) -> impl IntoView {
diff --git a/thaw/src/drawer/drawer_header.rs b/thaw/src/drawer/drawer_header.rs
index 023cd2e..a526d0e 100644
--- a/thaw/src/drawer/drawer_header.rs
+++ b/thaw/src/drawer/drawer_header.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn DrawerHeader(children: Children) -> impl IntoView {
diff --git a/thaw/src/drawer/drawer_header_title.rs b/thaw/src/drawer/drawer_header_title.rs
index 2ff2e09..44deefc 100644
--- a/thaw/src/drawer/drawer_header_title.rs
+++ b/thaw/src/drawer/drawer_header_title.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_components::OptionComp;
 
 #[component]
diff --git a/thaw/src/drawer/inline_drawer.rs b/thaw/src/drawer/inline_drawer.rs
index 4b51d78..ba90728 100644
--- a/thaw/src/drawer/inline_drawer.rs
+++ b/thaw/src/drawer/inline_drawer.rs
@@ -1,5 +1,5 @@
 use super::{DrawerPosition, DrawerSize};
-use leptos::*;
+use leptos::{html, prelude::*};
 use thaw_components::CSSTransition;
 use thaw_utils::{class_list, mount_style, Model};
 
@@ -62,7 +62,7 @@ pub fn InlineDrawer(
                         .get()
                         .map_or_else(size, |d| d.to_string())
                 }
-                ref=drawer_ref
+                node_ref=drawer_ref
             >
                 {children()}
             </div>
diff --git a/thaw/src/drawer/mod.rs b/thaw/src/drawer/mod.rs
index 7e5687a..e36aa03 100644
--- a/thaw/src/drawer/mod.rs
+++ b/thaw/src/drawer/mod.rs
@@ -10,7 +10,7 @@ pub use drawer_header_title::*;
 pub use inline_drawer::*;
 pub use overlay_drawer::*;
 
-use leptos::{MaybeSignal, SignalWith};
+use leptos::prelude::MaybeSignal;
 
 #[derive(Clone, Default, Copy)]
 pub enum DrawerPosition {
@@ -53,4 +53,4 @@ impl DrawerSize {
             }),
         }
     }
-}
\ No newline at end of file
+}
diff --git a/thaw/src/drawer/overlay_drawer.rs b/thaw/src/drawer/overlay_drawer.rs
index 8358679..2a52918 100644
--- a/thaw/src/drawer/overlay_drawer.rs
+++ b/thaw/src/drawer/overlay_drawer.rs
@@ -1,6 +1,6 @@
 use super::{DrawerPosition, DrawerSize};
 use crate::ConfigInjection;
-use leptos::*;
+use leptos::prelude::*;
 use thaw_components::{CSSTransition, FocusTrap, Teleport};
 use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model};
 
@@ -75,7 +75,7 @@ pub fn OverlayDrawer(
                             class="thaw-overlay-drawer__backdrop"
                             style=move || display.get()
                             on:click=on_mask_click
-                            ref=mask_ref
+                            node_ref=mask_ref
                         ></div>
                     </CSSTransition>
                     <CSSTransition
@@ -102,7 +102,7 @@ pub fn OverlayDrawer(
                                     .get()
                                     .map_or_else(size, |d| d.to_string())
                             }
-                            ref=drawer_ref
+                            node_ref=drawer_ref
                             role="dialog"
                             aria-modal="true"
                         >
diff --git a/thaw/src/grid/grid_item.rs b/thaw/src/grid/grid_item.rs
index d306f25..cf3cb71 100644
--- a/thaw/src/grid/grid_item.rs
+++ b/thaw/src/grid/grid_item.rs
@@ -1,5 +1,5 @@
 use super::use_grid;
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, OptionalProp};
 
 #[component]
@@ -11,7 +11,7 @@ pub fn GridItem(
 ) -> impl IntoView {
     let grid = use_grid();
 
-    let style = create_memo(move |_| {
+    let style = Memo::new(move |_| {
         let mut style = String::new();
         let offset = offset.get();
         let column = column.get();
diff --git a/thaw/src/grid/mod.rs b/thaw/src/grid/mod.rs
index a85b8f9..b4a2606 100644
--- a/thaw/src/grid/mod.rs
+++ b/thaw/src/grid/mod.rs
@@ -1,7 +1,7 @@
 mod grid_item;
 
 pub use grid_item::*;
-use leptos::*;
+use leptos::{context::Provider, prelude::*};
 use thaw_utils::{class_list, OptionalProp};
 
 #[component]
@@ -12,7 +12,7 @@ pub fn Grid(
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
     children: Children,
 ) -> impl IntoView {
-    let style = create_memo(move |_| {
+    let style = Memo::new(move |_| {
         let mut style = String::from("display: grid;");
         style.push_str(&format!(
             "grid-template-columns: repeat({}, minmax(0px, 1fr));",
diff --git a/thaw/src/icon/mod.rs b/thaw/src/icon/mod.rs
index 2e6d588..21f9fab 100644
--- a/thaw/src/icon/mod.rs
+++ b/thaw/src/icon/mod.rs
@@ -1,6 +1,6 @@
 // copy https://github.com/Carlosted/leptos-icons
 // leptos updated version causes leptos_icons error
-use leptos::*;
+use leptos::{ev, prelude::*};
 use thaw_utils::{class_list, mount_style};
 
 /// The Icon component.
@@ -45,7 +45,7 @@ pub fn Icon(
         }
     };
 
-    create_isomorphic_effect(move |_| {
+    Effect::new_isomorphic(move |_| {
         let icon = icon.get();
 
         let style = match (style.clone(), icon.style) {
diff --git a/thaw/src/image/mod.rs b/thaw/src/image/mod.rs
index 89ddf4b..9a6c58b 100644
--- a/thaw/src/image/mod.rs
+++ b/thaw/src/image/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style};
 
 #[component]
diff --git a/thaw/src/input/mod.rs b/thaw/src/input/mod.rs
index 82da8b6..bd8d30b 100644
--- a/thaw/src/input/mod.rs
+++ b/thaw/src/input/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::{ev, html, prelude::*};
 use thaw_utils::{class_list, mount_style, ComponentRef, Model, OptionalProp};
 
 #[derive(Default, Clone)]
@@ -45,16 +45,16 @@ pub fn Input(
     #[prop(optional)] input_suffix: Option<InputSuffix>,
     #[prop(optional)] comp_ref: ComponentRef<InputRef>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
+    // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
 ) -> impl IntoView {
     mount_style("input", include_str!("./input.css"));
 
-    let value_trigger = Trigger::new();
+    let value_trigger = ArcTrigger::new();
     let on_input = move |ev| {
         let input_value = event_target_value(&ev);
         if let Some(allow_value) = allow_value.as_ref() {
             if !allow_value.call(input_value.clone()) {
-                value_trigger.notify();
+                value_trigger.trigger();
                 return;
             }
         }
@@ -75,9 +75,7 @@ pub fn Input(
     };
 
     let input_ref = NodeRef::<html::Input>::new();
-    input_ref.on_load(move |_| {
-        comp_ref.load(InputRef { input_ref });
-    });
+    comp_ref.load(InputRef { input_ref });
 
     let on_mousedown = move |event: ev::MouseEvent| {
         let el: web_sys::HtmlElement = event_target(&event);
@@ -102,18 +100,18 @@ pub fn Input(
         input_value = None;
     }
 
-    #[cfg(debug_assertions)]
-    {
-        const INNER_ATTRS: [&str; 4] = ["type", "class", "disabled", "placeholder"];
-        attrs.iter().for_each(|attr| {
-            if INNER_ATTRS.contains(&attr.0) {
-                logging::warn!(
-                    "Thaw: The '{}' attribute already exists on elements inside the Input component, which may cause conflicts.",
-                    attr.0
-                );
-            }
-        });
-    }
+    // #[cfg(debug_assertions)]
+    // {
+    //     const INNER_ATTRS: [&str; 4] = ["type", "class", "disabled", "placeholder"];
+    //     attrs.iter().for_each(|attr| {
+    //         if INNER_ATTRS.contains(&attr.0) {
+    //             logging::warn!(
+    //                 "Thaw: The '{}' attribute already exists on elements inside the Input component, which may cause conflicts.",
+    //                 attr.0
+    //             );
+    //         }
+    //     });
+    // }
 
     view! {
         <span
@@ -134,7 +132,6 @@ pub fn Input(
             }}
 
             <input
-                {..attrs}
                 type=move || variant.get().as_str()
                 value=input_value
                 prop:value=move || {
@@ -148,7 +145,7 @@ pub fn Input(
                 class="thaw-input__input"
                 disabled=move || disabled.get()
                 placeholder=placeholder.map(|p| move || p.get())
-                ref=input_ref
+                node_ref=input_ref
             />
 
             {if let Some(suffix) = input_suffix.and_then(|suffix| suffix.if_.then_some(suffix)) {
diff --git a/thaw/src/layout/layout_header.rs b/thaw/src/layout/layout_header.rs
index 20eca5d..29ba006 100644
--- a/thaw/src/layout/layout_header.rs
+++ b/thaw/src/layout/layout_header.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, OptionalProp};
 
 #[component]
diff --git a/thaw/src/layout/layout_sider.rs b/thaw/src/layout/layout_sider.rs
index fa5a8ba..fd605b1 100644
--- a/thaw/src/layout/layout_sider.rs
+++ b/thaw/src/layout/layout_sider.rs
@@ -1,5 +1,5 @@
 use crate::Scrollbar;
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[component]
diff --git a/thaw/src/layout/mod.rs b/thaw/src/layout/mod.rs
index 6fef62b..d76cf59 100644
--- a/thaw/src/layout/mod.rs
+++ b/thaw/src/layout/mod.rs
@@ -5,7 +5,7 @@ pub use layout_header::*;
 pub use layout_sider::*;
 
 use crate::Scrollbar;
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[derive(Default, PartialEq)]
@@ -36,7 +36,7 @@ pub fn Layout(
 ) -> impl IntoView {
     mount_style("layout", include_str!("./layout.css"));
 
-    let sider_style = create_memo(move |_| {
+    let sider_style = Memo::new(move |_| {
         if has_sider.get() {
             Some("display: flex; flex-wrap: nowrap; flex-direction: row; width: 100%;")
         } else {
diff --git a/thaw/src/lib.rs b/thaw/src/lib.rs
index b146f1b..d4adc6f 100644
--- a/thaw/src/lib.rs
+++ b/thaw/src/lib.rs
@@ -89,7 +89,7 @@ pub use table::*;
 pub use tag::*;
 pub use text::*;
 pub use textarea::*;
-pub use thaw_utils::{create_component_ref, ComponentRef, SignalWatch};
+pub use thaw_utils::{ComponentRef, SignalWatch};
 pub use theme::*;
 pub use time_picker::*;
 pub use toast::*;
diff --git a/thaw/src/loading_bar/loading_bar_provider.rs b/thaw/src/loading_bar/loading_bar_provider.rs
index ea79a76..2b3f7f0 100644
--- a/thaw/src/loading_bar/loading_bar_provider.rs
+++ b/thaw/src/loading_bar/loading_bar_provider.rs
@@ -1,5 +1,5 @@
 use super::{LoadingBar, LoadingBarRef};
-use leptos::*;
+use leptos::{context::Provider, prelude::*};
 use thaw_components::Teleport;
 use thaw_utils::ComponentRef;
 
diff --git a/thaw/src/loading_bar/mod.rs b/thaw/src/loading_bar/mod.rs
index 8259ff9..af02abf 100644
--- a/thaw/src/loading_bar/mod.rs
+++ b/thaw/src/loading_bar/mod.rs
@@ -3,7 +3,7 @@ mod loading_bar_provider;
 pub use loading_bar_provider::{use_loading_bar, LoadingBarProvider};
 
 use crate::ConfigInjection;
-use leptos::*;
+use leptos::{html, prelude::*};
 use thaw_utils::{mount_style, ComponentRef};
 
 #[derive(Clone)]
@@ -35,17 +35,15 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
     let start = Callback::new(move |_| {
         loading.set(true);
         if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() {
-            let loading_bar_ref = loading_bar_ref
-                .style("background-color", "var(--colorStatusSuccessForeground1)")
-                .style("transition", "none")
-                .style("max-width", "0");
+            loading_bar_ref.style(("background-color", "var(--colorStatusSuccessForeground1)"));
+            loading_bar_ref.style(("transition", "none"));
+            loading_bar_ref.style(("max-width", "0"));
             _ = loading_bar_ref.offset_width();
-            _ = loading_bar_ref
-                .style("transition", "max-width 4s linear")
-                .style("max-width", "80%");
+            loading_bar_ref.style(("transition", "max-width 4s linear"));
+            loading_bar_ref.style(("max-width", "80%"));
         }
     });
-    let is_on_transitionend = store_value(false);
+    let is_on_transitionend = StoredValue::new(false);
     let on_transitionend = move |_| {
         if is_on_transitionend.get_value() {
             is_on_transitionend.set_value(false);
@@ -54,10 +52,9 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
     };
     let finish = Callback::new(move |_| {
         if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() {
-            _ = loading_bar_ref
-                .style("background-color", "var(--colorStatusSuccessForeground1)")
-                .style("transition", "max-width 0.5s linear")
-                .style("max-width", "100%");
+            loading_bar_ref.style(("background-color", "var(--colorStatusSuccessForeground1)"));
+            loading_bar_ref.style(("transition", "max-width 0.5s linear"));
+            loading_bar_ref.style(("max-width", "100%"));
             is_on_transitionend.set_value(true);
         }
     });
@@ -66,15 +63,13 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
             if !loading.get() {
                 loading.set(true);
                 let loading_bar_ref = loading_bar_ref.clone();
-                let loading_bar_ref = loading_bar_ref
-                    .style("transition", "none")
-                    .style("max-width", "0");
+                loading_bar_ref.style(("transition", "none"));
+                loading_bar_ref.style(("max-width", "0"));
                 _ = loading_bar_ref.offset_width();
             }
-            _ = loading_bar_ref
-                .style("background-color", "var(--colorStatusDangerForeground1)")
-                .style("transition", "max-width 0.5s linear")
-                .style("max-width", "100%");
+            loading_bar_ref.style(("background-color", "var(--colorStatusDangerForeground1)"));
+            loading_bar_ref.style(("transition", "max-width 0.5s linear"));
+            loading_bar_ref.style(("max-width", "100%"));
             is_on_transitionend.set_value(true);
         }
     });
@@ -92,7 +87,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
         >
             <div
                 class="thaw-loading-bar"
-                ref=loading_bar_ref
+                node_ref=loading_bar_ref
                 on:transitionend=on_transitionend
             ></div>
         </div>
diff --git a/thaw/src/message/message_provider.rs b/thaw/src/message/message_provider.rs
index 3af383e..b6f134f 100644
--- a/thaw/src/message/message_provider.rs
+++ b/thaw/src/message/message_provider.rs
@@ -1,5 +1,5 @@
 use super::{Message, MessageVariant};
-use leptos::*;
+use leptos::{context::Provider, prelude::*};
 use std::time::Duration;
 use thaw_components::Teleport;
 use thaw_utils::{class_list, mount_style};
@@ -36,7 +36,7 @@ pub fn MessageProvider(
 ) -> impl IntoView {
     mount_style("message", include_str!("./message.css"));
 
-    let message_list = create_rw_signal::<Vec<MessageType>>(vec![]);
+    let message_list = RwSignal::<Vec<MessageType>>::new(vec![]);
 
     let handle_after_leave = move |id| {
         message_list.update(move |message_list| {
diff --git a/thaw/src/message/mod.rs b/thaw/src/message/mod.rs
index 7fd32f4..07e9b7e 100644
--- a/thaw/src/message/mod.rs
+++ b/thaw/src/message/mod.rs
@@ -3,7 +3,7 @@ mod message_provider;
 pub use message_provider::*;
 
 use crate::{Icon, Theme};
-use leptos::*;
+use leptos::{html, prelude::*};
 use thaw_components::{CSSTransition, If, Then};
 use uuid::Uuid;
 
@@ -48,7 +48,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
     }
 
     // let theme = use_theme(Theme::light);
-    let css_vars = create_memo(move |_| {
+    let css_vars = Memo::new(move |_| {
         let mut css_vars = String::new();
         // theme.with(|theme| {
         //     css_vars.push_str(&format!(
@@ -61,17 +61,17 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
     // let style = theme.with_untracked(|theme| format!("color: {};", variant.theme_color(theme)));
 
     let on_before_leave = Callback::new(move |_| {
-        let Some(node_el) = message_ref.get() else {
-            return;
-        };
-        use std::ops::Deref;
-        let any_el = node_el.into_any();
-        let el = any_el.deref();
-        let style = el.style();
-        let _ = style.set_property("max-height", &format!("{}px", el.offset_height()));
+        // let Some(node_el) = message_ref.get() else {
+        //     return;
+        // };
+        // use std::ops::Deref;
+        // let any_el = node_el.into_any();
+        // let el = any_el.deref();
+        // let style = el.style();
+        // let _ = style.set_property("max-height", &format!("{}px", el.offset_height()));
     });
     let on_after_leave = Callback::new(move |_| {
-        queue_microtask(move || on_close.call(id));
+        // queue_microtask(move || on_close.call(id));
     });
 
     view! {
@@ -84,7 +84,7 @@ fn Message(message: MessageType, #[prop(into)] on_close: Callback<Uuid, ()>) ->
             on_after_leave=on_after_leave
             let:_
         >
-            <div class="thaw-message-wrapper" ref=message_ref>
+            <div class="thaw-message-wrapper" node_ref=message_ref>
                 <div class="thaw-message" style=move || css_vars.get()>
                     <div class="thaw-message__icon">
                         <Icon icon=variant.icon()/>
diff --git a/thaw/src/message_bar/message_bar.rs b/thaw/src/message_bar/message_bar.rs
index d92975e..365d9f8 100644
--- a/thaw/src/message_bar/message_bar.rs
+++ b/thaw/src/message_bar/message_bar.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style, StoredMaybeSignal};
 
 #[component]
diff --git a/thaw/src/message_bar/message_bar_actions.rs b/thaw/src/message_bar/message_bar_actions.rs
index 67125cb..59d73a6 100644
--- a/thaw/src/message_bar/message_bar_actions.rs
+++ b/thaw/src/message_bar/message_bar_actions.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn MessageBarActions(
diff --git a/thaw/src/message_bar/message_bar_body.rs b/thaw/src/message_bar/message_bar_body.rs
index ff81683..14f2ac7 100644
--- a/thaw/src/message_bar/message_bar_body.rs
+++ b/thaw/src/message_bar/message_bar_body.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn MessageBarBody(children: Children) -> impl IntoView {
diff --git a/thaw/src/message_bar/message_bar_title.rs b/thaw/src/message_bar/message_bar_title.rs
index 707723f..e222dc4 100644
--- a/thaw/src/message_bar/message_bar_title.rs
+++ b/thaw/src/message_bar/message_bar_title.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn MessageBarTitle(children: Children) -> impl IntoView {
diff --git a/thaw/src/nav/nav_drawer.rs b/thaw/src/nav/nav_drawer.rs
index f589795..4e09f6a 100644
--- a/thaw/src/nav/nav_drawer.rs
+++ b/thaw/src/nav/nav_drawer.rs
@@ -1,5 +1,5 @@
 use crate::Scrollbar;
-use leptos::*;
+use leptos::{context::Provider, prelude::*};
 use thaw_components::OptionComp;
 use thaw_utils::{mount_style, Model};
 
diff --git a/thaw/src/nav/nav_item.rs b/thaw/src/nav/nav_item.rs
index 968066b..92327d0 100644
--- a/thaw/src/nav/nav_item.rs
+++ b/thaw/src/nav/nav_item.rs
@@ -1,5 +1,5 @@
 use crate::use_nav_drawer;
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, StoredMaybeSignal};
 
 #[component]
diff --git a/thaw/src/popover/mod.rs b/thaw/src/popover/mod.rs
index 0a6d416..da17e1f 100644
--- a/thaw/src/popover/mod.rs
+++ b/thaw/src/popover/mod.rs
@@ -1,5 +1,5 @@
 use crate::ConfigInjection;
-use leptos::{leptos_dom::helpers::TimeoutHandle, *};
+use leptos::{ev, html, leptos_dom::helpers::TimeoutHandle, prelude::*};
 use std::time::Duration;
 use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
 use thaw_utils::{add_event_listener, class_list, mount_style};
@@ -77,7 +77,7 @@ pub fn Popover(
                 let Some(popover_el) = popover_ref.get_untracked() else {
                     break;
                 };
-                if current_el == ***popover_el {
+                if current_el == popover_el {
                     return;
                 }
                 el = current_el.parent_element();
@@ -105,7 +105,7 @@ pub fn Popover(
         <Binder target_ref>
             <div
                 class=class_list!["thaw-popover-trigger", trigger_class]
-                ref=target_ref
+                node_ref=target_ref
                 on:mouseenter=on_mouse_enter
                 on:mouseleave=on_mouse_leave
             >
@@ -128,7 +128,7 @@ pub fn Popover(
                         data-thaw-id=config_provider.id().clone()
                         style=move || display.get()
 
-                        ref=popover_ref
+                        node_ref=popover_ref
                         on:mouseenter=on_mouse_enter
                         on:mouseleave=on_mouse_leave
                     >
diff --git a/thaw/src/progress_bar/progress_bar.rs b/thaw/src/progress_bar/progress_bar.rs
index 3a2dcdd..d0b3afb 100644
--- a/thaw/src/progress_bar/progress_bar.rs
+++ b/thaw/src/progress_bar/progress_bar.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style};
 
 #[component]
diff --git a/thaw/src/progress_bar/progress_circle.rs b/thaw/src/progress_bar/progress_circle.rs
index 2997ca0..d78b55e 100644
--- a/thaw/src/progress_bar/progress_circle.rs
+++ b/thaw/src/progress_bar/progress_circle.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[component]
@@ -28,12 +28,8 @@ pub fn ProgressCircle(
     let fill_path = rail_path.clone();
     let fill_stroke_dasharray = Memo::new(move |_| {
         let percentage = value.get().max(0.0).min(100.0);
-        
-        format!(
-            "{}px {}px",
-            percentage / 100.0 * len,
-            view_box_width * 8
-        )
+
+        format!("{}px {}px", percentage / 100.0 * len, view_box_width * 8)
     });
     let fill_stroke_color = move || match color.get() {
         ProgressCircleColor::Brand => "var(--colorCompoundBrandBackground)",
@@ -78,13 +74,13 @@ pub fn ProgressCircle(
             </svg>
 
             {if let Some(children) = children {
-                view! { <div class="thaw-progress-circle__content">{children()}</div> }
+                view! { <div class="thaw-progress-circle__content">{children()}</div> }.into_any()
             } else {
                 view! {
                     <div class="thaw-progress-circle__content thaw-progress-circle__content--text">
                         {move || value.get()} "%"
                     </div>
-                }
+                }.into_any()
             }}
 
         </div>
diff --git a/thaw/src/radio/mod.rs b/thaw/src/radio/mod.rs
index ac92ce2..fb1b565 100644
--- a/thaw/src/radio/mod.rs
+++ b/thaw/src/radio/mod.rs
@@ -2,7 +2,7 @@ mod radio_group;
 
 pub use radio_group::RadioGroup;
 
-use leptos::*;
+use leptos::prelude::*;
 use radio_group::RadioGroupInjection;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
diff --git a/thaw/src/radio/radio_group.rs b/thaw/src/radio/radio_group.rs
index 6c37e35..a6af90a 100644
--- a/thaw/src/radio/radio_group.rs
+++ b/thaw/src/radio/radio_group.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::{context::Provider, prelude::*};
 use thaw_utils::Model;
 
 #[component]
diff --git a/thaw/src/scrollbar/mod.rs b/thaw/src/scrollbar/mod.rs
index 2fe1c9c..6ff4ae8 100644
--- a/thaw/src/scrollbar/mod.rs
+++ b/thaw/src/scrollbar/mod.rs
@@ -1,4 +1,4 @@
-use leptos::{leptos_dom::helpers::WindowListenerHandle, *};
+use leptos::{ev, html, leptos_dom::helpers::WindowListenerHandle, prelude::*};
 use thaw_utils::{class_list, mount_style, ComponentRef, OptionalProp};
 
 #[component]
@@ -266,7 +266,7 @@ pub fn Scrollbar(
             on:mouseleave=on_mouseleave
         >
 
-            <div class="thaw-scrollbar__container" ref=container_ref on:scroll=on_scroll>
+            <div class="thaw-scrollbar__container" node_ref=container_ref on:scroll=on_scroll>
                 <div
                     class=class_list![
                         "thaw-scrollbar__content", content_class.map(| c | move || c.get())
@@ -279,12 +279,12 @@ pub fn Scrollbar(
                         )
                     }
 
-                    ref=content_ref
+                    node_ref=content_ref
                 >
                     {children()}
                 </div>
             </div>
-            <div class="thaw-scrollbar__track--vertical" ref=y_track_ref>
+            <div class="thaw-scrollbar__track--vertical" node_ref=y_track_ref>
                 <div
                     class="thaw-scrollabr__thumb"
                     style:display=move || (!is_show_y_thumb.get()).then_some("none")
@@ -293,7 +293,7 @@ pub fn Scrollbar(
                     on:mousedown=on_y_thumb_mousedown
                 ></div>
             </div>
-            <div class="thaw-scrollbar__track--horizontal" ref=x_track_ref>
+            <div class="thaw-scrollbar__track--horizontal" node_ref=x_track_ref>
                 <div
                     class="thaw-scrollabr__thumb"
                     style:display=move || (!is_show_x_thumb.get()).then_some("none")
diff --git a/thaw/src/skeleton/skeleton.rs b/thaw/src/skeleton/skeleton.rs
index 4bdec06..d482145 100644
--- a/thaw/src/skeleton/skeleton.rs
+++ b/thaw/src/skeleton/skeleton.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn Skeleton(children: Children) -> impl IntoView {
diff --git a/thaw/src/skeleton/skeleton_item.rs b/thaw/src/skeleton/skeleton_item.rs
index 720fa79..ea36206 100644
--- a/thaw/src/skeleton/skeleton_item.rs
+++ b/thaw/src/skeleton/skeleton_item.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::mount_style;
 
 #[component]
diff --git a/thaw/src/slider/mod.rs b/thaw/src/slider/mod.rs
index ee277d3..77bb528 100644
--- a/thaw/src/slider/mod.rs
+++ b/thaw/src/slider/mod.rs
@@ -2,7 +2,7 @@ mod slider_label;
 
 pub use slider_label::SliderLabel;
 
-use leptos::*;
+use leptos::{context::Provider, ev, prelude::*};
 use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style, Model, OptionalProp};
 
diff --git a/thaw/src/slider/slider_label.rs b/thaw/src/slider/slider_label.rs
index 9d24004..1e80fce 100644
--- a/thaw/src/slider/slider_label.rs
+++ b/thaw/src/slider/slider_label.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::mount_style;
 
 use crate::SliderInjection;
diff --git a/thaw/src/space/mod.rs b/thaw/src/space/mod.rs
index 6bfde11..41702e2 100644
--- a/thaw/src/space/mod.rs
+++ b/thaw/src/space/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
 
 #[derive(Default)]
diff --git a/thaw/src/spin_button/mod.rs b/thaw/src/spin_button/mod.rs
index 41d068d..2f98e09 100644
--- a/thaw/src/spin_button/mod.rs
+++ b/thaw/src/spin_button/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use num_traits::Bounded;
 use std::ops::{Add, Sub};
 use std::str::FromStr;
@@ -13,6 +13,7 @@ pub fn SpinButton<T>(
     #[prop(optional, into)] disabled: MaybeSignal<bool>,
 ) -> impl IntoView
 where
+    T: Send + Sync,
     T: Add<Output = T> + Sub<Output = T> + PartialOrd + Bounded,
     T: Default + Clone + FromStr + ToString + 'static,
 {
diff --git a/thaw/src/spinner/mod.rs b/thaw/src/spinner/mod.rs
index 8b68b5f..97b4709 100644
--- a/thaw/src/spinner/mod.rs
+++ b/thaw/src/spinner/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::{class_list, mount_style};
 
 #[derive(Default, Clone)]
diff --git a/thaw/src/switch/mod.rs b/thaw/src/switch/mod.rs
index a5bb036..a09b817 100644
--- a/thaw/src/switch/mod.rs
+++ b/thaw/src/switch/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::{html, prelude::*};
 use thaw_utils::{class_list, mount_style, Model, OptionalProp};
 
 #[component]
@@ -29,7 +29,7 @@ pub fn Switch(
                 type="checkbox"
                 id=id.clone()
                 checked=checked.get_untracked()
-                ref=input_ref
+                node_ref=input_ref
                 on:change=on_change
             />
             <div aria-hidden="true" class="thaw-switch__indicator thaw-switch__button">
diff --git a/thaw/src/tab_list/mod.rs b/thaw/src/tab_list/mod.rs
index 6cb6458..c848916 100644
--- a/thaw/src/tab_list/mod.rs
+++ b/thaw/src/tab_list/mod.rs
@@ -2,7 +2,7 @@ mod tab;
 
 pub use tab::*;
 
-use leptos::*;
+use leptos::{context::Provider, html, prelude::*};
 use std::collections::HashMap;
 use thaw_utils::{class_list, mount_style, Model};
 
diff --git a/thaw/src/tab_list/tab.rs b/thaw/src/tab_list/tab.rs
index faac59c..6d1f672 100644
--- a/thaw/src/tab_list/tab.rs
+++ b/thaw/src/tab_list/tab.rs
@@ -1,5 +1,5 @@
 use super::{TabListInjection, TabRegisterData};
-use leptos::*;
+use leptos::{html, prelude::*};
 use std::ops::Deref;
 use thaw_utils::{class_list, mount_style};
 
@@ -66,7 +66,7 @@ pub fn Tab(
             ]
             role="tab"
             aria-selected=move || if selected.get() { "true" } else { "false" }
-            ref=tab_ref
+            node_ref=tab_ref
             on:click=on_select
         >
             <span class="thaw-tab__content">
diff --git a/thaw/src/table/mod.rs b/thaw/src/table/mod.rs
index 37efef5..5ee04b2 100644
--- a/thaw/src/table/mod.rs
+++ b/thaw/src/table/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style};
 
diff --git a/thaw/src/tag/mod.rs b/thaw/src/tag/mod.rs
index 648918c..add69dd 100644
--- a/thaw/src/tag/mod.rs
+++ b/thaw/src/tag/mod.rs
@@ -1,5 +1,5 @@
 use crate::Icon;
-use leptos::*;
+use leptos::{ev, prelude::*};
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[derive(Clone, Copy, Default, PartialEq, Eq, Hash)]
diff --git a/thaw/src/text/mod.rs b/thaw/src/text/mod.rs
index 7861e52..52b5d8b 100644
--- a/thaw/src/text/mod.rs
+++ b/thaw/src/text/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::{prelude::*, tachys::view::any_view::IntoAny};
 use thaw_utils::{class_list, mount_style};
 
 #[component]
@@ -62,79 +62,79 @@ pub fn Text(
                 {children()}
             </b>
         }
-        .into_view(),
+        .into_any(),
         TextTag::Em => view! {
             <em class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </em>
         }
-        .into_view(),
+        .into_any(),
         TextTag::H1 => view! {
             <h1 class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </h1>
         }
-        .into_view(),
+        .into_any(),
         TextTag::H2 => view! {
             <h2 class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </h2>
         }
-        .into_view(),
+        .into_any(),
         TextTag::H3 => view! {
             <h3 class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </h3>
         }
-        .into_view(),
+        .into_any(),
         TextTag::H4 => view! {
             <h4 class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </h4>
         }
-        .into_view(),
+        .into_any(),
         TextTag::H5 => view! {
             <h5 class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </h5>
         }
-        .into_view(),
+        .into_any(),
         TextTag::H6 => view! {
             <h6 class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </h6>
         }
-        .into_view(),
+        .into_any(),
         TextTag::I => view! {
             <i class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </i>
         }
-        .into_view(),
+        .into_any(),
         TextTag::P => view! {
             <p class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </p>
         }
-        .into_view(),
+        .into_any(),
         TextTag::Pre => view! {
             <pre class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </pre>
         }
-        .into_view(),
+        .into_any(),
         TextTag::Span => view! {
             <span class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </span>
         }
-        .into_view(),
+        .into_any(),
         TextTag::Strong => view! {
             <strong class=class_list!["thaw-text", class] style=move || style.get()>
                 {children()}
             </strong>
         }
-        .into_view(),
+        .into_any(),
     }
 }
 
diff --git a/thaw/src/textarea/mod.rs b/thaw/src/textarea/mod.rs
index 732f535..8a64703 100644
--- a/thaw/src/textarea/mod.rs
+++ b/thaw/src/textarea/mod.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::{ev, html, prelude::*};
 use thaw_utils::{class_list, mount_style, ComponentRef, Model};
 
 #[component]
@@ -14,16 +14,16 @@ pub fn Textarea(
     resize: MaybeSignal<TextareaResize>,
     #[prop(optional)] comp_ref: ComponentRef<TextareaRef>,
     #[prop(optional, into)] class: MaybeProp<String>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
+    // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
 ) -> impl IntoView {
     mount_style("textarea", include_str!("./textarea.css"));
 
-    let value_trigger = Trigger::new();
+    let value_trigger = ArcTrigger::new();
     let on_input = move |ev| {
         let input_value = event_target_value(&ev);
         if let Some(allow_value) = allow_value.as_ref() {
             if !allow_value.call(input_value.clone()) {
-                value_trigger.notify();
+                value_trigger.trigger();
                 return;
             }
         }
@@ -41,22 +41,20 @@ pub fn Textarea(
     };
 
     let textarea_ref = NodeRef::<html::Textarea>::new();
-    textarea_ref.on_load(move |_| {
-        comp_ref.load(TextareaRef { textarea_ref });
-    });
+    comp_ref.load(TextareaRef { textarea_ref });
 
-    #[cfg(debug_assertions)]
-    {
-        const INNER_ATTRS: [&str; 3] = ["class", "disabled", "placeholder"];
-        attrs.iter().for_each(|attr| {
-            if INNER_ATTRS.contains(&attr.0) {
-                logging::warn!(
-                    "Thaw: The '{}' attribute already exists on elements inside the TextArea component, which may cause conflicts.",
-                    attr.0
-                );
-            }
-        });
-    }
+    // #[cfg(debug_assertions)]
+    // {
+    //     const INNER_ATTRS: [&str; 3] = ["class", "disabled", "placeholder"];
+    //     attrs.iter().for_each(|attr| {
+    //         if INNER_ATTRS.contains(&attr.0) {
+    //             logging::warn!(
+    //                 "Thaw: The '{}' attribute already exists on elements inside the TextArea component, which may cause conflicts.",
+    //                 attr.0
+    //             );
+    //         }
+    //     });
+    // }
 
     view! {
         <span
@@ -68,7 +66,6 @@ pub fn Textarea(
             ]
         >
             <textarea
-                {..attrs}
                 prop:value=move || {
                     value_trigger.track();
                     value.get()
@@ -80,7 +77,7 @@ pub fn Textarea(
                 class="thaw-textarea__textarea"
                 disabled=move || disabled.get()
                 placeholder=move || placeholder.get()
-                ref=textarea_ref
+                node_ref=textarea_ref
             ></textarea>
         </span>
     }
diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs
index 3d8216f..48f321c 100644
--- a/thaw/src/theme/mod.rs
+++ b/thaw/src/theme/mod.rs
@@ -4,7 +4,7 @@ mod common;
 use crate::ConfigInjection;
 pub use color::ColorTheme;
 pub use common::CommonTheme;
-use leptos::*;
+use leptos::prelude::*;
 
 #[derive(Clone)]
 pub struct Theme {
diff --git a/thaw/src/time_picker/mod.rs b/thaw/src/time_picker/mod.rs
index 6a1cbb8..148cb49 100644
--- a/thaw/src/time_picker/mod.rs
+++ b/thaw/src/time_picker/mod.rs
@@ -3,7 +3,7 @@ use crate::{
     SignalWatch,
 };
 use chrono::{Local, NaiveTime, Timelike};
-use leptos::*;
+use leptos::{ev, html, prelude::*};
 use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
 use thaw_utils::{mount_style, ComponentRef, Model, OptionalProp};
 
@@ -11,7 +11,7 @@ use thaw_utils::{mount_style, ComponentRef, Model, OptionalProp};
 pub fn TimePicker(
     #[prop(optional, into)] value: Model<Option<NaiveTime>>,
     #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
+    // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
 ) -> impl IntoView {
     mount_style("time-picker", include_str!("./time-picker.css"));
     let time_picker_ref = NodeRef::<html::Div>::new();
@@ -70,8 +70,8 @@ pub fn TimePicker(
 
     view! {
         <Binder target_ref=time_picker_ref>
-            <div ref=time_picker_ref>
-                <Input attrs class value=show_time_text on_focus=open_panel on_blur=on_input_blur>
+            <div node_ref=time_picker_ref>
+                <Input class value=show_time_text on_focus=open_panel on_blur=on_input_blur>
                     <InputSuffix slot>
                         <Icon icon=icondata_ai::AiClockCircleOutlined style="font-size: 18px"/>
                     </InputSuffix>
@@ -160,7 +160,7 @@ fn Panel(
                 class="thaw-config-provider thaw-time-picker-panel"
                 data-thaw-id=config_provider.id().clone()
                 style=move || display.get()
-                ref=panel_ref
+                node_ref=panel_ref
             >
                 <div class="thaw-time-picker-panel__time">
                     <div class="thaw-time-picker-panel__time-hour">
@@ -317,7 +317,7 @@ fn PanelTimeItem(
     is_selected: Memo<bool>,
     comp_ref: ComponentRef<PanelTimeItemRef>,
 ) -> impl IntoView {
-    let item_ref = create_node_ref();
+    let item_ref = NodeRef::new();
     item_ref.on_load(move |_| {
         let item_ref = PanelTimeItemRef { item_ref };
         comp_ref.load(item_ref);
@@ -326,7 +326,7 @@ fn PanelTimeItem(
         <div
             class="thaw-time-picker-panel__time-item"
             class=("thaw-time-picker-panel__time-item--slected", move || is_selected.get())
-            ref=item_ref
+            node_ref=item_ref
         >
 
             {format!("{value:02}")}
diff --git a/thaw/src/toast/mod.rs b/thaw/src/toast/mod.rs
index 2a74025..a18d2fc 100644
--- a/thaw/src/toast/mod.rs
+++ b/thaw/src/toast/mod.rs
@@ -5,17 +5,18 @@ mod toast_title;
 mod toaster;
 mod toaster_provider;
 
+use tachys::view::any_view::AnyView;
 pub use toast::*;
 pub use toast_title::*;
 pub use toaster_provider::*;
 
-use leptos::{html::AnyElement, *};
+use leptos::prelude::*;
 use std::sync::mpsc::{channel, Receiver, Sender, TryIter};
 
 #[derive(Clone)]
 pub struct ToasterInjection {
-    sender: Sender<(HtmlElement<AnyElement>, ToastOptions)>,
-    trigger: Trigger,
+    sender: Sender<(AnyView<Dom>, ToastOptions)>,
+    trigger: ArcTrigger,
 }
 
 impl ToasterInjection {
@@ -24,8 +25,8 @@ impl ToasterInjection {
     }
 
     pub fn channel() -> (Self, ToasterReceiver) {
-        let (sender, receiver) = channel::<(HtmlElement<AnyElement>, ToastOptions)>();
-        let trigger = Trigger::new();
+        let (sender, receiver) = channel::<(AnyView<Dom>, ToastOptions)>();
+        let trigger = ArcTrigger::new();
 
         (
             Self { sender, trigger },
@@ -33,26 +34,23 @@ impl ToasterInjection {
         )
     }
 
-    pub fn dispatch_toast(&self, any_element: HtmlElement<AnyElement>, options: ToastOptions) {
-        self.sender.send((any_element, options)).unwrap();
-        self.trigger.notify();
+    pub fn dispatch_toast(&self, any_view: AnyView<Dom>, options: ToastOptions) {
+        self.sender.send((any_view, options)).unwrap();
+        self.trigger.trigger();
     }
 }
 
 pub struct ToasterReceiver {
-    receiver: Receiver<(HtmlElement<AnyElement>, ToastOptions)>,
-    trigger: Trigger,
+    receiver: Receiver<(AnyView<Dom>, ToastOptions)>,
+    trigger: ArcTrigger,
 }
 
 impl ToasterReceiver {
-    pub fn new(
-        receiver: Receiver<(HtmlElement<AnyElement>, ToastOptions)>,
-        trigger: Trigger,
-    ) -> Self {
+    pub fn new(receiver: Receiver<(AnyView<Dom>, ToastOptions)>, trigger: ArcTrigger) -> Self {
         Self { receiver, trigger }
     }
 
-    pub fn try_recv(&self) -> TryIter<'_, (HtmlElement<AnyElement>, ToastOptions)> {
+    pub fn try_recv(&self) -> TryIter<'_, (AnyView<Dom>, ToastOptions)> {
         self.trigger.track();
         self.receiver.try_iter()
     }
diff --git a/thaw/src/toast/toast.rs b/thaw/src/toast/toast.rs
index 399fd5c..9e80f02 100644
--- a/thaw/src/toast/toast.rs
+++ b/thaw/src/toast/toast.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn Toast(children: Children) -> impl IntoView {
diff --git a/thaw/src/toast/toast_body.rs b/thaw/src/toast/toast_body.rs
index 412faf4..f2d5d93 100644
--- a/thaw/src/toast/toast_body.rs
+++ b/thaw/src/toast/toast_body.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_components::OptionComp;
 
 #[component]
diff --git a/thaw/src/toast/toast_footer.rs b/thaw/src/toast/toast_footer.rs
index 076c0fd..a84e131 100644
--- a/thaw/src/toast/toast_footer.rs
+++ b/thaw/src/toast/toast_footer.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 
 #[component]
 pub fn ToastFooter(children: Children) -> impl IntoView {
diff --git a/thaw/src/toast/toast_title.rs b/thaw/src/toast/toast_title.rs
index 4ea3755..ffc08a4 100644
--- a/thaw/src/toast/toast_title.rs
+++ b/thaw/src/toast/toast_title.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_components::OptionComp;
 
 #[component]
diff --git a/thaw/src/toast/toaster.rs b/thaw/src/toast/toaster.rs
index 3f66118..dde151f 100644
--- a/thaw/src/toast/toaster.rs
+++ b/thaw/src/toast/toaster.rs
@@ -1,5 +1,5 @@
 use super::{ToastPosition, ToasterReceiver};
-use leptos::*;
+use leptos::prelude::*;
 use thaw_components::Teleport;
 use thaw_utils::{class_list, mount_style};
 
diff --git a/thaw/src/toast/toaster_provider.rs b/thaw/src/toast/toaster_provider.rs
index 504bc86..92ac91b 100644
--- a/thaw/src/toast/toaster_provider.rs
+++ b/thaw/src/toast/toaster_provider.rs
@@ -1,5 +1,5 @@
 use super::{toaster::Toaster, ToastPosition, ToasterInjection};
-use leptos::*;
+use leptos::{context::Provider, prelude::*};
 
 #[component]
 pub fn ToasterProvider(
diff --git a/thaw/src/upload/mod.rs b/thaw/src/upload/mod.rs
index 90a3bba..c70a78a 100644
--- a/thaw/src/upload/mod.rs
+++ b/thaw/src/upload/mod.rs
@@ -3,7 +3,7 @@ mod upload_dragger;
 pub use upload_dragger::UploadDragger;
 pub use web_sys::FileList;
 
-use leptos::*;
+use leptos::{ev, html, prelude::*};
 use thaw_utils::{add_event_listener, mount_style};
 
 #[component]
@@ -15,8 +15,8 @@ pub fn Upload(
 ) -> impl IntoView {
     mount_style("upload", include_str!("./upload.css"));
 
-    let input_ref = create_node_ref::<html::Input>();
-    let trigger_ref = create_node_ref::<html::Div>();
+    let input_ref = NodeRef::<html::Input>::new();
+    let trigger_ref = NodeRef::<html::Div>::new();
 
     trigger_ref.on_load(move |trigger_ref| {
         let handle = add_event_listener(trigger_ref.into_any(), ev::click, move |_| {
@@ -44,7 +44,7 @@ pub fn Upload(
         }
     };
 
-    let is_trigger_dragover = create_rw_signal(false);
+    let is_trigger_dragover = RwSignal::new(false);
     let on_trigger_drop = move |event: ev::DragEvent| {
         event.prevent_default();
         if let Some(data) = event.data_transfer() {
@@ -73,7 +73,7 @@ pub fn Upload(
         >
             <input
                 class="thaw-upload__input"
-                ref=input_ref
+                node_ref=input_ref
                 type="file"
                 accept=move || accept.get()
                 multiple=move || multiple.get()
@@ -81,7 +81,7 @@ pub fn Upload(
             />
             <div
                 class="thaw-upload__trigger"
-                ref=trigger_ref
+                node_ref=trigger_ref
                 on:drop=on_trigger_drop
                 on:dragover=on_trigger_dragover
                 on:dragenter=on_trigger_dragenter
diff --git a/thaw/src/upload/upload_dragger.rs b/thaw/src/upload/upload_dragger.rs
index 991b878..125f053 100644
--- a/thaw/src/upload/upload_dragger.rs
+++ b/thaw/src/upload/upload_dragger.rs
@@ -1,4 +1,4 @@
-use leptos::*;
+use leptos::prelude::*;
 use thaw_utils::mount_style;
 
 #[component]