From 1a001d583433dc534ee1ec9bc7bb472d72695e45 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Fri, 26 Jul 2024 00:16:19 +0800
Subject: [PATCH] feat: adds class prop

---
 thaw/src/accordion/accordion_item.rs          |  5 ++-
 thaw/src/accordion/mod.rs                     |  5 ++-
 thaw/src/anchor/anchor_link.rs                | 10 ++---
 thaw/src/anchor/mod.rs                        |  8 ++--
 .../src/auto_complete/auto_complete_option.rs |  9 +++-
 thaw/src/auto_complete/mod.rs                 |  4 +-
 thaw/src/avatar/mod.rs                        |  6 +--
 thaw/src/back_top/mod.rs                      |  8 ++--
 thaw/src/button/button_group.rs               |  6 +--
 thaw/src/button/mod.rs                        |  6 +--
 thaw/src/calendar/mod.rs                      |  6 +--
 thaw/src/card/card_footer.rs                  |  9 ++--
 thaw/src/card/card_header.rs                  |  5 ++-
 thaw/src/card/card_preview.rs                 |  8 +++-
 thaw/src/card/mod.rs                          |  9 ++--
 thaw/src/checkbox/checkbox_group.rs           |  7 ++--
 thaw/src/checkbox/mod.rs                      | 10 ++---
 thaw/src/code/mod.rs                          |  8 ++--
 thaw/src/color_picker/mod.rs                  |  2 +-
 thaw/src/combobox/combobox.rs                 |  5 ++-
 thaw/src/combobox/combobox_option.rs          |  4 +-
 thaw/src/config_provider/mod.rs               |  9 ++--
 thaw/src/date_picker/mod.rs                   |  8 ++--
 thaw/src/date_picker/panel/mod.rs             |  2 +-
 thaw/src/dialog/dialog.rs                     |  7 ++--
 thaw/src/dialog/dialog_actions.rs             |  8 +++-
 thaw/src/dialog/dialog_body.rs                |  8 +++-
 thaw/src/dialog/dialog_content.rs             |  8 +++-
 thaw/src/dialog/dialog_surface.rs             |  8 +++-
 thaw/src/dialog/dialog_title.rs               |  8 +++-
 thaw/src/divider/mod.rs                       |  6 +--
 thaw/src/drawer/drawer_body.rs                |  8 +++-
 thaw/src/drawer/drawer_header.rs              |  8 +++-
 thaw/src/drawer/drawer_header_title.rs        |  4 +-
 thaw/src/drawer/inline_drawer.rs              |  4 +-
 thaw/src/drawer/overlay_drawer.rs             |  5 ++-
 thaw/src/grid/grid_item.rs                    |  6 +--
 thaw/src/grid/mod.rs                          |  6 +--
 thaw/src/input/mod.rs                         |  4 +-
 thaw/src/layout/layout_header.rs              |  8 +++-
 thaw/src/layout/layout_sider.rs               |  9 ++--
 thaw/src/layout/mod.rs                        | 11 ++---
 thaw/src/menu/menu_item.rs                    |  6 +--
 thaw/src/menu/mod.rs                          |  2 +-
 thaw/src/message_bar/message_bar.rs           |  4 +-
 thaw/src/message_bar/message_bar_body.rs      |  8 +++-
 thaw/src/message_bar/message_bar_title.rs     |  8 +++-
 thaw/src/nav/nav_drawer.rs                    |  5 ++-
 thaw/src/nav/nav_item.rs                      |  8 +++-
 thaw/src/popover/mod.rs                       |  2 +-
 thaw/src/progress_bar/progress_bar.rs         |  4 +-
 thaw/src/progress_bar/progress_circle.rs      |  6 +--
 thaw/src/radio/mod.rs                         | 10 ++---
 thaw/src/radio/radio_group.rs                 |  5 ++-
 thaw/src/scrollbar/mod.rs                     | 14 +++----
 thaw/src/skeleton/skeleton.rs                 |  8 +++-
 thaw/src/skeleton/skeleton_item.rs            |  6 +--
 thaw/src/slider/mod.rs                        |  8 ++--
 thaw/src/slider/slider_label.rs               | 15 ++++---
 thaw/src/spin_button/mod.rs                   |  6 +--
 thaw/src/switch/mod.rs                        | 11 ++---
 thaw/src/tab_list/mod.rs                      |  2 +-
 thaw/src/tab_list/tab.rs                      |  2 +-
 thaw/src/table/mod.rs                         | 42 +++++++++++++------
 thaw/src/tag/mod.rs                           |  6 +--
 thaw/src/time_picker/mod.rs                   | 10 ++---
 thaw/src/toast/toast.rs                       |  8 +++-
 thaw/src/toast/toast_footer.rs                |  8 +++-
 thaw/src/upload/mod.rs                        |  9 ++--
 thaw/src/upload/upload_dragger.rs             |  9 ++--
 70 files changed, 307 insertions(+), 210 deletions(-)

diff --git a/thaw/src/accordion/accordion_item.rs b/thaw/src/accordion/accordion_item.rs
index 5ff6f55..d48e50c 100644
--- a/thaw/src/accordion/accordion_item.rs
+++ b/thaw/src/accordion/accordion_item.rs
@@ -1,10 +1,11 @@
 use crate::AccordionInjection;
 use leptos::{html, prelude::*};
 use thaw_components::CSSTransition;
