diff --git a/Cargo.lock b/Cargo.lock
index 7d7cff0e..e9054b80 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -893,6 +893,14 @@ dependencies = [
  "linux-raw-sys 0.6.4",
 ]
 
+[[package]]
+name = "drop_down"
+version = "0.1.0"
+dependencies = [
+ "iced",
+ "iced_aw",
+]
+
 [[package]]
 name = "either"
 version = "1.12.0"
@@ -2926,6 +2934,14 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "tab_bar"
+version = "0.1.0"
+dependencies = [
+ "iced",
+ "iced_aw",
+]
+
 [[package]]
 name = "tempfile"
 version = "3.10.1"
@@ -3537,6 +3553,15 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7219d36b6eac893fa81e84ebe06485e7dcbb616177469b142df14f1f4deb1311"
 
+[[package]]
+name = "widget_id"
+version = "0.1.0"
+dependencies = [
+ "iced",
+ "iced_aw",
+ "num-traits",
+]
+
 [[package]]
 name = "winapi"
 version = "0.3.9"
diff --git a/Cargo.toml b/Cargo.toml
index 47cd17d7..33ff7617 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -43,7 +43,7 @@ default = [
     "date_picker",
     "color_picker",
     "grid",
-    #"tab_bar",
+    "tab_bar",
     #"tabs",
     "time_picker",
     "slide_bar",
@@ -52,7 +52,7 @@ default = [
     #"quad",
     #"context_menu",
     "spinner",
-    #"drop_down",
+    "drop_down",
     #"menu",
 ]
 
@@ -83,7 +83,7 @@ members = [
     "examples/date_picker",
     "examples/color_picker",
     "examples/grid",
-    #"examples/tab_bar",
+    "examples/tab_bar",
     #"examples/tabs",
     "examples/time_picker",
     "examples/sliderbar",
@@ -91,8 +91,8 @@ members = [
     "examples/selection_list",
     #"examples/context_menu",
     "examples/spinner",
-    #"examples/WidgetIDReturn",
-    #"examples/drop_down",
+    "examples/WidgetIDReturn",
+    "examples/drop_down",
     #"examples/menu",
 ]
 
diff --git a/examples/WidgetIDReturn/src/main.rs b/examples/WidgetIDReturn/src/main.rs
index dd49d118..6adb98af 100644
--- a/examples/WidgetIDReturn/src/main.rs
+++ b/examples/WidgetIDReturn/src/main.rs
@@ -1,121 +1,66 @@
 use iced::{
-    alignment, font,
-    theme::Theme,
-    widget::{container, text, Column, Container, Row, Text},
-    window, Alignment, Application, Command, Element, Length, Settings, Size,
+    widget::{Column, Container, Row, Text},
+    Alignment, Element, Length,
 };
 
 #[derive(Debug)]
-enum NumberInputDemo {
-    Loading,
-    Loaded(State),
+pub struct NumberInputDemo {
+    value: [NumInput<f32, Message>; 2],
 }
 
-#[derive(Debug)]
-pub struct State {
-    value: [NumInput<f32, Message>; 2],
+impl Default for NumberInputDemo {
+    fn default() -> Self {
+        Self {
+            value: [NumInput::new(32.0), NumInput::new(12.0)],
+        }
+    }
 }
 
 #[derive(Debug, Clone)]
 pub enum Message {
-    Loaded(Result<(), String>),
     GenericF32Input((usize, NumInputMessage<f32>)),
-    FontLoaded(Result<(), font::Error>),
 }
 
 fn main() -> iced::Result {
-    NumberInputDemo::run(Settings {
-        default_text_size: iced::Pixels(12.0),
-        window: window::Settings {
-            size: Size::new(500.0, 400.0),
-            ..Default::default()
-        },
-        ..Settings::default()
-    })
+    iced::program(
+        "NumberInput example",
+        NumberInputDemo::update,
+        NumberInputDemo::view,
+    )
+    .font(iced_aw::BOOTSTRAP_FONT_BYTES)
+    .run()
 }
 
 mod numberinput;
-
 use numberinput::*;
 
-async fn load() -> Result<(), String> {
-    Ok(())
-}
-
-impl Application for NumberInputDemo {
-    type Message = Message;
-    type Theme = Theme;
-    type Executor = iced::executor::Default;
-    type Flags = ();
-
-    fn new(_flags: ()) -> (NumberInputDemo, Command<Message>) {
-        (
-            NumberInputDemo::Loading,
-            Command::batch(vec![
-                font::load(iced_aw::BOOTSTRAP_FONT_BYTES).map(Message::FontLoaded),
-                Command::perform(load(), Message::Loaded),
-            ]),
-        )
+impl NumberInputDemo {
+    fn update(&mut self, message: self::Message) {
+        let Message::GenericF32Input((id, val)) = message;
+        self.value[id].value = val.get_data();
     }
 
-    fn title(&self) -> String {
-        String::from("Number Input Demo")
-    }
-
-    fn update(&mut self, message: self::Message) -> Command<Message> {
-        match self {
-            NumberInputDemo::Loading => {
-                if let Message::Loaded(_) = message {
-                    *self = NumberInputDemo::Loaded(State {
-                        value: [NumInput::new(27.0), NumInput::new(5.0)],
-                    })
-                }
-            }
-            NumberInputDemo::Loaded(State { value }) => {
-                if let Message::GenericF32Input((id, val)) = message {
-                    value[id].value = val.get_data();
-                }
-            }
+    fn view(&self) -> Element<Message> {
+        let mut column1 = Column::new();
+
+        for (id, val) in self.value.iter().enumerate() {
+            let lb_minute = Text::new(format!("Number Input {}:", id));
+            let txt_minute = val.view(id, 1.0, 255.0, 0.5, Message::GenericF32Input, None);
+
+            column1 = column1.push(
+                Row::new()
+                    .spacing(10)
+                    .align_items(Alignment::Center)
+                    .push(lb_minute)
+                    .push(txt_minute),
+            );
         }
 
-        Command::none()
-    }
-
-    fn view(&self) -> Element<Message> {
-        match self {
-            NumberInputDemo::Loading => container(
-                text("Loading...")
-                    .horizontal_alignment(alignment::Horizontal::Center)
-                    .size(50),
-            )
+        Container::new(column1)
             .width(Length::Fill)
             .height(Length::Fill)
-            .center_y()
-            .center_x()
-            .into(),
-            NumberInputDemo::Loaded(State { value }) => {
-                let mut column1 = Column::new();
-
-                for (id, val) in value.iter().enumerate() {
-                    let lb_minute = Text::new(format!("Number Input {}:", id));
-                    let txt_minute = val.view(id, 1.0, 255.0, 0.5, Message::GenericF32Input, None);
-
-                    column1 = column1.push(
-                        Row::new()
-                            .spacing(10)
-                            .align_items(Alignment::Center)
-                            .push(lb_minute)
-                            .push(txt_minute),
-                    );
-                }
-
-                Container::new(column1)
-                    .width(Length::Fill)
-                    .height(Length::Fill)
-                    .center_x()
-                    .center_y()
-                    .into()
-            }
-        }
+            .center_x(Length::Fill)
+            .center_y(Length::Fill)
+            .into()
     }
 }
diff --git a/examples/WidgetIDReturn/src/numberinput.rs b/examples/WidgetIDReturn/src/numberinput.rs
index fdf920a9..6308a681 100644
--- a/examples/WidgetIDReturn/src/numberinput.rs
+++ b/examples/WidgetIDReturn/src/numberinput.rs
@@ -1,5 +1,6 @@
 use iced::{Element, Length};
-use iced_aw::{NumberInput, NumberInputStyles};
+use iced_aw::style::number_input::Style;
+use iced_aw::NumberInput;
 use num_traits::{bounds::Bounded, Num, NumAssignOps};
 use std::fmt::Display;
 use std::marker::PhantomData;
@@ -7,8 +8,8 @@ use std::str::FromStr;
 
 #[derive(Debug, Default)]
 pub struct NumInput<V, M> {
-    phantomdata: PhantomData<M>,
     pub value: V,
+    phantomdata: PhantomData<M>,
 }
 
 #[derive(Debug, Clone, PartialEq, Eq)]
@@ -36,18 +37,18 @@ where
     }
 }
 
-impl<V, M> NumInput<V, M>
+impl<'a, V, M> NumInput<V, M>
 where
     V: Num + NumAssignOps + PartialOrd + Display + FromStr + Copy + Bounded,
-    M: Clone,
+    M: 'a + Clone,
 {
     pub fn new(value: V) -> NumInput<V, M>
     where
         V: 'static,
     {
         NumInput {
-            phantomdata: PhantomData,
             value,
+            phantomdata: PhantomData,
         }
     }
 
@@ -58,19 +59,19 @@ where
         max: V,
         step: V,
         on_change: F,
-        style: Option<NumberInputStyles>,
+        style: Option<Style>,
     ) -> Element<M>
     where
         F: 'static + Fn((usize, NumInputMessage<V>)) -> M + Copy,
         V: 'static,
-        M: 'static,
+        M: 'static + Clone,
     {
         let mut input = NumberInput::new(self.value, min..max, NumInputMessage::Change)
             .step(step)
             .width(Length::Shrink);
 
         if let Some(style) = style {
-            input = input.style(style);
+            input = input.style(move |_theme, _status| style);
         }
 
         Element::new(input).map(move |i| on_change((id, i)))
diff --git a/examples/drop_down/src/main.rs b/examples/drop_down/src/main.rs
index fca3b65e..c2ffea70 100644
--- a/examples/drop_down/src/main.rs
+++ b/examples/drop_down/src/main.rs
@@ -2,13 +2,19 @@ use std::fmt::Display;
 
 use iced::{
     widget::{Button, Column, Row, Text},
-    Element, Length, Sandbox, Settings,
+    Element, Length,
 };
 
 use iced_aw::{drop_down, DropDown};
 
 fn main() -> iced::Result {
-    DropDownExample::run(Settings::default())
+    iced::program(
+        "ContextMenu example",
+        DropDownExample::update,
+        DropDownExample::view,
+    )
+    .font(iced_aw::BOOTSTRAP_FONT_BYTES)
+    .run()
 }
 
 #[derive(Clone, Debug, Default)]
@@ -40,18 +46,8 @@ struct DropDownExample {
     expanded: bool,
 }
 
-impl Sandbox for DropDownExample {
-    type Message = Message;
-
-    fn new() -> Self {
-        Self::default()
-    }
-
-    fn title(&self) -> String {
-        String::from("ContextMenu example")
-    }
-
-    fn update(&mut self, message: Self::Message) {
+impl DropDownExample {
+    fn update(&mut self, message: Message) {
         match message {
             Message::Select(choice) => {
                 self.selected = choice;
@@ -62,7 +58,7 @@ impl Sandbox for DropDownExample {
         }
     }
 
-    fn view(&self) -> Element<'_, Self::Message> {
+    fn view(&self) -> Element<'_, Message> {
         let underlay = Row::new()
             .push(Text::new(format!("Selected: {}", self.selected)))
             .push(Button::new(Text::new("expand")).on_press(Message::Expand));
diff --git a/examples/tab_bar/src/main.rs b/examples/tab_bar/src/main.rs
index 66fc2307..d2d4a3d5 100644
--- a/examples/tab_bar/src/main.rs
+++ b/examples/tab_bar/src/main.rs
@@ -1,15 +1,17 @@
 use iced::{
-    alignment, font,
-    widget::{container, text, Button, Column, Row, Text, TextInput},
-    Alignment, Application, Command, Element, Length, Settings, Theme,
+    widget::{Button, Column, Row, Text, TextInput},
+    Alignment, Element, Length,
 };
 use iced_aw::{TabBar, TabLabel};
 
 fn main() -> iced::Result {
-    TabBarExample::run(Settings {
-        default_text_size: 12.into(),
-        ..Default::default()
-    })
+    iced::program(
+        "Tab Bar example",
+        TabBarExample::update,
+        TabBarExample::view,
+    )
+    .font(iced_aw::BOOTSTRAP_FONT_BYTES)
+    .run()
 }
 
 #[derive(Debug, Clone)]
@@ -19,166 +21,98 @@ enum Message {
     TabLabelInputChanged(String),
     TabContentInputChanged(String),
     NewTab,
-    #[allow(dead_code)]
-    Loaded(Result<(), String>),
-    FontLoaded(Result<(), font::Error>),
 }
 
-#[derive(Debug)]
-enum TabBarExample {
-    Loading,
-    Loaded(State),
-}
-
-#[derive(Debug)]
-struct State {
+#[derive(Debug, Default)]
+struct TabBarExample {
     active_tab: usize,
     new_tab_label: String,
     new_tab_content: String,
     tabs: Vec<(String, String)>,
 }
 
-async fn load() -> Result<(), String> {
-    Ok(())
-}
-
-impl Application for TabBarExample {
-    type Message = Message;
-    type Theme = Theme;
-    type Executor = iced::executor::Default;
-    type Flags = ();
-
-    fn new(_flags: ()) -> (TabBarExample, Command<Message>) {
-        (
-            TabBarExample::Loading,
-            Command::batch(vec![
-                font::load(iced_aw::BOOTSTRAP_FONT_BYTES).map(Message::FontLoaded),
-                Command::perform(load(), Message::Loaded),
-            ]),
-        )
-        /*TabBarExample {
-            active_tab: 0,
-            new_tab_label: String::new(),
-            new_tab_content: String::new(),
-            tabs: Vec::new(),
-        }*/
-    }
-
-    fn title(&self) -> String {
-        String::from("TabBar example")
-    }
-
-    fn update(&mut self, message: Message) -> Command<Message> {
-        match self {
-            TabBarExample::Loading => {
-                if let Message::Loaded(_) = message {
-                    *self = TabBarExample::Loaded(State {
-                        active_tab: 0,
-                        new_tab_label: String::new(),
-                        new_tab_content: String::new(),
-                        tabs: Vec::new(),
-                    })
-                }
+impl TabBarExample {
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::TabSelected(index) => {
+                println!("Tab selected: {}", index);
+                self.active_tab = index
             }
-            TabBarExample::Loaded(state) => match message {
-                Message::TabSelected(index) => {
-                    println!("Tab selected: {}", index);
-                    state.active_tab = index
-                }
-                Message::TabClosed(index) => {
-                    state.tabs.remove(index);
-                    println!("active tab before: {}", state.active_tab);
-                    state.active_tab = if state.tabs.is_empty() {
-                        0
-                    } else {
-                        usize::max(0, usize::min(state.active_tab, state.tabs.len() - 1))
-                    };
-                    println!("active tab after: {}", state.active_tab);
-                }
-                Message::TabLabelInputChanged(value) => state.new_tab_label = value,
-                Message::TabContentInputChanged(value) => state.new_tab_content = value,
-                Message::NewTab => {
-                    println!("New");
-                    if !state.new_tab_label.is_empty() && !state.new_tab_content.is_empty() {
-                        println!("Create");
-                        state.tabs.push((
-                            state.new_tab_label.to_owned(),
-                            state.new_tab_content.to_owned(),
-                        ));
-                        state.new_tab_label.clear();
-                        state.new_tab_content.clear();
-                    }
+            Message::TabClosed(index) => {
+                self.tabs.remove(index);
+                println!("active tab before: {}", self.active_tab);
+                self.active_tab = if self.tabs.is_empty() {
+                    0
+                } else {
+                    usize::max(0, usize::min(self.active_tab, self.tabs.len() - 1))
+                };
+                println!("active tab after: {}", self.active_tab);
+            }
+            Message::TabLabelInputChanged(value) => self.new_tab_label = value,
+            Message::TabContentInputChanged(value) => self.new_tab_content = value,
+            Message::NewTab => {
+                println!("New");
+                if !self.new_tab_label.is_empty() && !self.new_tab_content.is_empty() {
+                    println!("Create");
+                    self.tabs.push((
+                        self.new_tab_label.to_owned(),
+                        self.new_tab_content.to_owned(),
+                    ));
+                    self.new_tab_label.clear();
+                    self.new_tab_content.clear();
                 }
-                _ => {}
-            },
+            }
         }
-
-        Command::none()
     }
 
     fn view(&self) -> Element<Message> {
-        match self {
-            TabBarExample::Loading => container(
-                text("Loading...")
-                    .horizontal_alignment(alignment::Horizontal::Center)
-                    .size(50),
-            )
-            .width(Length::Fill)
-            .height(Length::Fill)
-            .center_y()
-            .center_x()
-            .into(),
-            TabBarExample::Loaded(state) => {
-                Column::new()
+        Column::new()
+            .push(
+                Row::new()
                     .push(
-                        Row::new()
-                            .push(
-                                TextInput::new("Tab label", &state.new_tab_label)
-                                    .on_input(Message::TabLabelInputChanged)
-                                    .size(16)
-                                    .padding(5.0),
-                            )
-                            .push(
-                                TextInput::new("Tab content", &state.new_tab_content)
-                                    .on_input(Message::TabContentInputChanged)
-                                    .size(12)
-                                    .padding(5.0),
-                            )
-                            .push(Button::new(Text::new("New")).on_press(Message::NewTab))
-                            .align_items(Alignment::Center)
-                            .padding(10.0)
-                            .spacing(5.0),
+                        TextInput::new("Tab label", &self.new_tab_label)
+                            .on_input(Message::TabLabelInputChanged)
+                            .size(16)
+                            .padding(5.0),
                     )
                     .push(
-                        state
-                            .tabs
-                            .iter()
-                            .fold(
-                                TabBar::new(Message::TabSelected),
-                                |tab_bar, (tab_label, _)| {
-                                    // manually create a new index for the new tab
-                                    // starting from 0, when there is no tab created yet
-                                    let idx = tab_bar.size();
-                                    tab_bar.push(idx, TabLabel::Text(tab_label.to_owned()))
-                                },
-                            )
-                            .set_active_tab(&state.active_tab)
-                            .on_close(Message::TabClosed)
-                            .tab_width(Length::Shrink)
-                            .spacing(5.0)
-                            .padding(5.0)
-                            .text_size(32.0),
+                        TextInput::new("Tab content", &self.new_tab_content)
+                            .on_input(Message::TabContentInputChanged)
+                            .size(12)
+                            .padding(5.0),
                     )
-                    .push(
-                        if let Some((_, content)) = state.tabs.get(state.active_tab) {
-                            Text::new(content)
-                        } else {
-                            Text::new("Please create a new tab")
-                        }
-                        .size(25),
+                    .push(Button::new(Text::new("New")).on_press(Message::NewTab))
+                    .align_items(Alignment::Center)
+                    .padding(10.0)
+                    .spacing(5.0),
+            )
+            .push(
+                self.tabs
+                    .iter()
+                    .fold(
+                        TabBar::new(Message::TabSelected),
+                        |tab_bar, (tab_label, _)| {
+                            // manually create a new index for the new tab
+                            // starting from 0, when there is no tab created yet
+                            let idx = tab_bar.size();
+                            tab_bar.push(idx, TabLabel::Text(tab_label.to_owned()))
+                        },
                     )
-                    .into()
-            }
-        }
+                    .set_active_tab(&self.active_tab)
+                    .on_close(Message::TabClosed)
+                    .tab_width(Length::Shrink)
+                    .spacing(5.0)
+                    .padding(5.0)
+                    .text_size(32.0),
+            )
+            .push(
+                if let Some((_, content)) = self.tabs.get(self.active_tab) {
+                    Text::new(content)
+                } else {
+                    Text::new("Please create a new tab")
+                }
+                .size(25),
+            )
+            .into()
     }
 }
diff --git a/src/lib.rs b/src/lib.rs
index 28014a2b..b9a01e5b 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -93,7 +93,6 @@ mod platform {
     #[doc(no_inline)]
     #[cfg(feature = "tab_bar")]
     pub use {
-        crate::style::TabBarStyles,
         crate::widgets::tab_bar,
         tab_bar::{TabBar, TabLabel},
     };
diff --git a/src/style.rs b/src/style.rs
index a11da852..90bec0f7 100644
--- a/src/style.rs
+++ b/src/style.rs
@@ -20,8 +20,6 @@ pub mod date_picker;
 
 #[cfg(feature = "tab_bar")]
 pub mod tab_bar;
-#[cfg(feature = "tab_bar")]
-pub use tab_bar::TabBarStyles;
 
 #[cfg(feature = "time_picker")]
 pub mod time_picker;
diff --git a/src/style/tab_bar.rs b/src/style/tab_bar.rs
index 5b8e5716..9c6eb820 100644
--- a/src/style/tab_bar.rs
+++ b/src/style/tab_bar.rs
@@ -6,13 +6,12 @@
 //!
 //! *This API requires the following crate features to be activated: `tab_bar`*
 
-use std::rc::Rc;
-
+use super::{Status, StyleFn};
 use iced::{border::Radius, Background, Color, Theme};
 
 /// The appearance of a [`TabBar`](crate::widgets::tab_bar::TabBar).
 #[derive(Clone, Copy, Debug)]
-pub struct Appearance {
+pub struct Style {
     /// The background of the tab bar.
     pub background: Option<Background>,
 
@@ -44,23 +43,7 @@ pub struct Appearance {
     pub text_color: Color,
 }
 
-/// The appearance of a [`TabBar`](crate::widgets::tab_bar::TabBar).
-pub trait StyleSheet {
-    ///Style for the trait to use.
-    type Style: Default;
-
-    /// The normal appearance of a tab bar and its tab labels.
-    ///
-    /// `is_active` is true if the tab is selected.
-    fn active(&self, style: &Self::Style, is_active: bool) -> Appearance;
-
-    /// The appearance when the tab bar and/or a tab label is hovered.
-    ///
-    /// `is_active` is true if the tab is selected.
-    fn hovered(&self, style: &Self::Style, is_active: bool) -> Appearance;
-}
-
-impl Default for Appearance {
+impl Default for Style {
     fn default() -> Self {
         Self {
             background: None,
@@ -76,154 +59,172 @@ impl Default for Appearance {
         }
     }
 }
+/// The Catalog of a [`TabBar`](crate::widgets::tab_bar::TabBar).
+pub trait Catalog {
+    ///Style for the trait to use.
+    type Class<'a>;
+
+    /// The default class produced by the [`Catalog`].
+    fn default<'a>() -> Self::Class<'a>;
+
+    /// The [`Style`] of a class with the given status.
+    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style;
+}
+
+impl Catalog for Theme {
+    type Class<'a> = StyleFn<'a, Self, Style>;
+
+    fn default<'a>() -> Self::Class<'a> {
+        Box::new(primary)
+    }
+
+    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style {
+        class(self, status)
+    }
+}
+
+/// The primary theme of a [`TabBar`](crate::widgets::tab_bar::TabBar).
+#[must_use]
+pub fn primary(theme: &Theme, status: Status) -> Style {
+    let mut base = Style::default();
+    let palette = theme.extended_palette();
+
+    base.text_color = palette.background.base.text;
+
+    match status {
+        Status::Disabled => {
+            base.tab_label_background = Background::Color(palette.background.strong.color);
+        }
+        Status::Hovered => {
+            base.tab_label_background = Background::Color(palette.primary.strong.color);
+        }
+        _ => {
+            base.tab_label_background = Background::Color(palette.primary.base.color);
+        }
+    }
 
-#[derive(Clone, Default)]
-#[allow(missing_docs, clippy::missing_docs_in_private_items)]
-/// Default Prebuilt ``TabBar`` Styles
-pub enum TabBarStyles {
-    #[default]
-    Default,
-    Dark,
-    Red,
-    Blue,
-    Green,
-    Purple,
-    Custom(Rc<dyn StyleSheet<Style = Theme>>),
+    base
 }
 
-impl TabBarStyles {
-    /// Creates a custom [`TabBarStyles`] style variant.
-    pub fn custom(style_sheet: impl StyleSheet<Style = Theme> + 'static) -> Self {
-        Self::Custom(Rc::new(style_sheet))
+/// The dark theme of a [`TabBar`](crate::widgets::tab_bar::TabBar).
+#[must_use]
+pub fn dark(theme: &Theme, status: Status) -> Style {
+    let mut base = Style::default();
+    let palette = theme.extended_palette();
+
+    base.tab_label_border_color = [0.3, 0.3, 0.3].into();
+    base.icon_color = Color::WHITE;
+    base.text_color = Color::WHITE;
+
+    match status {
+        Status::Disabled => {
+            base.tab_label_background = Background::Color([0.13, 0.13, 0.13].into());
+        }
+        Status::Hovered => {
+            base.tab_label_background = Background::Color(palette.primary.strong.color);
+        }
+        _ => {
+            base.tab_label_background = Background::Color([0.1, 0.1, 0.1].into());
+        }
     }
+
+    base
 }
 
-impl StyleSheet for Theme {
-    type Style = TabBarStyles;
-
-    fn active(&self, style: &Self::Style, is_active: bool) -> Appearance {
-        let mut appearance = Appearance::default();
-        let palette = self.extended_palette();
-
-        match style {
-            TabBarStyles::Default => {
-                appearance.tab_label_background = if is_active {
-                    Background::Color(palette.primary.base.color)
-                } else {
-                    Background::Color(palette.background.strong.color)
-                };
-                appearance.text_color = palette.background.base.text;
-            }
-            TabBarStyles::Dark => {
-                appearance.tab_label_background = if is_active {
-                    Background::Color([0.1, 0.1, 0.1].into())
-                } else {
-                    Background::Color([0.13, 0.13, 0.13].into())
-                };
-                appearance.tab_label_border_color = [0.3, 0.3, 0.3].into();
-                appearance.icon_color = Color::WHITE;
-                appearance.text_color = Color::WHITE;
-            }
-            TabBarStyles::Red => {
-                let text_color = if is_active {
-                    Color::WHITE
-                } else {
-                    Color::BLACK
-                };
-
-                appearance.tab_label_background = if is_active {
-                    Background::Color([1.0, 0.0, 0.0].into())
-                } else {
-                    Background::Color(Color::WHITE)
-                };
-                appearance.tab_label_border_width = 0.0;
-                appearance.tab_label_border_color = Color::TRANSPARENT;
-                appearance.icon_color = text_color;
-                appearance.text_color = text_color;
-            }
-            TabBarStyles::Blue => {
-                appearance.tab_label_background = if is_active {
-                    Background::Color([0.0, 0.0, 1.0].into())
-                } else {
-                    Background::Color([0.5, 0.5, 1.0].into())
-                };
-                appearance.tab_label_border_color = if is_active {
-                    [0.0, 0.0, 1.0].into()
-                } else {
-                    [0.5, 0.5, 1.0].into()
-                };
-                appearance.icon_color = Color::WHITE;
-                appearance.text_color = Color::WHITE;
-            }
-            TabBarStyles::Green => {
-                let color = if is_active {
-                    [0.0, 0.5, 0.0]
-                } else {
-                    [0.7, 0.7, 0.7]
-                }
-                .into();
-
-                appearance.tab_label_border_color = color;
-                appearance.tab_label_background = Color::WHITE.into();
-                appearance.icon_color = color;
-                appearance.text_color = color;
-            }
-            TabBarStyles::Purple => {
-                let text_color = if is_active {
-                    [0.7, 0.0, 1.0].into()
-                } else {
-                    Color::BLACK
-                };
-
-                appearance.tab_label_background = Color::WHITE.into();
-                appearance.tab_label_border_color = Color::TRANSPARENT;
-                appearance.tab_label_border_width = 0.0;
-                appearance.icon_color = text_color;
-                appearance.text_color = text_color;
-            }
-            TabBarStyles::Custom(custom) => return custom.active(self, is_active),
+/// The red theme of a [`TabBar`](crate::widgets::tab_bar::TabBar).
+#[must_use]
+pub fn red(_theme: &Theme, status: Status) -> Style {
+    let mut base = Style {
+        tab_label_background: Background::Color([0.0, 0.0, 1.0].into()),
+        tab_label_border_color: [0.0, 0.0, 1.0].into(),
+        tab_label_border_width: 0.0,
+        icon_color: Color::WHITE,
+        text_color: Color::WHITE,
+        ..Default::default()
+    };
+
+    match status {
+        Status::Disabled => {
+            base.tab_label_background = Background::Color([0.13, 0.13, 0.13].into());
+            base.icon_color = Color::BLACK;
+            base.text_color = Color::BLACK;
+        }
+        Status::Hovered => {
+            base.tab_label_background = Background::Color([1.0, 0.0, 0.0].into());
         }
+        _ => {
+            base.tab_label_background = Background::Color([0.1, 0.1, 0.1].into());
+        }
+    }
 
-        appearance
+    base
+}
+
+/// The blue theme of a [`TabBar`](crate::widgets::tab_bar::TabBar).
+#[must_use]
+pub fn blue(_theme: &Theme, status: Status) -> Style {
+    let mut base = Style {
+        tab_label_background: Background::Color([0.0, 0.0, 1.0].into()),
+        tab_label_border_color: [0.0, 0.0, 1.0].into(),
+        icon_color: Color::WHITE,
+        text_color: Color::WHITE,
+        ..Default::default()
+    };
+
+    if status == Status::Disabled {
+        base.tab_label_background = Background::Color([0.5, 0.5, 1.0].into());
+        base.tab_label_border_color = [0.5, 0.5, 1.0].into();
+    } else {
+        base.tab_label_background = Background::Color([0.0, 0.0, 1.0].into());
+        base.tab_label_border_color = [0.0, 0.0, 1.0].into();
     }
 
-    fn hovered(&self, style: &Self::Style, is_active: bool) -> Appearance {
-        let palette = self.extended_palette();
-        match style {
-            TabBarStyles::Default => Appearance {
-                tab_label_background: Background::Color(palette.primary.strong.color),
-                ..self.active(style, is_active)
-            },
-            TabBarStyles::Dark => Appearance {
-                tab_label_background: Background::Color([0.1, 0.1, 0.1].into()),
-                ..self.active(style, is_active)
-            },
-            TabBarStyles::Red => Appearance {
-                tab_label_background: Background::Color([1.0, 0.0, 0.0].into()),
-                icon_color: Color::WHITE,
-                text_color: Color::WHITE,
-                ..self.active(style, is_active)
-            },
-            TabBarStyles::Blue => Appearance {
-                tab_label_background: Background::Color([0.0, 0.0, 1.0].into()),
-                tab_label_border_color: [0.0, 0.0, 1.0].into(),
-                ..self.active(style, is_active)
-            },
-            TabBarStyles::Green => Appearance {
-                tab_label_border_color: [0.0, 0.4, 0.0].into(),
-                icon_color: [0.0, 0.4, 0.0].into(),
-                text_color: [0.0, 0.4, 0.0].into(),
-                ..self.active(style, is_active)
-            },
-            TabBarStyles::Purple => {
-                let text_color = [0.7, 0.0, 1.0].into();
-                Appearance {
-                    icon_color: text_color,
-                    text_color,
-                    ..self.active(style, is_active)
-                }
-            }
-            TabBarStyles::Custom(custom) => custom.hovered(self, is_active),
+    base
+}
+
+/// The blue theme of a [`TabBar`](crate::widgets::tab_bar::TabBar).
+#[must_use]
+pub fn green(_theme: &Theme, status: Status) -> Style {
+    let mut base = Style {
+        tab_label_background: Color::WHITE.into(),
+        icon_color: [0.0, 0.5, 0.0].into(),
+        text_color: [0.0, 0.5, 0.0].into(),
+        ..Default::default()
+    };
+
+    match status {
+        Status::Disabled => {
+            base.tab_label_background = Background::Color([0.5, 0.5, 1.0].into());
+            base.icon_color = [0.7, 0.7, 0.7].into();
+            base.text_color = [0.7, 0.7, 0.7].into();
+            base.tab_label_border_color = [0.7, 0.7, 0.7].into();
+        }
+        Status::Hovered => {
+            base.tab_label_border_color = [0.0, 0.0, 1.0].into();
+        }
+        _ => {
+            base.tab_label_border_color = [0.0, 0.5, 0.0].into();
         }
     }
+
+    base
+}
+
+/// The purple theme of a [`TabBar`](crate::widgets::tab_bar::TabBar).
+#[must_use]
+pub fn purple(_theme: &Theme, status: Status) -> Style {
+    let mut base = Style {
+        tab_label_background: Color::WHITE.into(),
+        tab_label_border_color: Color::TRANSPARENT,
+        icon_color: [0.7, 0.0, 1.0].into(),
+        text_color: [0.7, 0.0, 1.0].into(),
+        ..Default::default()
+    };
+
+    if status == Status::Disabled {
+        base.icon_color = Color::BLACK;
+        base.text_color = Color::BLACK;
+    }
+
+    base
 }
diff --git a/src/widgets.rs b/src/widgets.rs
index 7d101a65..d5281a03 100644
--- a/src/widgets.rs
+++ b/src/widgets.rs
@@ -60,7 +60,8 @@ pub use grid::GridRow;
 pub mod tab_bar;
 #[cfg(feature = "tab_bar")]
 /// A tab bar to show tabs.
-pub type TabBar<Message, TabId, Theme, Renderer> = tab_bar::TabBar<Message, TabId, Theme, Renderer>;
+pub type TabBar<'a, Message, TabId, Theme, Renderer> =
+    tab_bar::TabBar<'a, Message, TabId, Theme, Renderer>;
 
 #[cfg(feature = "tab_bar")]
 pub use tab_bar::TabLabel;
diff --git a/src/widgets/tab_bar.rs b/src/widgets/tab_bar.rs
index 52b8e3b3..62450e5d 100644
--- a/src/widgets/tab_bar.rs
+++ b/src/widgets/tab_bar.rs
@@ -26,7 +26,10 @@ use iced::{
 
 use std::marker::PhantomData;
 
-pub use crate::style::tab_bar::{Appearance, StyleSheet};
+pub use crate::style::{
+    tab_bar::{self, Catalog, Style},
+    Status, StyleFn,
+};
 pub use tab_label::TabLabel;
 
 /// The default icon size.
@@ -67,10 +70,10 @@ const DEFAULT_SPACING: f32 = 0.0;
 /// .set_active_tab(&TabId::One);
 /// ```
 #[allow(missing_debug_implementations)]
-pub struct TabBar<Message, TabId, Theme = iced::Theme, Renderer = iced::Renderer>
+pub struct TabBar<'a, Message, TabId, Theme = iced::Theme, Renderer = iced::Renderer>
 where
     Renderer: renderer::Renderer + iced::advanced::text::Renderer,
-    Theme: StyleSheet,
+    Theme: Catalog,
     TabId: Eq + Clone,
 {
     /// The index of the currently active tab.
@@ -106,7 +109,7 @@ where
     /// The optional text font of the [`TabBar`].
     text_font: Option<Font>,
     /// The style of the [`TabBar`].
-    style: <Theme as StyleSheet>::Style,
+    class: <Theme as Catalog>::Class<'a>,
     /// Where the icon is placed relative to text
     position: Position,
     #[allow(clippy::missing_docs_in_private_items)]
@@ -127,10 +130,10 @@ pub enum Position {
     Left,
 }
 
-impl<Message, TabId, Theme, Renderer> TabBar<Message, TabId, Theme, Renderer>
+impl<'a, Message, TabId, Theme, Renderer> TabBar<'a, Message, TabId, Theme, Renderer>
 where
     Renderer: renderer::Renderer + iced::advanced::text::Renderer<Font = iced::Font>,
-    Theme: StyleSheet,
+    Theme: Catalog,
     TabId: Eq + Clone,
 {
     /// Creates a new [`TabBar`] with the index of the selected tab and a specified
@@ -175,7 +178,7 @@ where
             spacing: DEFAULT_SPACING,
             font: None,
             text_font: None,
-            style: <Theme as StyleSheet>::Style::default(),
+            class: <Theme as Catalog>::default(),
             position: Position::default(),
             _renderer: PhantomData,
         }
@@ -325,8 +328,18 @@ where
 
     /// Sets the style of the [`TabBar`].
     #[must_use]
-    pub fn style(mut self, style: <Theme as StyleSheet>::Style) -> Self {
-        self.style = style;
+    pub fn style(mut self, style: impl Fn(&Theme, Status) -> Style + 'a) -> Self
+    where
+        <Theme as Catalog>::Class<'a>: From<StyleFn<'a, Theme, Style>>,
+    {
+        self.class = (Box::new(style) as StyleFn<'a, Theme, Style>).into();
+        self
+    }
+
+    /// Sets the class of the input of the [`TabBar`].
+    #[must_use]
+    pub fn class(mut self, class: impl Into<<Theme as Catalog>::Class<'a>>) -> Self {
+        self.class = class.into();
         self
     }
 
@@ -338,11 +351,11 @@ where
     }
 }
 
-impl<Message, TabId, Theme, Renderer> Widget<Message, Theme, Renderer>
-    for TabBar<Message, TabId, Theme, Renderer>
+impl<'a, Message, TabId, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for TabBar<'a, Message, TabId, Theme, Renderer>
 where
     Renderer: renderer::Renderer + iced::advanced::text::Renderer<Font = iced::Font>,
-    Theme: StyleSheet + text::StyleSheet,
+    Theme: Catalog + text::Catalog,
     TabId: Eq + Clone,
 {
     fn size(&self) -> Size<Length> {
@@ -358,7 +371,7 @@ where
         where
             Renderer: iced::advanced::text::Renderer,
             Renderer::Font: From<Font>,
-            Theme: iced::widget::text::StyleSheet,
+            Theme: iced::widget::text::Catalog,
         {
             Text::<Theme, Renderer>::new(icon.to_string())
                 .size(size)
@@ -377,7 +390,7 @@ where
         where
             Renderer: iced::advanced::text::Renderer,
             Renderer::Font: From<Font>,
-            Theme: iced::widget::text::StyleSheet,
+            Theme: iced::widget::text::Catalog,
         {
             Text::<Theme, Renderer>::new(text)
                 .size(size)
@@ -603,9 +616,9 @@ where
         let children = layout.children();
         let is_mouse_over = cursor.position().map_or(false, |pos| bounds.contains(pos));
         let style_sheet = if is_mouse_over {
-            theme.hovered(&self.style, false)
+            tab_bar::Catalog::style(theme, &self.class, Status::Hovered)
         } else {
-            theme.active(&self.style, false)
+            tab_bar::Catalog::style(theme, &self.class, Status::Disabled)
         };
 
         if bounds.intersects(viewport) {
@@ -632,7 +645,7 @@ where
                 layout,
                 self.position,
                 theme,
-                &self.style,
+                &self.class,
                 i == self.get_active_tab_idx(),
                 cursor,
                 (self.font.unwrap_or(BOOTSTRAP_FONT), self.icon_size),
@@ -656,7 +669,7 @@ fn draw_tab<Theme, Renderer>(
     layout: Layout<'_>,
     position: Position,
     theme: &Theme,
-    style: &<Theme as StyleSheet>::Style,
+    class: &<Theme as Catalog>::Class<'_>,
     is_selected: bool,
     cursor: Cursor,
     icon_data: (Font, f32),
@@ -665,7 +678,7 @@ fn draw_tab<Theme, Renderer>(
     viewport: &Rectangle,
 ) where
     Renderer: renderer::Renderer + iced::advanced::text::Renderer<Font = iced::Font>,
-    Theme: StyleSheet + text::StyleSheet,
+    Theme: Catalog + text::Catalog,
 {
     fn icon_bound_rectangle(item: Option<Layout<'_>>) -> Rectangle {
         item.expect("Graphics: Layout should have an icons layout for an IconText")
@@ -679,10 +692,13 @@ fn draw_tab<Theme, Renderer>(
 
     let bounds = layout.bounds();
     let is_mouse_over = cursor.position().map_or(false, |pos| bounds.contains(pos));
+
     let style = if is_mouse_over {
-        theme.hovered(style, is_selected)
+        tab_bar::Catalog::style(theme, class, Status::Hovered)
+    } else if is_selected {
+        tab_bar::Catalog::style(theme, class, Status::Active)
     } else {
-        theme.active(style, is_selected)
+        tab_bar::Catalog::style(theme, class, Status::Disabled)
     };
 
     let mut children = layout.children();
@@ -712,7 +728,7 @@ fn draw_tab<Theme, Renderer>(
 
             renderer.fill_text(
                 iced::advanced::text::Text {
-                    content: &icon.to_string(),
+                    content: icon.to_string(),
                     bounds: Size::new(icon_bounds.width, icon_bounds.height),
                     size: Pixels(icon_data.1),
                     font: icon_data.0,
@@ -732,7 +748,7 @@ fn draw_tab<Theme, Renderer>(
 
             renderer.fill_text(
                 iced::advanced::text::Text {
-                    content: &text[..],
+                    content: text.to_string(),
                     bounds: Size::new(text_bounds.width, text_bounds.height),
                     size: Pixels(text_data.1),
                     font: text_data.0,
@@ -779,7 +795,7 @@ fn draw_tab<Theme, Renderer>(
 
             renderer.fill_text(
                 iced::advanced::text::Text {
-                    content: &icon.to_string(),
+                    content: icon.to_string(),
                     bounds: Size::new(icon_bounds.width, icon_bounds.height),
                     size: Pixels(icon_data.1),
                     font: icon_data.0,
@@ -795,7 +811,7 @@ fn draw_tab<Theme, Renderer>(
 
             renderer.fill_text(
                 iced::advanced::text::Text {
-                    content: &text[..],
+                    content: text.to_string(),
                     bounds: Size::new(text_bounds.width, text_bounds.height),
                     size: Pixels(text_data.1),
                     font: text_data.0,
@@ -817,7 +833,7 @@ fn draw_tab<Theme, Renderer>(
 
         renderer.fill_text(
             iced::advanced::text::Text {
-                content: &icon_to_string(Bootstrap::X),
+                content: icon_to_string(Bootstrap::X),
                 bounds: Size::new(cross_bounds.width, cross_bounds.height),
                 size: Pixels(close_size + if is_mouse_over_cross { 1.0 } else { 0.0 }),
                 font: BOOTSTRAP_FONT,
@@ -850,15 +866,15 @@ fn draw_tab<Theme, Renderer>(
     };
 }
 
-impl<'a, Message, TabId, Theme, Renderer> From<TabBar<Message, TabId, Theme, Renderer>>
+impl<'a, Message, TabId, Theme, Renderer> From<TabBar<'a, Message, TabId, Theme, Renderer>>
     for Element<'a, Message, Theme, Renderer>
 where
     Renderer: 'a + renderer::Renderer + iced::advanced::text::Renderer<Font = iced::Font>,
-    Theme: 'a + StyleSheet + text::StyleSheet,
+    Theme: 'a + Catalog + text::Catalog,
     Message: 'a,
     TabId: 'a + Eq + Clone,
 {
-    fn from(tab_bar: TabBar<Message, TabId, Theme, Renderer>) -> Self {
+    fn from(tab_bar: TabBar<'a, Message, TabId, Theme, Renderer>) -> Self {
         Element::new(tab_bar)
     }
 }