-use thaw_utils::{mount_style, update, with, StoredMaybeSignal};
+use thaw_utils::{class_list, mount_style, update, with, StoredMaybeSignal};
 
 #[component]
 pub fn AccordionItem(
+    #[prop(optional, into)] class: MaybeProp<String>,
     /// Required value that identifies this item inside an Accordion component.
     #[prop(into)]
     value: MaybeSignal<String>,
@@ -41,7 +42,7 @@ pub fn AccordionItem(
     };
 
     view! {
-        <div class="thaw-accordion-item">
+        <div class=class_list!["thaw-accordion-item", class]>
             <div class="thaw-accordion-header">
                 <button
                     class="thaw-accordion-header__button"
diff --git a/thaw/src/accordion/mod.rs b/thaw/src/accordion/mod.rs
index 4839dae..2ebff50 100644
--- a/thaw/src/accordion/mod.rs
+++ b/thaw/src/accordion/mod.rs
@@ -4,10 +4,11 @@ pub use accordion_item::*;
 
 use leptos::{context::Provider, prelude::*};
 use std::collections::HashSet;
-use thaw_utils::Model;
+use thaw_utils::{class_list, Model};
 
 #[component]
 pub fn Accordion(
+    #[prop(optional, into)] class: MaybeProp<String>,
     /// Controls the state of the panel.
     #[prop(optional, into)]
     open_items: Model<HashSet<String>>,
@@ -25,7 +26,7 @@ pub fn Accordion(
             collapsible,
             multiple
         }>
-            <div class="thaw-accordion">
+            <div class=class_list!["thaw-accordion", class]>
                 {children()}
             </div>
         </Provider>
diff --git a/thaw/src/anchor/anchor_link.rs b/thaw/src/anchor/anchor_link.rs
index 58aee8b..fa6b50d 100644
--- a/thaw/src/anchor/anchor_link.rs
+++ b/thaw/src/anchor/anchor_link.rs
@@ -1,16 +1,16 @@
 use super::AnchorInjection;
 use leptos::{html, prelude::*};
 use thaw_components::OptionComp;
-use thaw_utils::{class_list, OptionalProp, StoredMaybeSignal};
+use thaw_utils::{class_list, StoredMaybeSignal};
 
 #[component]
 pub fn AnchorLink(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(into)] title: MaybeSignal<String>,
     #[prop(into)] href: String,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
-    let anchor = AnchorInjection::use_();
+    let anchor = AnchorInjection::expect_context();
 
     let title: StoredMaybeSignal<_> = title.into();
     let title_ref = NodeRef::<html::A>::new();
@@ -61,9 +61,7 @@ pub fn AnchorLink(
 
     view! {
         <div class=class_list![
-            "thaw-anchor-link", ("thaw-anchor-link--active", move || is_active.get()), class.map(| c
-            | move || c.get())
-        ]>
+            "thaw-anchor-link", ("thaw-anchor-link--active", move || is_active.get()), class]>
             <a
                 href=href
                 class="thaw-anchor-link__title"
diff --git a/thaw/src/anchor/mod.rs b/thaw/src/anchor/mod.rs
index edb3314..b2578dc 100644
--- a/thaw/src/anchor/mod.rs
+++ b/thaw/src/anchor/mod.rs
@@ -4,12 +4,12 @@ pub use anchor_link::AnchorLink;
 
 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 thaw_utils::{add_event_listener_with_bool, class_list, mount_style, throttle};
 use web_sys::{DomRect, Element};
 
 #[component]
 pub fn Anchor(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(into, optional)] offset_target: Option<OffsetTarget>,
     children: Children,
 ) -> impl IntoView {
@@ -87,7 +87,7 @@ pub fn Anchor(
     });
     view! {
         <div
-            class=class_list!["thaw-anchor", class.map(| c | move || c.get())]
+            class=class_list!["thaw-anchor", class]
             node_ref=anchor_ref
         >
             <div class="thaw-anchor-rail">
@@ -122,7 +122,7 @@ pub(crate) struct AnchorInjection {
 impl Copy for AnchorInjection {}
 
 impl AnchorInjection {
-    pub fn use_() -> Self {
+    pub fn expect_context() -> Self {
         expect_context()
     }
 
diff --git a/thaw/src/auto_complete/auto_complete_option.rs b/thaw/src/auto_complete/auto_complete_option.rs
index 10bf4c3..454bd3a 100644
--- a/thaw/src/auto_complete/auto_complete_option.rs
+++ b/thaw/src/auto_complete/auto_complete_option.rs
@@ -1,9 +1,14 @@
 use super::AutoCompleteInjection;
 use crate::combobox::listbox::ListboxInjection;
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn AutoCompleteOption(value: String, children: Children) -> impl IntoView {
+pub fn AutoCompleteOption(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    value: String,
+    children: Children,
+) -> impl IntoView {
     let auto_complete = AutoCompleteInjection::expect_context();
     let listbox = ListboxInjection::expect_context();
     let is_selected = Memo::new({
@@ -23,7 +28,7 @@ pub fn AutoCompleteOption(value: String, children: Children) -> impl IntoView {
 
     view! {
         <div
-            class="thaw-auto-complete-option"
+            class=class_list!["thaw-auto-complete-option", class]
             role="option"
             id=id
             aria-selected=move || if is_selected.get() { "true" } else { "false" }
diff --git a/thaw/src/auto_complete/mod.rs b/thaw/src/auto_complete/mod.rs
index 0cac064..77b3429 100644
--- a/thaw/src/auto_complete/mod.rs
+++ b/thaw/src/auto_complete/mod.rs
@@ -30,7 +30,7 @@ pub fn AutoComplete(
     #[prop(optional, into)] blur_after_select: MaybeSignal<bool>,
     #[prop(optional, into)] on_select: Option<BoxOneCallback<String>>,
     #[prop(optional, into)] disabled: MaybeSignal<bool>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional)] auto_complete_prefix: Option<AutoCompletePrefix>,
     #[prop(optional)] auto_complete_suffix: Option<AutoCompleteSuffix>,
     #[prop(optional)] comp_ref: ComponentRef<AutoCompleteRef>,
@@ -98,7 +98,7 @@ pub fn AutoComplete(
     view! {
         <Binder target_ref=auto_complete_ref>
             <div
-                class=class_list!["thaw-auto-complete", class.map(| c | move || c.get())]
+                class=class_list!["thaw-auto-complete", class]
                 node_ref=auto_complete_ref
                 on:keydown=on_keydown
             >
diff --git a/thaw/src/avatar/mod.rs b/thaw/src/avatar/mod.rs
index 7bafd46..bff5348 100644
--- a/thaw/src/avatar/mod.rs
+++ b/thaw/src/avatar/mod.rs
@@ -1,6 +1,6 @@
 use leptos::prelude::*;
 use thaw_components::OptionComp;
-use thaw_utils::{class_list, mount_style, OptionalProp, StoredMaybeSignal};
+use thaw_utils::{class_list, mount_style, StoredMaybeSignal};
 
 #[component]
 pub fn Avatar(
@@ -19,7 +19,7 @@ pub fn Avatar(
     /// Size of the avatar in pixels.
     #[prop(optional, into)]
     size: Option<MaybeSignal<u8>>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
 ) -> impl IntoView {
     mount_style("avatar", include_str!("./avatar.css"));
 
@@ -48,7 +48,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())]
+            class=class_list!["thaw-avatar", move || format!("thaw-avatar--{}", shape.get().as_str()), class]
             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 f7c5a69..98eefd3 100644
--- a/thaw/src/back_top/mod.rs
+++ b/thaw/src/back_top/mod.rs
@@ -3,19 +3,19 @@ use leptos::{either::Either, ev, html, prelude::*};
 use thaw_components::{CSSTransition, Teleport};
 use thaw_utils::{
     add_event_listener, class_list, get_scroll_parent, mount_style, BoxCallback,
-    EventListenerHandle, OptionalProp,
+    EventListenerHandle,
 };
 
 #[component]
 pub fn BackTop(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(default=40.into(), into)] right: MaybeSignal<i32>,
     #[prop(default=40.into(), into)] bottom: MaybeSignal<i32>,
     #[prop(default=180.into(), into)] visibility_height: MaybeSignal<i32>,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     mount_style("back-top", include_str!("./back-top.css"));
-    let config_provider = ConfigInjection::use_();
+    let config_provider = ConfigInjection::expect_context();
     let placeholder_ref = NodeRef::<html::Div>::new();
     let back_top_ref = NodeRef::<html::Div>::new();
     let is_show_back_top = RwSignal::new(false);
@@ -85,7 +85,7 @@ pub fn BackTop(
                     let:display
                 >
                     <div
-                        class=class_list!["thaw-config-provider thaw-back-top", class.map(| c | move || c.get())]
+                        class=class_list!["thaw-config-provider thaw-back-top", class]
                         data-thaw-id=config_provider.id().clone()
                         node_ref=back_top_ref
                         style=move || {
diff --git a/thaw/src/button/button_group.rs b/thaw/src/button/button_group.rs
index f5e991e..e14b205 100644
--- a/thaw/src/button/button_group.rs
+++ b/thaw/src/button/button_group.rs
@@ -1,16 +1,16 @@
 use leptos::prelude::*;
-use thaw_utils::{class_list, mount_style, OptionalProp};
+use thaw_utils::{class_list, mount_style};
 
 #[component]
 pub fn ButtonGroup(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional)] vertical: bool,
     children: Children,
 ) -> impl IntoView {
     mount_style("button-group", include_str!("./button-group.css"));
     view! {
         <div
-            class=class_list!["thaw-button-group", class.map(| c | move || c.get())]
+            class=class_list!["thaw-button-group", class]
             class=("thaw-button-group--vertical", vertical)
         >
             {children()}
diff --git a/thaw/src/button/mod.rs b/thaw/src/button/mod.rs
index d6ba269..8069415 100644
--- a/thaw/src/button/mod.rs
+++ b/thaw/src/button/mod.rs
@@ -4,7 +4,7 @@ pub use button_group::ButtonGroup;
 
 use crate::icon::Icon;
 use leptos::{either::Either, ev, prelude::*};
-use thaw_utils::{class_list, mount_style, BoxOneCallback, OptionalMaybeSignal, OptionalProp};
+use thaw_utils::{class_list, mount_style, BoxOneCallback, OptionalMaybeSignal};
 
 #[derive(Default, PartialEq, Clone, Copy)]
 pub enum ButtonAppearance {
@@ -64,7 +64,7 @@ impl ButtonSize {
 
 #[component]
 pub fn Button(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] appearance: MaybeSignal<ButtonAppearance>,
     #[prop(optional, into)] shape: MaybeSignal<ButtonShape>,
     #[prop(optional, into)] size: MaybeSignal<ButtonSize>,
@@ -102,7 +102,7 @@ pub fn Button(
                 move || format!("thaw-button--{}", size.get().as_str()),
                 move || format!("thaw-button--{}", appearance.get().as_str()),
                 move || format!("thaw-button--{}", shape.get().as_str()),
-                class.map(| c | move || c.get())
+                class
             ]
 
             disabled=move || disabled.get().then_some("")
diff --git a/thaw/src/calendar/mod.rs b/thaw/src/calendar/mod.rs
index 81e9698..5d6c918 100644
--- a/thaw/src/calendar/mod.rs
+++ b/thaw/src/calendar/mod.rs
@@ -2,11 +2,11 @@ use crate::{Button, ButtonGroup};
 use chrono::{Datelike, Days, Local, Month, Months, NaiveDate};
 use leptos::prelude::*;
 use std::ops::Deref;
-use thaw_utils::{class_list, mount_style, OptionModel, OptionalProp};
+use thaw_utils::{class_list, mount_style, OptionModel};
 
 #[component]
 pub fn Calendar(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] value: OptionModel<NaiveDate>,
 ) -> impl IntoView {
     mount_style("calendar", include_str!("./calendar.css"));
@@ -87,7 +87,7 @@ pub fn Calendar(
 
     view! {
         <div
-            class=class_list!["thaw-calendar", class.map(| c | move || c.get())]
+            class=class_list!["thaw-calendar", class]
         >
             <div class="thaw-calendar__header">
                 <span class="thaw-calendar__header-title">
diff --git a/thaw/src/card/card_footer.rs b/thaw/src/card/card_footer.rs
index 39d0904..a18a96b 100644
--- a/thaw/src/card/card_footer.rs
+++ b/thaw/src/card/card_footer.rs
@@ -1,11 +1,14 @@
 use leptos::prelude::*;
-use thaw_utils::mount_style;
+use thaw_utils::{class_list, mount_style};
 
 #[component]
-pub fn CardFooter(children: Children) -> impl IntoView {
+pub fn CardFooter(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     mount_style("card-footer", include_str!("./card-footer.css"));
     view! {
-        <div class="thaw-card-footer">
+        <div class=class_list!["thaw-card-footer", class]>
             {children()}
         </div>
     }
diff --git a/thaw/src/card/card_header.rs b/thaw/src/card/card_header.rs
index fa6caca..2510763 100644
--- a/thaw/src/card/card_header.rs
+++ b/thaw/src/card/card_header.rs
@@ -1,16 +1,17 @@
 use leptos::prelude::*;
 use thaw_components::OptionComp;
-use thaw_utils::mount_style;
+use thaw_utils::{class_list, mount_style};
 
 #[component]
 pub fn CardHeader(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional)] card_header_description: Option<CardHeaderDescription>,
     #[prop(optional)] card_header_action: Option<CardHeaderAction>,
     children: Children,
 ) -> impl IntoView {
     mount_style("card-header", include_str!("./card-header.css"));
     view! {
-        <div class="thaw-card-header">
+        <div class=class_list!["thaw-card-header", class]>
             <div class="thaw-card-header__header">
                 {children()}
             </div>
diff --git a/thaw/src/card/card_preview.rs b/thaw/src/card/card_preview.rs
index bc3e423..42b916f 100644
--- a/thaw/src/card/card_preview.rs
+++ b/thaw/src/card/card_preview.rs
@@ -1,9 +1,13 @@
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn CardPreview(children: Children) -> impl IntoView {
+pub fn CardPreview(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <div class="thaw-card-preview" style="position: relative">
+        <div class=class_list!["thaw-card-preview", class] style="position: relative">
             {children()}
         </div>
     }
diff --git a/thaw/src/card/mod.rs b/thaw/src/card/mod.rs
index 5fed067..5a5d8fe 100644
--- a/thaw/src/card/mod.rs
+++ b/thaw/src/card/mod.rs
@@ -7,18 +7,15 @@ pub use card_header::*;
 pub use card_preview::*;
 
 use leptos::prelude::*;
-use thaw_utils::{class_list, mount_style, OptionalProp};
+use thaw_utils::{class_list, mount_style};
 
 #[component]
-pub fn Card(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
-    children: Children,
-) -> impl IntoView {
+pub fn Card(#[prop(optional, into)] class: MaybeProp<String>, children: Children) -> impl IntoView {
     mount_style("card", include_str!("./card.css"));
 
     view! {
         <div
-            class=class_list!["thaw-card", class.map(| c | move || c.get())]
+            class=class_list!["thaw-card", class]
             role="group"
         >
             {children()}
diff --git a/thaw/src/checkbox/checkbox_group.rs b/thaw/src/checkbox/checkbox_group.rs
index 573dcca..92f8a1a 100644
--- a/thaw/src/checkbox/checkbox_group.rs
+++ b/thaw/src/checkbox/checkbox_group.rs
@@ -1,15 +1,16 @@
 use leptos::{context::Provider, prelude::*};
 use std::collections::HashSet;
-use thaw_utils::Model;
+use thaw_utils::{class_list, Model};
 
 #[component]
 pub fn CheckboxGroup(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] value: Model<HashSet<String>>,
     children: Children,
 ) -> impl IntoView {
     view! {
         <Provider value=CheckboxGroupInjection(value)>
-            <div class="thaw-checkbox-group" role="group">
+            <div class=class_list!["thaw-checkbox-group", class] role="group">
                 {children()}
             </div>
         </Provider>
@@ -22,7 +23,7 @@ pub(crate) struct CheckboxGroupInjection(pub Model<HashSet<String>>);
 impl Copy for CheckboxGroupInjection {}
 
 impl CheckboxGroupInjection {
-    pub fn use_() -> Option<Self> {
+    pub fn use_context() -> Option<Self> {
         use_context()
     }
 }
diff --git a/thaw/src/checkbox/mod.rs b/thaw/src/checkbox/mod.rs
index 511c69a..c754342 100644
--- a/thaw/src/checkbox/mod.rs
+++ b/thaw/src/checkbox/mod.rs
@@ -4,12 +4,12 @@ pub use checkbox_group::CheckboxGroup;
 
 use checkbox_group::CheckboxGroupInjection;
 use leptos::{html, prelude::*};
-use thaw_utils::{class_list, mount_style, Model, OptionalProp};
+use thaw_utils::{class_list, mount_style, Model};
 
 #[component]
 pub fn Checkbox(
     #[prop(optional, into)] checked: Model<bool>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] value: Option<String>,
     #[prop(optional, into)] label: MaybeProp<String>,
 ) -> impl IntoView {
@@ -17,7 +17,7 @@ pub fn Checkbox(
 
     let id = uuid::Uuid::new_v4().to_string();
     let input_ref = NodeRef::<html::Input>::new();
-    let group = CheckboxGroupInjection::use_();
+    let group = CheckboxGroupInjection::use_context();
     let item_value = StoredValue::new(value);
 
     let group_checked = Memo::new(move |_| {
@@ -58,8 +58,8 @@ pub fn Checkbox(
     view! {
         <span
             class=class_list![
-                "thaw-checkbox", ("thaw-checkbox--checked", checked), class.map(| c |
-                move || c.get())
+                "thaw-checkbox", ("thaw-checkbox--checked", checked),
+                class
             ]
         >
             <input
diff --git a/thaw/src/code/mod.rs b/thaw/src/code/mod.rs
index c892fcd..d540e27 100644
--- a/thaw/src/code/mod.rs
+++ b/thaw/src/code/mod.rs
@@ -1,17 +1,15 @@
 use leptos::prelude::*;
-use thaw_utils::{class_list, mount_style, OptionalProp};
+use thaw_utils::{class_list, mount_style};
 
 #[component]
 pub fn Code(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] text: Option<String>,
     #[prop(optional, into)] inner_html: Option<String>,
 ) -> impl IntoView {
     mount_style("code", include_str!("./code.css"));
     view! {
-        <code class=class_list![
-            "thaw-code", class.map(| c | move || c.get())
-        ]>
+        <code class=class_list!["thaw-code", class]>
 
             {if let Some(inner_html) = inner_html {
                 view! { <pre inner_html=inner_html></pre> }.into_any().into()
diff --git a/thaw/src/color_picker/mod.rs b/thaw/src/color_picker/mod.rs
index 4483f2d..ca138cf 100644
--- a/thaw/src/color_picker/mod.rs
+++ b/thaw/src/color_picker/mod.rs
@@ -15,7 +15,7 @@ pub fn ColorPicker(
     #[prop(optional, into)] class: MaybeProp<String>,
 ) -> impl IntoView {
     mount_style("color-picker", include_str!("./color-picker.css"));
-    let config_provider = ConfigInjection::use_();
+    let config_provider = ConfigInjection::expect_context();
     let hue = RwSignal::new(0f32);
     let sv = RwSignal::new((0f32, 0f32));
     let label = RwSignal::new(String::new());
diff --git a/thaw/src/combobox/combobox.rs b/thaw/src/combobox/combobox.rs
index a567c61..5c6be09 100644
--- a/thaw/src/combobox/combobox.rs
+++ b/thaw/src/combobox/combobox.rs
@@ -3,10 +3,11 @@ use crate::_aria::use_active_descendant;
 use leptos::{context::Provider, ev, html, prelude::*};
 use std::collections::HashMap;
 use thaw_components::{Binder, Follower, FollowerPlacement, FollowerWidth};
-use thaw_utils::{add_event_listener, mount_style, Model, VecModel};
+use thaw_utils::{add_event_listener, class_list, mount_style, Model, VecModel};
 
 #[component]
 pub fn Combobox(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] value: Model<String>,
     #[prop(optional, into)] selected_options: VecModel<String>,
     #[prop(optional)] clearable: bool,
@@ -147,7 +148,7 @@ pub fn Combobox(
     view! {
         <Binder target_ref=trigger_ref>
             <div
-                class="thaw-combobox"
+                class=class_list!["thaw-combobox", class]
                 node_ref=trigger_ref
             >
                 <input
diff --git a/thaw/src/combobox/combobox_option.rs b/thaw/src/combobox/combobox_option.rs
index 9c48905..a5d2333 100644
--- a/thaw/src/combobox/combobox_option.rs
+++ b/thaw/src/combobox/combobox_option.rs
@@ -6,6 +6,7 @@ use thaw_utils::class_list;
 
 #[component]
 pub fn ComboboxOption(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] value: Option<String>,
     #[prop(into)] text: String,
     #[prop(optional)] children: Option<Children>,
@@ -42,7 +43,8 @@ pub fn ComboboxOption(
             id=id
             class=class_list![
                 "thaw-combobox-option",
-                ("thaw-combobox-option--selected", move || is_selected.get())
+                ("thaw-combobox-option--selected", move || is_selected.get()),
+                class
             ]
             on:click=on_click
         >
diff --git a/thaw/src/config_provider/mod.rs b/thaw/src/config_provider/mod.rs
index 5e6dcc4..de0cab5 100644
--- a/thaw/src/config_provider/mod.rs
+++ b/thaw/src/config_provider/mod.rs
@@ -1,9 +1,10 @@
 use crate::Theme;
 use leptos::{context::Provider, prelude::*};
-use thaw_utils::{mount_dynamic_style, mount_style};
+use thaw_utils::{class_list, mount_dynamic_style, mount_style};
 
 #[component]
 pub fn ConfigProvider(
+    #[prop(optional, into)] class: MaybeProp<String>,
     /// Sets the theme used in a scope.
     #[prop(optional, into)]
     theme: Option<RwSignal<Theme>>,
@@ -46,7 +47,7 @@ pub fn ConfigProvider(
     view! {
         <Provider value=config_injection>
             <div
-                class="thaw-config-provider"
+                class=class_list!["thaw-config-provider", class]
                 data-thaw-id=id.get_value()
                 dir=move || dir.get().map(move |dir| dir.as_str())
             >
@@ -68,10 +69,6 @@ impl ConfigInjection {
         &self.id
     }
 
-    pub fn use_() -> ConfigInjection {
-        expect_context()
-    }
-
     pub fn expect_context() -> Self {
         expect_context()
     }
diff --git a/thaw/src/date_picker/mod.rs b/thaw/src/date_picker/mod.rs
index 7af016d..db174d7 100644
--- a/thaw/src/date_picker/mod.rs
+++ b/thaw/src/date_picker/mod.rs
@@ -4,12 +4,12 @@ use chrono::NaiveDate;
 use leptos::{html, prelude::*};
 use panel::{Panel, PanelRef};
 use thaw_components::{Binder, Follower, FollowerPlacement};
-use thaw_utils::{mount_style, now_date, ComponentRef, OptionModel, OptionalProp};
+use thaw_utils::{class_list, mount_style, now_date, ComponentRef, OptionModel};
 
 #[component]
 pub fn DatePicker(
     #[prop(optional, into)] value: OptionModel<NaiveDate>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
 ) -> impl IntoView {
     mount_style("date-picker", include_str!("./date-picker.css"));
     let date_picker_ref = NodeRef::<html::Div>::new();
@@ -67,8 +67,8 @@ pub fn DatePicker(
 
     view! {
         <Binder target_ref=date_picker_ref>
-            <div node_ref=date_picker_ref>
-                <Input class value=show_date_text on_focus=open_panel on_blur=on_input_blur>
+            <div node_ref=date_picker_ref class=class_list!["thaw-date-picker", class]>
+                <Input value=show_date_text on_focus=open_panel on_blur=on_input_blur>
                     <InputSuffix slot>
                         <Icon icon=icondata_ai::AiCalendarOutlined style="font-size: 18px"/>
                     </InputSuffix>
diff --git a/thaw/src/date_picker/panel/mod.rs b/thaw/src/date_picker/panel/mod.rs
index e670cc6..557b848 100644
--- a/thaw/src/date_picker/panel/mod.rs
+++ b/thaw/src/date_picker/panel/mod.rs
@@ -19,7 +19,7 @@ pub fn Panel(
     #[prop(into)] is_show_panel: MaybeSignal<bool>,
     #[prop(optional)] comp_ref: ComponentRef<PanelRef>,
 ) -> impl IntoView {
-    let config_provider = ConfigInjection::use_();
+    let config_provider = ConfigInjection::expect_context();
     let panel_ref = NodeRef::<html::Div>::new();
     #[cfg(any(feature = "csr", feature = "hydrate"))]
     {
diff --git a/thaw/src/dialog/dialog.rs b/thaw/src/dialog/dialog.rs
index d3e4c66..277de5d 100644
--- a/thaw/src/dialog/dialog.rs
+++ b/thaw/src/dialog/dialog.rs
@@ -1,17 +1,18 @@
 use crate::ConfigInjection;
 use leptos::{context::Provider, ev, html, prelude::*};
 use thaw_components::{CSSTransition, FocusTrap, Teleport};
-use thaw_utils::{mount_style, Model};
+use thaw_utils::{class_list, mount_style, Model};
 
 #[component]
 pub fn Dialog(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(into)] open: Model<bool>,
     #[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>,
     #[prop(default = true, into)] close_on_esc: bool,
     children: Children,
 ) -> impl IntoView {
     mount_style("dialog", include_str!("./dialog.css"));
-    let config_provider = ConfigInjection::use_();
+    let config_provider = ConfigInjection::expect_context();
 
     let mask_ref = NodeRef::<html::Div>::new();
     let on_mask_click = move |_| {
@@ -27,7 +28,7 @@ pub fn Dialog(
         <Teleport immediate=open.signal()>
             <FocusTrap disabled=!close_on_esc active=open.signal() on_esc>
                 <div
-                    class="thaw-config-provider thaw-dialog"
+                    class=class_list!["thaw-config-provider thaw-dialog", class]
                     data-thaw-id=config_provider.id().clone()
                 >
                     <CSSTransition
diff --git a/thaw/src/dialog/dialog_actions.rs b/thaw/src/dialog/dialog_actions.rs
index ac1b5e5..5a02319 100644
--- a/thaw/src/dialog/dialog_actions.rs
+++ b/thaw/src/dialog/dialog_actions.rs
@@ -1,9 +1,13 @@
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn DialogActions(children: Children) -> impl IntoView {
+pub fn DialogActions(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <div class="thaw-dialog-actions">
+        <div class=class_list!["thaw-dialog-actions", class]>
             {children()}
         </div>
     }
diff --git a/thaw/src/dialog/dialog_body.rs b/thaw/src/dialog/dialog_body.rs
index ba42a29..18c60ee 100644
--- a/thaw/src/dialog/dialog_body.rs
+++ b/thaw/src/dialog/dialog_body.rs
@@ -1,9 +1,13 @@
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn DialogBody(children: Children) -> impl IntoView {
+pub fn DialogBody(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <div class="thaw-dialog-body">
+        <div class=class_list!["thaw-dialog-body", class]>
             {children()}
         </div>
     }
diff --git a/thaw/src/dialog/dialog_content.rs b/thaw/src/dialog/dialog_content.rs
index ad71d3d..288228e 100644
--- a/thaw/src/dialog/dialog_content.rs
+++ b/thaw/src/dialog/dialog_content.rs
@@ -1,9 +1,13 @@
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn DialogContent(children: Children) -> impl IntoView {
+pub fn DialogContent(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <h2 class="thaw-dialog-content">
+        <h2 class=class_list!["thaw-dialog-content", class]>
             {children()}
         </h2>
     }
diff --git a/thaw/src/dialog/dialog_surface.rs b/thaw/src/dialog/dialog_surface.rs
index f73d03b..8c0e27d 100644
--- a/thaw/src/dialog/dialog_surface.rs
+++ b/thaw/src/dialog/dialog_surface.rs
@@ -1,9 +1,13 @@
 use super::dialog::DialogInjection;
 use leptos::{html, prelude::*};
 use thaw_components::CSSTransition;
+use thaw_utils::class_list;
 
 #[component]
-pub fn DialogSurface(children: Children) -> impl IntoView {
+pub fn DialogSurface(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     let dialog = DialogInjection::expect_use();
     let surface_ref = NodeRef::<html::Div>::new();
 
@@ -16,7 +20,7 @@ pub fn DialogSurface(children: Children) -> impl IntoView {
             let:display
         >
             <div
-                class="thaw-dialog-surface"
+                class=class_list!["thaw-dialog-surface", class]
                 node_ref=surface_ref
                 role="dialog"
                 aria-modal="true"
diff --git a/thaw/src/dialog/dialog_title.rs b/thaw/src/dialog/dialog_title.rs
index ad2b008..c928623 100644
--- a/thaw/src/dialog/dialog_title.rs
+++ b/thaw/src/dialog/dialog_title.rs
@@ -1,9 +1,13 @@
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn DialogTitle(children: Children) -> impl IntoView {
+pub fn DialogTitle(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <h2 class="thaw-dialog-title">
+        <h2 class=class_list!["thaw-dialog-title", class]>
             {children()}
         </h2>
     }
diff --git a/thaw/src/divider/mod.rs b/thaw/src/divider/mod.rs
index 7104479..adde5f7 100644
--- a/thaw/src/divider/mod.rs
+++ b/thaw/src/divider/mod.rs
@@ -1,10 +1,10 @@
 use leptos::prelude::*;
 use thaw_components::OptionComp;
-use thaw_utils::{class_list, mount_style, OptionalProp};
+use thaw_utils::{class_list, mount_style};
 
 #[component]
 pub fn Divider(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] vertical: MaybeSignal<bool>,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
@@ -12,7 +12,7 @@ pub fn Divider(
 
     view! {
         <div
-            class=class_list!["thaw-divider", ("thaw-divider--vertical", move || vertical.get()), class.map(| c | move || c.get())]
+            class=class_list!["thaw-divider", ("thaw-divider--vertical", move || vertical.get()), class]
             aria-orientation=move || if vertical.get() { "vertical" } else { "horizontal" }
             role="separator"
         >
diff --git a/thaw/src/drawer/drawer_body.rs b/thaw/src/drawer/drawer_body.rs
index 4a52520..fda5874 100644
--- a/thaw/src/drawer/drawer_body.rs
+++ b/thaw/src/drawer/drawer_body.rs
@@ -1,11 +1,15 @@
 use crate::Scrollbar;
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn DrawerBody(children: Children) -> impl IntoView {
+pub fn DrawerBody(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
         <Scrollbar>
-            <div class="thaw-drawer-body">
+            <div class=class_list!["thaw-drawer-body", class]>
                 {children()}
             </div>
         </Scrollbar>
diff --git a/thaw/src/drawer/drawer_header.rs b/thaw/src/drawer/drawer_header.rs
index 9b60005..7bb202a 100644
--- a/thaw/src/drawer/drawer_header.rs
+++ b/thaw/src/drawer/drawer_header.rs
@@ -1,9 +1,13 @@
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn DrawerHeader(children: Children) -> impl IntoView {
+pub fn DrawerHeader(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <header class="thaw-drawer-header">
+        <header class=class_list!["thaw-drawer-header", class]>
             {children()}
         </header>
     }
diff --git a/thaw/src/drawer/drawer_header_title.rs b/thaw/src/drawer/drawer_header_title.rs
index 44deefc..b1c90a9 100644
--- a/thaw/src/drawer/drawer_header_title.rs
+++ b/thaw/src/drawer/drawer_header_title.rs
@@ -1,13 +1,15 @@
 use leptos::prelude::*;
 use thaw_components::OptionComp;
+use thaw_utils::class_list;
 
 #[component]
 pub fn DrawerHeaderTitle(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional)] drawer_header_title_action: Option<DrawerHeaderTitleAction>,
     children: Children,
 ) -> impl IntoView {
     view! {
-        <div class="thaw-drawer-header-title">
+        <div class=class_list!["thaw-drawer-header-title", class]>
             <h2 class="thaw-drawer-header-title__heading">
                 {children()}
             </h2>
diff --git a/thaw/src/drawer/inline_drawer.rs b/thaw/src/drawer/inline_drawer.rs
index 86a8d86..dd129a1 100644
--- a/thaw/src/drawer/inline_drawer.rs
+++ b/thaw/src/drawer/inline_drawer.rs
@@ -5,6 +5,7 @@ use thaw_utils::{class_list, mount_style, Model};
 
 #[component]
 pub fn InlineDrawer(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(into)] open: Model<bool>,
     #[prop(optional, into)] position: MaybeSignal<DrawerPosition>,
     #[prop(optional, into)] size: MaybeSignal<DrawerSize>,
@@ -33,7 +34,8 @@ pub fn InlineDrawer(
             <div
                 class=class_list![
                     "thaw-inline-drawer",
-                    move || format!("thaw-inline-drawer--position-{}", position.get().as_str())
+                    move || format!("thaw-inline-drawer--position-{}", position.get().as_str()),
+                    class
                 ]
                 style=move || {
                     let size = move || {format!("--thaw-drawer--size: {}", size.get().as_size_str(position))};
diff --git a/thaw/src/drawer/overlay_drawer.rs b/thaw/src/drawer/overlay_drawer.rs
index a30205e..7fe5eb6 100644
--- a/thaw/src/drawer/overlay_drawer.rs
+++ b/thaw/src/drawer/overlay_drawer.rs
@@ -6,6 +6,7 @@ use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model};
 
 #[component]
 pub fn OverlayDrawer(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(into)] open: Model<bool>,
     #[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>,
     #[prop(optional, into)] close_on_esc: bool,
@@ -16,7 +17,7 @@ pub fn OverlayDrawer(
     mount_style("drawer", include_str!("./drawer.css"));
     mount_style("overlay-drawer", include_str!("./overlay-drawer.css"));
 
-    let config_provider = ConfigInjection::use_();
+    let config_provider = ConfigInjection::expect_context();
     let drawer_ref = NodeRef::<html::Div>::new();
     let open_drawer: RwSignal<bool> = RwSignal::new(open.get_untracked());
     let is_lock = RwSignal::new(open.get_untracked());
@@ -45,7 +46,7 @@ pub fn OverlayDrawer(
     view! {
         <Teleport immediate=open.signal()>
             <FocusTrap disabled=!close_on_esc active=open.signal() on_esc>
-                <div class="thaw-config-provider thaw-overlay-drawer-container" data-thaw-id=config_provider.id().clone()>
+                <div class=class_list!["thaw-config-provider thaw-overlay-drawer-container", class] data-thaw-id=config_provider.id().clone()>
                     <CSSTransition
                         node_ref=mask_ref
                         appear=open.get_untracked()
diff --git a/thaw/src/grid/grid_item.rs b/thaw/src/grid/grid_item.rs
index cf3cb71..c6e95d3 100644
--- a/thaw/src/grid/grid_item.rs
+++ b/thaw/src/grid/grid_item.rs
@@ -1,12 +1,12 @@
 use super::use_grid;
 use leptos::prelude::*;
-use thaw_utils::{class_list, OptionalProp};
+use thaw_utils::class_list;
 
 #[component]
 pub fn GridItem(
     #[prop(default = MaybeSignal::Static(1u16), into)] column: MaybeSignal<u16>,
     #[prop(optional, into)] offset: MaybeSignal<u16>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
     let grid = use_grid();
@@ -37,7 +37,7 @@ pub fn GridItem(
 
     view! {
         <div
-            class=class_list!["thaw-grid-item", class.map(| c | move || c.get())]
+            class=class_list!["thaw-grid-item", class]
             style=move || style.get()
         >
             {children()}
diff --git a/thaw/src/grid/mod.rs b/thaw/src/grid/mod.rs
index b4a2606..2605cc1 100644
--- a/thaw/src/grid/mod.rs
+++ b/thaw/src/grid/mod.rs
@@ -2,14 +2,14 @@ mod grid_item;
 
 pub use grid_item::*;
 use leptos::{context::Provider, prelude::*};
-use thaw_utils::{class_list, OptionalProp};
+use thaw_utils::class_list;
 
 #[component]
 pub fn Grid(
     #[prop(default = MaybeSignal::Static(1u16), into)] cols: MaybeSignal<u16>,
     #[prop(optional, into)] x_gap: MaybeSignal<u16>,
     #[prop(optional, into)] y_gap: MaybeSignal<u16>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
     let style = Memo::new(move |_| {
@@ -25,7 +25,7 @@ pub fn Grid(
     view! {
         <Provider value=GridInjection::new(x_gap)>
             <div
-                class=class_list!["thaw-grid", class.map(| c | move || c.get())]
+                class=class_list!["thaw-grid", class]
                 style=move || style.get()
             >
                 {children()}
diff --git a/thaw/src/input/mod.rs b/thaw/src/input/mod.rs
index 636534f..1421dec 100644
--- a/thaw/src/input/mod.rs
+++ b/thaw/src/input/mod.rs
@@ -43,7 +43,7 @@ pub fn Input(
     #[prop(optional)] input_prefix: Option<InputPrefix>,
     #[prop(optional)] input_suffix: Option<InputSuffix>,
     #[prop(optional)] comp_ref: ComponentRef<InputRef>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
 ) -> impl IntoView {
     mount_style("input", include_str!("./input.css"));
@@ -125,7 +125,7 @@ pub fn Input(
                 ("thaw-input--prefix", prefix_if_),
                 ("thaw-input--suffix", suffix_if_),
                 ("thaw-input--disabled", move || disabled.get()),
-                class.map(| c | move || c.get())
+                class
             ]
 
             on:mousedown=on_mousedown
diff --git a/thaw/src/layout/layout_header.rs b/thaw/src/layout/layout_header.rs
index 1c75ace..7b81fd8 100644
--- a/thaw/src/layout/layout_header.rs
+++ b/thaw/src/layout/layout_header.rs
@@ -1,9 +1,13 @@
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn LayoutHeader(children: Children) -> impl IntoView {
+pub fn LayoutHeader(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <div class="thaw-layout-header">
+        <div class=class_list!["thaw-layout-header", class]>
             {children()}
         </div>
     }
diff --git a/thaw/src/layout/layout_sider.rs b/thaw/src/layout/layout_sider.rs
index 744fc11..3d09614 100644
--- a/thaw/src/layout/layout_sider.rs
+++ b/thaw/src/layout/layout_sider.rs
@@ -1,16 +1,17 @@
 use crate::Scrollbar;
 use leptos::prelude::*;
-use thaw_utils::{mount_style, OptionalProp};
+use thaw_utils::{class_list, mount_style};
 
 #[component]
 pub fn LayoutSider(
-    #[prop(optional, into)] content_class: OptionalProp<MaybeSignal<String>>,
-    #[prop(optional, into)] content_style: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(optional, into)] content_class: MaybeProp<String>,
+    #[prop(optional, into)] content_style: MaybeProp<String>,
     children: Children,
 ) -> impl IntoView {
     mount_style("layout-sider", include_str!("./layout-sider.css"));
     view! {
-        <div class="thaw-layout-sider">
+        <div class=class_list!["thaw-layout-sider", class]>
             <Scrollbar content_class content_style>
                 {children()}
             </Scrollbar>
diff --git a/thaw/src/layout/mod.rs b/thaw/src/layout/mod.rs
index c1a6ce8..cc0ed21 100644
--- a/thaw/src/layout/mod.rs
+++ b/thaw/src/layout/mod.rs
@@ -6,7 +6,7 @@ pub use layout_sider::*;
 
 use crate::Scrollbar;
 use leptos::prelude::*;
-use thaw_utils::{mount_style, OptionalProp};
+use thaw_utils::{class_list, mount_style};
 
 #[derive(Default, PartialEq)]
 pub enum LayoutPosition {
@@ -26,8 +26,9 @@ impl LayoutPosition {
 
 #[component]
 pub fn Layout(
-    #[prop(optional, into)] content_class: OptionalProp<MaybeSignal<String>>,
-    #[prop(optional, into)] content_style: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(optional, into)] content_class: MaybeProp<String>,
+    #[prop(optional, into)] content_style: MaybeProp<String>,
     #[prop(optional)] position: LayoutPosition,
     #[prop(optional, into)] has_sider: MaybeSignal<bool>,
     children: Children,
@@ -42,14 +43,14 @@ pub fn Layout(
         }
     });
     view! {
-        <div class=gen_class(position)>
+        <div class=class_list![gen_class(position), class]>
             <Scrollbar
                 content_class
                 content_style=Signal::derive(move || {
                     format!(
                         "{} {}",
                         sider_style.get().unwrap_or_default(),
-                        content_style.as_ref().map_or(String::new(), |s| s.get()),
+                        content_style.get().unwrap_or_default(),
                     )
                 })
             >
diff --git a/thaw/src/menu/menu_item.rs b/thaw/src/menu/menu_item.rs
index cc54106..9ad0992 100644
--- a/thaw/src/menu/menu_item.rs
+++ b/thaw/src/menu/menu_item.rs
@@ -4,7 +4,7 @@ use crate::{
 };
 use leptos::prelude::*;
 use thaw_components::{Fallback, If, OptionComp, Then};
-use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
+use thaw_utils::{class_list, mount_style, OptionalMaybeSignal};
 
 #[component]
 pub fn MenuItem(
@@ -12,7 +12,7 @@ pub fn MenuItem(
     #[prop(into)] label: MaybeSignal<String>,
     #[prop(into)] key: MaybeSignal<String>,
     #[prop(optional, into)] disabled: MaybeSignal<bool>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
 ) -> impl IntoView {
     mount_style("menu-item", include_str!("./menu-item.css"));
 
@@ -35,7 +35,7 @@ pub fn MenuItem(
         <div
             class=class_list![
                 "thaw-menu-item", ("thaw-menu-item--disabled", move || disabled.get()),
-                class.map(| c | move || c.get())
+                class
             ]
             on:click=on_click
         >
diff --git a/thaw/src/menu/mod.rs b/thaw/src/menu/mod.rs
index 776b4ee..2dbdc12 100644
--- a/thaw/src/menu/mod.rs
+++ b/thaw/src/menu/mod.rs
@@ -35,7 +35,7 @@ pub fn Menu(
     children: Children,
 ) -> impl IntoView {
     mount_style("menu", include_str!("./menu.css"));
-    let config_provider = ConfigInjection::use_();
+    let config_provider = ConfigInjection::expect_context();
 
     let menu_ref = NodeRef::<Div>::new();
     let target_ref = NodeRef::<Div>::new();
diff --git a/thaw/src/message_bar/message_bar.rs b/thaw/src/message_bar/message_bar.rs
index 365d9f8..fccca38 100644
--- a/thaw/src/message_bar/message_bar.rs
+++ b/thaw/src/message_bar/message_bar.rs
@@ -3,6 +3,7 @@ use thaw_utils::{class_list, mount_style, StoredMaybeSignal};
 
 #[component]
 pub fn MessageBar(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] layout: MaybeSignal<MessageBarLayout>,
     #[prop(optional, into)] intent: MaybeSignal<MessageBarIntent>,
     children: Children,
@@ -15,7 +16,8 @@ pub fn MessageBar(
             class=class_list![
                 "thaw-message-bar",
                 move || format!("thaw-message-bar--{}", intent.get().as_str()),
-                move || format!("thaw-message-bar--{}", layout.get().as_str())
+                move || format!("thaw-message-bar--{}", layout.get().as_str()),
+                class
             ]
             role="group"
         >
diff --git a/thaw/src/message_bar/message_bar_body.rs b/thaw/src/message_bar/message_bar_body.rs
index 14f2ac7..bd65f05 100644
--- a/thaw/src/message_bar/message_bar_body.rs
+++ b/thaw/src/message_bar/message_bar_body.rs
@@ -1,9 +1,13 @@
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn MessageBarBody(children: Children) -> impl IntoView {
+pub fn MessageBarBody(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <div class="thaw-message-bar-body">
+        <div class=class_list!["thaw-message-bar-body", class]>
             {children()}
         </div>
     }
diff --git a/thaw/src/message_bar/message_bar_title.rs b/thaw/src/message_bar/message_bar_title.rs
index e222dc4..3044c38 100644
--- a/thaw/src/message_bar/message_bar_title.rs
+++ b/thaw/src/message_bar/message_bar_title.rs
@@ -1,9 +1,13 @@
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn MessageBarTitle(children: Children) -> impl IntoView {
+pub fn MessageBarTitle(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <span class="thaw-message-bar-title">
+        <span class=class_list!["thaw-message-bar-title", class]>
             {children()}
         </span>
     }
diff --git a/thaw/src/nav/nav_drawer.rs b/thaw/src/nav/nav_drawer.rs
index 4e09f6a..a40d5f7 100644
--- a/thaw/src/nav/nav_drawer.rs
+++ b/thaw/src/nav/nav_drawer.rs
@@ -1,10 +1,11 @@
 use crate::Scrollbar;
 use leptos::{context::Provider, prelude::*};
 use thaw_components::OptionComp;
-use thaw_utils::{mount_style, Model};
+use thaw_utils::{class_list, mount_style, Model};
 
 #[component]
 pub fn NavDrawer(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] selected_value: Model<String>,
     children: Children,
     #[prop(optional)] nav_drawer_header: Option<NavDrawerHeader>,
@@ -14,7 +15,7 @@ pub fn NavDrawer(
 
     view! {
         <Provider value=NavDrawerInjection(selected_value)>
-            <div class="thaw-nav-drawer">
+            <div class=class_list!["thaw-nav-drawer", class]>
                 <OptionComp value=nav_drawer_header let:header>
                     <header class="thaw-nav-drawer__header">{(header.children)()}</header>
                 </OptionComp>
diff --git a/thaw/src/nav/nav_item.rs b/thaw/src/nav/nav_item.rs
index 92327d0..88b1932 100644
--- a/thaw/src/nav/nav_item.rs
+++ b/thaw/src/nav/nav_item.rs
@@ -3,7 +3,11 @@ use leptos::prelude::*;
 use thaw_utils::{class_list, StoredMaybeSignal};
 
 #[component]
-pub fn NavItem(#[prop(into)] value: MaybeSignal<String>, children: Children) -> impl IntoView {
+pub fn NavItem(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(into)] value: MaybeSignal<String>,
+    children: Children,
+) -> impl IntoView {
     let nav_drawer = use_nav_drawer();
     let value: StoredMaybeSignal<_> = value.into();
     let on_click = move |_| {
@@ -13,7 +17,7 @@ pub fn NavItem(#[prop(into)] value: MaybeSignal<String>, children: Children) ->
         }
     };
     view! {
-        <a class=class_list!["thaw-nav-item", ("thaw-nav-item--selected", move || nav_drawer.0.get() == value.get())]
+        <a class=class_list!["thaw-nav-item", ("thaw-nav-item--selected", move || nav_drawer.0.get() == value.get()), class]
             role="nav"
             type="navigation"
             on:click=on_click
diff --git a/thaw/src/popover/mod.rs b/thaw/src/popover/mod.rs
index 9573a41..7315678 100644
--- a/thaw/src/popover/mod.rs
+++ b/thaw/src/popover/mod.rs
@@ -21,7 +21,7 @@ pub fn Popover(
     children: Children,
 ) -> impl IntoView {
     mount_style("popover", include_str!("./popover.css"));
-    let config_provider = ConfigInjection::use_();
+    let config_provider = ConfigInjection::expect_context();
 
     let popover_ref = NodeRef::<html::Div>::new();
     let target_ref = NodeRef::<html::Div>::new();
diff --git a/thaw/src/progress_bar/progress_bar.rs b/thaw/src/progress_bar/progress_bar.rs
index 5e7b94b..ec9327b 100644
--- a/thaw/src/progress_bar/progress_bar.rs
+++ b/thaw/src/progress_bar/progress_bar.rs
@@ -3,6 +3,7 @@ use thaw_utils::{class_list, mount_style};
 
 #[component]
 pub fn ProgressBar(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(into, optional)] value: MaybeSignal<f64>,
     #[prop(default = 1.0.into(), optional)] max: MaybeSignal<f64>,
     #[prop(into, optional)] color: MaybeSignal<ProgressBarColor>,
@@ -19,7 +20,8 @@ pub fn ProgressBar(
         <div
             class=class_list![
                 "thaw-progress-bar",
-                move || format!("thaw-progress-bar--{}", color.get().as_str())
+                move || format!("thaw-progress-bar--{}", color.get().as_str()),
+                class
             ]
             role="progressbar"
             aria_valuemax=move || max.get()
diff --git a/thaw/src/progress_bar/progress_circle.rs b/thaw/src/progress_bar/progress_circle.rs
index d78b55e..20731a8 100644
--- a/thaw/src/progress_bar/progress_circle.rs
+++ b/thaw/src/progress_bar/progress_circle.rs
@@ -1,9 +1,9 @@
 use leptos::prelude::*;
-use thaw_utils::{class_list, mount_style, OptionalProp};
+use thaw_utils::{class_list, mount_style};
 
 #[component]
 pub fn ProgressCircle(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(into, optional)] value: MaybeSignal<f64>,
     #[prop(into, optional)] color: MaybeSignal<ProgressCircleColor>,
     #[prop(into, default = "120px".into())] size: MaybeSignal<String>,
@@ -40,7 +40,7 @@ pub fn ProgressCircle(
 
     view! {
         <div
-            class=class_list!["thaw-progress-circle", class.map(| c | move || c.get())]
+            class=class_list!["thaw-progress-circle", class]
             role="progressbar"
             aria-valuemax="100"
             aria-valuemin="0"
diff --git a/thaw/src/radio/mod.rs b/thaw/src/radio/mod.rs
index 5fe3de1..5377887 100644
--- a/thaw/src/radio/mod.rs
+++ b/thaw/src/radio/mod.rs
@@ -4,11 +4,11 @@ pub use radio_group::RadioGroup;
 
 use leptos::prelude::*;
 use radio_group::RadioGroupInjection;
-use thaw_utils::{class_list, mount_style, OptionalProp};
+use thaw_utils::{class_list, mount_style};
 
 #[component]
 pub fn Radio(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] value: String,
     #[prop(optional, into)] label: MaybeProp<String>,
 ) -> impl IntoView {
@@ -31,11 +31,7 @@ pub fn Radio(
     };
 
     view! {
-        <span
-            class=class_list![
-                "thaw-radio", class.map(| c | move || c.get())
-            ]
-        >
+        <span class=class_list!["thaw-radio", class]>
             <input
                 class="thaw-radio__input"
                 type="radio"
diff --git a/thaw/src/radio/radio_group.rs b/thaw/src/radio/radio_group.rs
index 2c46941..82de9a6 100644
--- a/thaw/src/radio/radio_group.rs
+++ b/thaw/src/radio/radio_group.rs
@@ -1,8 +1,9 @@
 use leptos::{context::Provider, prelude::*};
-use thaw_utils::OptionModel;
+use thaw_utils::{class_list, OptionModel};
 
 #[component]
 pub fn RadioGroup(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] value: OptionModel<String>,
     /// The name of this radio group.
     #[prop(optional, into)]
@@ -13,7 +14,7 @@ pub fn RadioGroup(
 
     view! {
         <Provider value=RadioGroupInjection{ value, name }>
-            <div class="thaw-radio-group" role="radiogroup" style="display: flex;align-items: flex-start">
+            <div class=class_list!["thaw-radio-group", class] role="radiogroup" style="display: flex;align-items: flex-start">
                 {children()}
             </div>
         </Provider>
diff --git a/thaw/src/scrollbar/mod.rs b/thaw/src/scrollbar/mod.rs
index e4d97ed..0478fe0 100644
--- a/thaw/src/scrollbar/mod.rs
+++ b/thaw/src/scrollbar/mod.rs
@@ -1,12 +1,12 @@
 use leptos::{ev, html, leptos_dom::helpers::WindowListenerHandle, prelude::*};
-use thaw_utils::{class_list, mount_style, ComponentRef, OptionalProp};
+use thaw_utils::{class_list, mount_style, ComponentRef};
 
 #[component]
 pub fn Scrollbar(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] style: Option<MaybeSignal<String>>,
-    #[prop(optional, into)] content_class: OptionalProp<MaybeSignal<String>>,
-    #[prop(optional, into)] content_style: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] content_class: MaybeProp<String>,
+    #[prop(optional, into)] content_style: MaybeProp<String>,
     #[prop(default = 8)] size: u8,
     #[prop(optional)] comp_ref: Option<ComponentRef<ScrollbarRef>>,
     children: Children,
@@ -285,7 +285,7 @@ pub fn Scrollbar(
 
     view! {
         <div
-            class=class_list!["thaw-scrollbar", class.map(| c | move || c.get())]
+            class=class_list!["thaw-scrollbar", class]
             style=move || {
                 format!("--thaw-scrollbar-size: {}px;{}", size, style.as_ref().map(|s| s.get()).unwrap_or_default())
             }
@@ -297,13 +297,13 @@ pub fn Scrollbar(
             <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())
+                        "thaw-scrollbar__content", content_class
                     ]
 
                     style=move || {
                         format!(
                             "width: fit-content; {}",
-                            content_style.as_ref().map_or(String::new(), |s| s.get()),
+                            content_style.get().unwrap_or_default(),
                         )
                     }
 
diff --git a/thaw/src/skeleton/skeleton.rs b/thaw/src/skeleton/skeleton.rs
index d482145..fe7a914 100644
--- a/thaw/src/skeleton/skeleton.rs
+++ b/thaw/src/skeleton/skeleton.rs
@@ -1,12 +1,16 @@
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn Skeleton(children: Children) -> impl IntoView {
+pub fn Skeleton(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
         <div
             role="progressbar"
             aria-busy="true"
-            class="thaw-skeleton"
+            class=class_list!["thaw-skeleton", class]
         >
             {children()}
         </div>
diff --git a/thaw/src/skeleton/skeleton_item.rs b/thaw/src/skeleton/skeleton_item.rs
index ea36206..5337941 100644
--- a/thaw/src/skeleton/skeleton_item.rs
+++ b/thaw/src/skeleton/skeleton_item.rs
@@ -1,12 +1,12 @@
 use leptos::prelude::*;
-use thaw_utils::mount_style;
+use thaw_utils::{class_list, mount_style};
 
 #[component]
-pub fn SkeletonItem() -> impl IntoView {
+pub fn SkeletonItem(#[prop(optional, into)] class: MaybeProp<String>) -> impl IntoView {
     mount_style("skeleton-item", include_str!("./skeleton-item.css"));
 
     view! {
-        <div class="thaw-skeleton-item">
+        <div class=class_list!["thaw-skeleton-item", class]>
         </div>
     }
 }
diff --git a/thaw/src/slider/mod.rs b/thaw/src/slider/mod.rs
index 77bb528..e697dcc 100644
--- a/thaw/src/slider/mod.rs
+++ b/thaw/src/slider/mod.rs
@@ -4,7 +4,7 @@ pub use slider_label::SliderLabel;
 
 use leptos::{context::Provider, ev, prelude::*};
 use thaw_components::OptionComp;
-use thaw_utils::{class_list, mount_style, Model, OptionalProp};
+use thaw_utils::{class_list, mount_style, Model};
 
 #[component]
 pub fn Slider(
@@ -12,7 +12,7 @@ pub fn Slider(
     #[prop(default = 0f64.into(), into)] min: MaybeSignal<f64>,
     #[prop(default = 100f64.into(), into)] max: MaybeSignal<f64>,
     #[prop(optional, into)] step: MaybeProp<f64>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     mount_style("slider", include_str!("./slider.css"));
@@ -69,7 +69,7 @@ pub fn Slider(
     view! {
         <Provider value=SliderInjection { max, min }>
             <div
-                class=class_list!["thaw-slider", class.map(| c | move || c.get())]
+                class=class_list!["thaw-slider", class]
                 style=css_vars
             >
                 <input
@@ -104,7 +104,7 @@ pub(crate) struct SliderInjection {
 }
 
 impl SliderInjection {
-    pub fn use_() -> Self {
+    pub fn expect_context() -> Self {
         expect_context()
     }
 }
diff --git a/thaw/src/slider/slider_label.rs b/thaw/src/slider/slider_label.rs
index 1e80fce..e5c919a 100644
--- a/thaw/src/slider/slider_label.rs
+++ b/thaw/src/slider/slider_label.rs
@@ -1,13 +1,16 @@
-use leptos::prelude::*;
-use thaw_utils::mount_style;
-
 use crate::SliderInjection;
+use leptos::prelude::*;
+use thaw_utils::{class_list, mount_style};
 
 #[component]
-pub fn SliderLabel(#[prop(into)] value: MaybeSignal<f64>, children: Children) -> impl IntoView {
+pub fn SliderLabel(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(into)] value: MaybeSignal<f64>,
+    children: Children,
+) -> impl IntoView {
     mount_style("slider-label", include_str!("./slider_label.css"));
 
-    let slider = SliderInjection::use_();
+    let slider = SliderInjection::expect_context();
 
     let style = move || {
         let value = (value.get() - slider.min.get()) / (slider.max.get() - slider.min.get());
@@ -16,7 +19,7 @@ pub fn SliderLabel(#[prop(into)] value: MaybeSignal<f64>, children: Children) ->
 
     view! {
         <option
-            class:thaw-slider-label=true
+            class=class_list!["thaw-slider-label", class]
             style=style
             value=move || value.get()
         >
diff --git a/thaw/src/spin_button/mod.rs b/thaw/src/spin_button/mod.rs
index 5a08af3..d27122f 100644
--- a/thaw/src/spin_button/mod.rs
+++ b/thaw/src/spin_button/mod.rs
@@ -2,10 +2,11 @@ use leptos::prelude::*;
 use num_traits::Bounded;
 use std::ops::{Add, Sub};
 use std::str::FromStr;
-use thaw_utils::{mount_style, with, Model, StoredMaybeSignal};
+use thaw_utils::{class_list, mount_style, with, Model, StoredMaybeSignal};
 
 #[component]
 pub fn SpinButton<T>(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] value: Model<T>,
     #[prop(into)] step_page: MaybeSignal<T>,
     #[prop(default = T::min_value().into(), into)] min: MaybeSignal<T>,
@@ -54,8 +55,7 @@ where
 
     view! {
         <span
-            class="thaw-spin-button"
-            class=("thaw-spin-button--disabled", move || disabled.get())
+            class=class_list!["thaw-spin-button", ("thaw-spin-button--disabled", move || disabled.get()), class]
         >
             <input
                 autocomplete="off"
diff --git a/thaw/src/switch/mod.rs b/thaw/src/switch/mod.rs
index a09b817..5b57c90 100644
--- a/thaw/src/switch/mod.rs
+++ b/thaw/src/switch/mod.rs
@@ -1,10 +1,10 @@
 use leptos::{html, prelude::*};
-use thaw_utils::{class_list, mount_style, Model, OptionalProp};
+use thaw_utils::{class_list, mount_style, Model};
 
 #[component]
 pub fn Switch(
     #[prop(optional, into)] checked: Model<bool>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] label: MaybeProp<String>,
 ) -> impl IntoView {
     mount_style("switch", include_str!("./switch.css"));
@@ -17,12 +17,7 @@ pub fn Switch(
     };
 
     view! {
-        <div
-            class=class_list![
-                "thaw-switch", class.map(| c | move ||
-                c.get())
-            ]
-        >
+        <div class=class_list!["thaw-switch", class]>
             <input
                 class="thaw-switch__input"
                 role="switch"
diff --git a/thaw/src/tab_list/mod.rs b/thaw/src/tab_list/mod.rs
index c848916..3ed89de 100644
--- a/thaw/src/tab_list/mod.rs
+++ b/thaw/src/tab_list/mod.rs
@@ -44,7 +44,7 @@ pub(crate) struct TabListInjection {
 impl Copy for TabListInjection {}
 
 impl TabListInjection {
-    pub fn use_() -> Self {
+    pub fn expect_context() -> Self {
         expect_context()
     }
 
diff --git a/thaw/src/tab_list/tab.rs b/thaw/src/tab_list/tab.rs
index 6d1f672..206f61d 100644
--- a/thaw/src/tab_list/tab.rs
+++ b/thaw/src/tab_list/tab.rs
@@ -12,7 +12,7 @@ pub fn Tab(
     mount_style("tab", include_str!("./tab.css"));
 
     let tab_ref = NodeRef::<html::Button>::new();
-    let tab_list = TabListInjection::use_();
+    let tab_list = TabListInjection::expect_context();
     let value = StoredValue::new(value);
     tab_list.register(TabRegisterData {
         value: value.get_value(),
diff --git a/thaw/src/table/mod.rs b/thaw/src/table/mod.rs
index 8779f78..92a34ba 100644
--- a/thaw/src/table/mod.rs
+++ b/thaw/src/table/mod.rs
@@ -16,18 +16,24 @@ pub fn Table(
 }
 
 #[component]
-pub fn TableHeader(children: Children) -> impl IntoView {
+pub fn TableHeader(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <thead class="thaw-table-header">
+        <thead class=class_list!["thaw-table-header", class]>
             {children()}
         </thead>
     }
 }
 
 #[component]
-pub fn TableHeaderCell(#[prop(optional)] children: Option<Children>) -> impl IntoView {
+pub fn TableHeaderCell(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
     view! {
-        <th class="thaw-table-header-cell">
+        <th class=class_list!["thaw-table-header-cell", class]>
             <button class="thaw-table-header-cell__button" role="presentation">
                 {
                     if let Some(children) = children  {
@@ -42,27 +48,36 @@ pub fn TableHeaderCell(#[prop(optional)] children: Option<Children>) -> impl Int
 }
 
 #[component]
-pub fn TableBody(children: Children) -> impl IntoView {
+pub fn TableBody(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <tbody class="thaw-table-body">
+        <tbody class=class_list!["thaw-table-body", class]>
             {children()}
         </tbody>
     }
 }
 
 #[component]
-pub fn TableRow(children: Children) -> impl IntoView {
+pub fn TableRow(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <tr class="thaw-table-row">
+        <tr class=class_list!["thaw-table-row", class]>
             {children()}
         </tr>
     }
 }
 
 #[component]
-pub fn TableCell(#[prop(optional)] children: Option<Children>) -> impl IntoView {
+pub fn TableCell(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
     view! {
-        <td class="thaw-table-cell">
+        <td class=class_list!["thaw-table-cell", class]>
             {
                 if let Some(children) = children  {
                     Either::Left(children())
@@ -75,9 +90,12 @@ pub fn TableCell(#[prop(optional)] children: Option<Children>) -> impl IntoView
 }
 
 #[component]
-pub fn TableCellLayout(children: Children) -> impl IntoView {
+pub fn TableCellLayout(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <div class="thaw-table-cell-layout">
+        <div class=class_list!["thaw-table-cell-layout", class]>
             {children()}
         </div>
     }
diff --git a/thaw/src/tag/mod.rs b/thaw/src/tag/mod.rs
index 1114645..fd9491d 100644
--- a/thaw/src/tag/mod.rs
+++ b/thaw/src/tag/mod.rs
@@ -1,9 +1,9 @@
 use leptos::{either::Either, ev, prelude::*};
-use thaw_utils::{class_list, mount_style, ArcOneCallback, OptionalProp};
+use thaw_utils::{class_list, mount_style, ArcOneCallback};
 
 #[component]
 pub fn Tag(
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] closable: MaybeSignal<bool>,
     #[prop(optional, into)] on_close: Option<ArcOneCallback<ev::MouseEvent>>,
     children: Children,
@@ -12,7 +12,7 @@ pub fn Tag(
 
     view! {
         <span
-            class=class_list!["thaw-tag", ("thaw-tag--closable", move || closable.get()), class.map(| c | move || c.get())]
+            class=class_list!["thaw-tag", ("thaw-tag--closable", move || closable.get()), class]
 
         >
             <span class="thaw-tag__primary-text">{children()}</span>
diff --git a/thaw/src/time_picker/mod.rs b/thaw/src/time_picker/mod.rs
index 3a64c78..2ce3bff 100644
--- a/thaw/src/time_picker/mod.rs
+++ b/thaw/src/time_picker/mod.rs
@@ -5,12 +5,12 @@ use crate::{
 use chrono::{Local, NaiveTime, Timelike};
 use leptos::{html, prelude::*};
 use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
-use thaw_utils::{mount_style, ComponentRef, OptionModel, OptionalProp};
+use thaw_utils::{class_list, mount_style, ComponentRef, OptionModel};
 
 #[component]
 pub fn TimePicker(
     #[prop(optional, into)] value: OptionModel<NaiveTime>,
-    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] class: MaybeProp<String>,
     // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
 ) -> impl IntoView {
     mount_style("time-picker", include_str!("./time-picker.css"));
@@ -70,8 +70,8 @@ pub fn TimePicker(
 
     view! {
         <Binder target_ref=time_picker_ref>
-            <div node_ref=time_picker_ref>
-                <Input class value=show_time_text on_focus=open_panel on_blur=on_input_blur>
+            <div node_ref=time_picker_ref class=class_list!["thaw-time-picker", class]>
+                <Input 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>
@@ -98,7 +98,7 @@ fn Panel(
     #[prop(into)] is_show_panel: MaybeSignal<bool>,
     comp_ref: ComponentRef<PanelRef>,
 ) -> impl IntoView {
-    let config_provider = ConfigInjection::use_();
+    let config_provider = ConfigInjection::expect_context();
     let now = move |_| {
         close_panel.call(Some(now_time()));
     };
diff --git a/thaw/src/toast/toast.rs b/thaw/src/toast/toast.rs
index 8a1de06..3a2a64f 100644
--- a/thaw/src/toast/toast.rs
+++ b/thaw/src/toast/toast.rs
@@ -1,10 +1,14 @@
 use leptos::prelude::*;
 use std::time::Duration;
+use thaw_utils::class_list;
 
 #[component]
-pub fn Toast(children: Children) -> impl IntoView {
+pub fn Toast(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <div class="thaw-toast">
+        <div class=class_list!["thaw-toast", class]>
             {children()}
         </div>
     }
diff --git a/thaw/src/toast/toast_footer.rs b/thaw/src/toast/toast_footer.rs
index 83e4315..e825b0c 100644
--- a/thaw/src/toast/toast_footer.rs
+++ b/thaw/src/toast/toast_footer.rs
@@ -1,9 +1,13 @@
 use leptos::prelude::*;
+use thaw_utils::class_list;
 
 #[component]
-pub fn ToastFooter(children: Children) -> impl IntoView {
+pub fn ToastFooter(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     view! {
-        <div class="thaw-toast-footer">
+        <div class=class_list!["thaw-toast-footer", class]>
             {children()}
         </div>
     }
diff --git a/thaw/src/upload/mod.rs b/thaw/src/upload/mod.rs
index a7c9734..e25f2f6 100644
--- a/thaw/src/upload/mod.rs
+++ b/thaw/src/upload/mod.rs
@@ -4,10 +4,11 @@ pub use upload_dragger::UploadDragger;
 pub use web_sys::FileList;
 
 use leptos::{ev, html, prelude::*};
-use thaw_utils::{add_event_listener, mount_style, ArcOneCallback};
+use thaw_utils::{add_event_listener, class_list, mount_style, ArcOneCallback};
 
 #[component]
 pub fn Upload(
+    #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] accept: MaybeSignal<String>,
     #[prop(optional, into)] multiple: MaybeSignal<bool>,
     #[prop(optional, into)] custom_request: Option<ArcOneCallback<FileList>>,
@@ -74,8 +75,10 @@ pub fn Upload(
 
     view! {
         <div
-            class="thaw-upload"
-            class=("thaw-upload--drag-over", move || is_trigger_dragover.get())
+            class=class_list!["thaw-upload",
+                ("thaw-upload--drag-over", move || is_trigger_dragover.get()),
+                class
+            ]
         >
             <input
                 class="thaw-upload__input"
diff --git a/thaw/src/upload/upload_dragger.rs b/thaw/src/upload/upload_dragger.rs
index 125f053..6899310 100644
--- a/thaw/src/upload/upload_dragger.rs
+++ b/thaw/src/upload/upload_dragger.rs
@@ -1,12 +1,15 @@
 use leptos::prelude::*;
-use thaw_utils::mount_style;
+use thaw_utils::{class_list, mount_style};
 
 #[component]
-pub fn UploadDragger(children: Children) -> impl IntoView {
+pub fn UploadDragger(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    children: Children,
+) -> impl IntoView {
     mount_style("upload-dragger", include_str!("./upload-dragger.css"));
 
     view! {
-        <div class="thaw-upload-dragger">
+        <div class=class_list!["thaw-upload-dragger", class]>
             {children()}
         </div>
     }