diff --git a/README.md b/README.md
index ec29edd..b851fbe 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ Bug reports, feature requests, and pull requests are welcome!
 
 Please try to match your code style to the existing codebase. If you think a change in that style is warranted, feel free to make a suggestion in a new Issue. 
 
-Much of this codebase uses struct components. **For new contributions please use functional components** unless you have good reason to use struct components. It is the [recommended default from Yew](https://yew.rs/docs/concepts/function-components)[^1], and we should be consistent. 
+**For new contributions please use functional components** unless you have good reason to use struct components. It is the [recommended default from Yew](https://yew.rs/docs/concepts/function-components)[^1], and we should be consistent. 
 [^1]: > function components - the recommended way to write components when starting with Yew and when writing simple presentation logic.
 
 Please be sure to try `cargo test` before submitting a PR.
diff --git a/examples/Cargo.lock b/examples/Cargo.lock
index 4896b08..b67d0e8 100644
--- a/examples/Cargo.lock
+++ b/examples/Cargo.lock
@@ -1147,7 +1147,7 @@ dependencies = [
 
 [[package]]
 name = "yew-bootstrap"
-version = "0.6.3"
+version = "0.7.0"
 dependencies = [
  "anyhow",
  "convert_case",
diff --git a/packages/yew-bootstrap/src/component/accordion.rs b/packages/yew-bootstrap/src/component/accordion.rs
index ddb19a6..fb740c1 100644
--- a/packages/yew-bootstrap/src/component/accordion.rs
+++ b/packages/yew-bootstrap/src/component/accordion.rs
@@ -245,8 +245,8 @@ pub struct AccordionProps {
 ///             {
 ///                 items.iter().map(|item| {
 ///                     html_nested! {
-///                         <AccordionItem title={item.0.clone()}>
-///                             {item.0.clone()}
+///                         <AccordionItem title={item.0}>
+///                             {item.0}
 ///                         </AccordionItem>
 ///                     }
 ///                 }).collect::<Vec<VChild<AccordionItem>>>()
diff --git a/packages/yew-bootstrap/src/component/alert.rs b/packages/yew-bootstrap/src/component/alert.rs
index 9d665b7..5ef1972 100644
--- a/packages/yew-bootstrap/src/component/alert.rs
+++ b/packages/yew-bootstrap/src/component/alert.rs
@@ -2,25 +2,6 @@ use yew::prelude::*;
 
 use crate::util::Color;
 
-/// # Alert component
-/// Used alongside [crate::util::Color] to create Alert components 
-/// 
-/// See [AlertProps] for a listing of properties
-/// 
-/// ## Example
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::Alert;
-/// use yew_bootstrap::util::Color;
-/// fn test() -> Html {
-///     html!{
-///         <Alert style={Color::Primary}>
-///             {"This is a primary alert!"}
-///         </Alert>
-///     }
-/// }
-/// ```
-pub struct Alert {}
 
 /// # Properties of [Alert]
 #[derive(Properties, Clone, PartialEq)]
@@ -42,29 +23,38 @@ pub struct AlertProps {
     pub text: String,
 }
 
-impl Component for Alert {
-    type Message = ();
-    type Properties = AlertProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        classes.push("alert");
-        classes.push(format!("alert-{}", props.style));
-        classes.push(props.class.clone());
-
-        html! {
-            <div
-                class={classes}
-                role="alert"
-            >
-                { &props.text }
-                { for props.children.iter() }
-            </div>
-        }
+/// # Alert component
+/// Used alongside [crate::util::Color] to create Alert components
+///
+/// See [AlertProps] for a listing of properties
+///
+/// ## Example
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::Alert;
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <Alert style={Color::Primary}>
+///             {"This is a primary alert!"}
+///         </Alert>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Alert(props: &AlertProps) -> Html {
+    let mut classes = Classes::new();
+    classes.push("alert");
+    classes.push(format!("alert-{}", props.style));
+    classes.push(props.class.clone());
+
+    html! {
+        <div
+            class={classes}
+            role="alert"
+        >
+            { &props.text }
+            { for props.children.iter() }
+        </div>
     }
 }
diff --git a/packages/yew-bootstrap/src/component/badge.rs b/packages/yew-bootstrap/src/component/badge.rs
index 1979c08..632ad09 100644
--- a/packages/yew-bootstrap/src/component/badge.rs
+++ b/packages/yew-bootstrap/src/component/badge.rs
@@ -2,26 +2,6 @@ use yew::prelude::*;
 
 use crate::util::{Color, ArrangeX, ArrangeY};
 
-/// # Badge component
-/// Used alongside [crate::util::Color] to create Badge components
-///
-/// See [BadgeProps] for a listing of properties
-///
-/// ## Example
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::Badge;
-/// use yew_bootstrap::util::Color;
-/// fn test() -> Html {
-///     html!{
-///         <Badge style={Color::Primary}>
-///             {"This is a primary badge!"}
-///         </Badge>
-///     }
-/// }
-/// ```
-pub struct Badge {}
-
 /// # Properties of [Badge]
 #[derive(Properties, Clone, PartialEq)]
 pub struct BadgeProps {
@@ -50,43 +30,52 @@ pub struct BadgeProps {
     pub text: String,
 }
 
-impl Component for Badge {
-    type Message = ();
-    type Properties = BadgeProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        match &props.position {
-            Some(position) => {
-                classes.push("position-absolute".to_string());
-                classes.push(format!("{}", position.0));
-                classes.push(format!("{}", position.1));
-                classes.push("translate-middle".to_string());
-            }
-            None => {}
-        }
-        classes.push("badge");
-        if props.pill {
-            classes.push("rounded-pill");
-        }
-        classes.push(format!("bg-{}", props.style));
-        if [Color::Warning, Color::Info, Color::Light].contains(&props.style) {
-            classes.push("text-dark");
+/// # Badge component
+/// Used alongside [crate::util::Color] to create Badge components
+///
+/// See [BadgeProps] for a listing of properties
+///
+/// ## Example
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::Badge;
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <Badge style={Color::Primary}>
+///             {"This is a primary badge!"}
+///         </Badge>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Badge(props: &BadgeProps) -> Html {
+    let mut classes = Classes::new();
+    match &props.position {
+        Some(position) => {
+            classes.push("position-absolute".to_string());
+            classes.push(format!("{}", position.0));
+            classes.push(format!("{}", position.1));
+            classes.push("translate-middle".to_string());
         }
-        classes.push(props.class.clone());
+        None => {}
+    }
+    classes.push("badge");
+    if props.pill {
+        classes.push("rounded-pill");
+    }
+    classes.push(format!("bg-{}", props.style));
+    if [Color::Warning, Color::Info, Color::Light].contains(&props.style) {
+        classes.push("text-dark");
+    }
+    classes.push(props.class.clone());
 
-        html! {
-            <span
-                class={classes}
-            >
-                { &props.text }
-                { for props.children.iter() }
-            </span>
-        }
+    html! {
+        <span
+            class={classes}
+        >
+            { &props.text }
+            { for props.children.iter() }
+        </span>
     }
 }
diff --git a/packages/yew-bootstrap/src/component/button.rs b/packages/yew-bootstrap/src/component/button.rs
index 4c83240..4d6f31c 100644
--- a/packages/yew-bootstrap/src/component/button.rs
+++ b/packages/yew-bootstrap/src/component/button.rs
@@ -14,51 +14,6 @@ impl Default for ButtonSize {
     }
 }
 
-/// # Button component
-/// Button with various properties, including support for opening or closing a modal 
-/// dialog [crate::component::Modal].
-/// 
-/// Buttons can be grouped in a [crate::component::ButtonGroup].
-/// 
-/// See [ButtonProps] for a listing of properties.
-/// 
-/// ## Example
-/// Example of a simple button:
-/// 
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::Button;
-/// use yew_bootstrap::util::Color;
-/// fn test() -> Html {
-///     html!{
-///         <Button style={Color::Primary} text={ "Button text" }/>
-///     }
-/// }
-/// ```
-/// 
-/// A button can be linked to a [crate::component::Modal] dialog or 
-/// close this modal.
-/// 
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::Button;
-/// use yew_bootstrap::component::Modal;
-/// use yew_bootstrap::util::Color;
-/// fn test() -> Html {
-///     html ! {
-///         <>
-///             <Modal id="ExampleModal">
-///                <Button modal_dismiss={true}>{ "Close the modal" }</Button>
-///             </Modal>
-///             <Button style={Color::Primary} modal_target={ "ExampleModal" }>
-///                 { "Open Modal" }
-///             </Button>
-///         </>
-///     }
-/// }
-/// ```
-pub struct Button {}
-
 /// # Properties for [Button]
 #[derive(Properties, Clone, PartialEq)]
 pub struct ButtonProps {
@@ -111,66 +66,99 @@ pub struct ButtonProps {
     pub modal_dismiss: bool,
 }
 
-impl Component for Button {
-    type Message = ();
-    type Properties = ButtonProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
+/// # Button component
+/// Button with various properties, including support for opening or closing a modal
+/// dialog [crate::component::Modal].
+///
+/// Buttons can be grouped in a [crate::component::ButtonGroup].
+///
+/// See [ButtonProps] for a listing of properties.
+///
+/// ## Example
+/// Example of a simple button:
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::Button;
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <Button style={Color::Primary} text={ "Button text" }/>
+///     }
+/// }
+/// ```
+///
+/// A button can be linked to a [crate::component::Modal] dialog or
+/// close this modal.
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::Button;
+/// use yew_bootstrap::component::Modal;
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html ! {
+///         <>
+///             <Modal id="ExampleModal">
+///                <Button modal_dismiss={true}>{ "Close the modal" }</Button>
+///             </Modal>
+///             <Button style={Color::Primary} modal_target={ "ExampleModal" }>
+///                 { "Open Modal" }
+///             </Button>
+///         </>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Button(props: &ButtonProps) -> Html {
+    let mut classes = Classes::new();
+    classes.push("btn");
+    if props.outline {
+        classes.push(format!("btn-outline-{}", props.style));
+    } else {
+        classes.push(format!("btn-{}", props.style));
     }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        classes.push("btn");
-        if props.outline {
-            classes.push(format!("btn-outline-{}", props.style));
-        } else {
-            classes.push(format!("btn-{}", props.style));
-        }
-        match props.size {
-            ButtonSize::Large => classes.push("btn-lg"),
-            ButtonSize::Small => classes.push("btn-sm"),
-            _ => (),
-        }
-        if props.block {
-            classes.push("btn-block");
+    match props.size {
+        ButtonSize::Large => classes.push("btn-lg"),
+        ButtonSize::Small => classes.push("btn-sm"),
+        _ => (),
+    }
+    if props.block {
+        classes.push("btn-block");
+    }
+    classes.push(props.class.clone());
+
+    let modal_dismiss = match props.modal_dismiss {
+        true => "modal",
+        false => "",
+    };
+
+    if let Some(target) = &props.modal_target {
+        html! {
+            <button
+                class={classes}
+                disabled={props.disabled}
+                name={props.name.clone()}
+                onclick={props.onclick.clone()}
+                data-bs-toggle="modal"
+                data-bs-target={format!("#{}",target.clone())}
+            >
+                { &props.text }
+                { for props.children.iter() }
+            </button>
         }
-        classes.push(props.class.clone());
-
-        let modal_dismiss = match props.modal_dismiss {
-            true => "modal",
-            false => "",
-        };
-
-        if let Some(target) = &props.modal_target {
-            html! {
-                <button
-                    class={classes}
-                    disabled={props.disabled}
-                    name={props.name.clone()}
-                    onclick={props.onclick.clone()}
-                    data-bs-toggle="modal"
-                    data-bs-target={format!("#{}",target.clone())}
-                >
-                    { &props.text }
-                    { for props.children.iter() }
-                </button>
-            }
-        } else {
-            html! {
-                <button
-                    class={classes}
-                    disabled={props.disabled}
-                    name={props.name.clone()}
-                    onclick={props.onclick.clone()}
-                    data-bs-dismiss={modal_dismiss}
-                >
-                    { &props.text }
-                    { for props.children.iter() }
-                </button>
-            }
+    } else {
+        html! {
+            <button
+                class={classes}
+                disabled={props.disabled}
+                name={props.name.clone()}
+                onclick={props.onclick.clone()}
+                data-bs-dismiss={modal_dismiss}
+            >
+                { &props.text }
+                { for props.children.iter() }
+            </button>
         }
-
     }
 }
diff --git a/packages/yew-bootstrap/src/component/button_group.rs b/packages/yew-bootstrap/src/component/button_group.rs
index a717545..21568d5 100644
--- a/packages/yew-bootstrap/src/component/button_group.rs
+++ b/packages/yew-bootstrap/src/component/button_group.rs
@@ -1,28 +1,5 @@
 use yew::prelude::*;
 
-/// # Button group
-/// [ButtonGroup] is used to group several [crate::component::Button] instances together.
-/// Buttons can be arranged vertically.
-/// 
-/// See [ButtonGroupProps] for a listing of properties.
-/// 
-/// ## Example
-/// Example of a simple button group:
-/// 
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::{Button, ButtonGroup};
-/// use yew_bootstrap::util::Color;
-/// fn test() -> Html {
-///     html!{
-///         <ButtonGroup class={ "class" }>
-///             <Button style={Color::Primary} text={ "First button" }/>
-///             <Button style={Color::Secondary} text={ "Second button" }/>
-///         </ButtonGroup>
-///     }
-/// }
-/// ```
-pub struct ButtonGroup {}
 
 /// Properties for [ButtonGroup]
 #[derive(Properties, Clone, PartialEq)]
@@ -48,32 +25,45 @@ pub struct ButtonGroupProps {
     pub vertical: bool,
 }
 
-impl Component for ButtonGroup {
-    type Message = ();
-    type Properties = ButtonGroupProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
+/// # Button group
+/// [ButtonGroup] is used to group several [crate::component::Button] instances together.
+/// Buttons can be arranged vertically.
+///
+/// See [ButtonGroupProps] for a listing of properties.
+///
+/// ## Example
+/// Example of a simple button group:
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::{Button, ButtonGroup};
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <ButtonGroup class={ "class" }>
+///             <Button style={Color::Primary} text={ "First button" }/>
+///             <Button style={Color::Secondary} text={ "Second button" }/>
+///         </ButtonGroup>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn ButtonGroup(props: &ButtonGroupProps) -> Html {
+    let mut classes = Classes::new();
+    if props.vertical {
+        classes.push("btn-group-vertical");
+    } else {
+        classes.push("btn-group");
     }
+    classes.push(props.class.clone());
 
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        if props.vertical {
-            classes.push("btn-group-vertical");
-        } else {
-            classes.push("btn-group");
-        }
-        classes.push(props.class.clone());
-
-        html! {
-            <div
-                class={classes}
-                role={props.role.clone()}
-                aria-label={props.label.clone()}
-            >
-                { for props.children.iter() }
-            </div>
-        }
+    html! {
+        <div
+            class={classes}
+            role={props.role.clone()}
+            aria-label={props.label.clone()}
+        >
+            { for props.children.iter() }
+        </div>
     }
 }
diff --git a/packages/yew-bootstrap/src/component/column.rs b/packages/yew-bootstrap/src/component/column.rs
index 3aba577..3a2e8c2 100644
--- a/packages/yew-bootstrap/src/component/column.rs
+++ b/packages/yew-bootstrap/src/component/column.rs
@@ -1,26 +1,6 @@
 use log::warn;
 use yew::prelude::*;
 
-/// # Column container
-/// Used with [crate::component::Row] to create grids
-///
-/// See [crate::component::ColumnProps] for a listing of properties
-///
-/// ## Example
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::{Column, Row};
-/// fn test() -> Html {
-///     html!{
-///         <Row>
-///             <Column sm=1 lg=4><p>{ "First column" }</p></Column>
-///             <Column sm=2 lg=8><p>{ "Second column" }</p></Column>
-///         </Row>
-///     }
-/// }
-/// ```
-pub struct Column {}
-
 /// # Properties for [Column]
 #[derive(Properties, Clone, PartialEq)]
 pub struct ColumnProps {
@@ -61,66 +41,75 @@ pub struct ColumnProps {
     pub onclick: Callback<MouseEvent>,
 }
 
-impl Component for Column {
-    type Message = ();
-    type Properties = ColumnProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
+/// # Column container
+/// Used with [crate::component::Row] to create grids
+///
+/// See [crate::component::ColumnProps] for a listing of properties
+///
+/// ## Example
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::{Column, Row};
+/// fn test() -> Html {
+///     html!{
+///         <Row>
+///             <Column sm=1 lg=4><p>{ "First column" }</p></Column>
+///             <Column sm=2 lg=8><p>{ "Second column" }</p></Column>
+///         </Row>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Column(props: &ColumnProps) -> Html {
+    if props.size.unwrap_or(0) > 12 {
+        warn!("Column `size` cannot be greater than 12");
     }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        if props.size.unwrap_or(0) > 12 {
-            warn!("Column `size` cannot be greater than 12");
-        }
-        if props.sm.unwrap_or(0) > 12 {
-            warn!("Column `sm` size cannot be greater than 12");
-        }
-        if props.md.unwrap_or(0) > 12 {
-            warn!("Column `md` size cannot be greater than 12");
-        }
-        if props.lg.unwrap_or(0) > 12 {
-            warn!("Column `lg` size cannot be greater than 12");
-        }
-        if props.xl.unwrap_or(0) > 12 {
-            warn!("Column `xl` size cannot be greater than 12");
-        }
-        if props.xxl.unwrap_or(0) > 12 {
-            warn!("Column `xxl` size cannot be greater than 12");
-        }
-        let mut classes = Classes::new();
-        if let Some(size) = props.size {
-            if size == 0 {
-                classes.push("col");
-            } else {
-                classes.push("col-".to_string() + &size.to_string());
-            }
-        }
-        if let Some(sm) = props.sm {
-            classes.push("col-sm-".to_string() + &sm.to_string());
-        }
-        if let Some(md) = props.md {
-            classes.push("col-md-".to_string() + &md.to_string());
-        }
-        if let Some(lg) = props.lg {
-            classes.push("col-lg-".to_string() + &lg.to_string());
-        }
-        if let Some(xl) = props.xl {
-            classes.push("col-xl-".to_string() + &xl.to_string());
-        }
-        if let Some(xxl) = props.xxl {
-            classes.push("col-xxl-".to_string() + &xxl.to_string());
+    if props.sm.unwrap_or(0) > 12 {
+        warn!("Column `sm` size cannot be greater than 12");
+    }
+    if props.md.unwrap_or(0) > 12 {
+        warn!("Column `md` size cannot be greater than 12");
+    }
+    if props.lg.unwrap_or(0) > 12 {
+        warn!("Column `lg` size cannot be greater than 12");
+    }
+    if props.xl.unwrap_or(0) > 12 {
+        warn!("Column `xl` size cannot be greater than 12");
+    }
+    if props.xxl.unwrap_or(0) > 12 {
+        warn!("Column `xxl` size cannot be greater than 12");
+    }
+    let mut classes = Classes::new();
+    if let Some(size) = props.size {
+        if size == 0 {
+            classes.push("col");
+        } else {
+            classes.push("col-".to_string() + &size.to_string());
         }
-        classes.push(props.class.clone());
+    }
+    if let Some(sm) = props.sm {
+        classes.push("col-sm-".to_string() + &sm.to_string());
+    }
+    if let Some(md) = props.md {
+        classes.push("col-md-".to_string() + &md.to_string());
+    }
+    if let Some(lg) = props.lg {
+        classes.push("col-lg-".to_string() + &lg.to_string());
+    }
+    if let Some(xl) = props.xl {
+        classes.push("col-xl-".to_string() + &xl.to_string());
+    }
+    if let Some(xxl) = props.xxl {
+        classes.push("col-xxl-".to_string() + &xxl.to_string());
+    }
+    classes.push(props.class.clone());
 
-        html! {
-            <div
-                class={classes}
-                onclick={props.onclick.clone()}
-            >
-                { for props.children.iter() }
-            </div>
-        }
+    html! {
+        <div
+            class={classes}
+            onclick={props.onclick.clone()}
+        >
+            { for props.children.iter() }
+        </div>
     }
 }
diff --git a/packages/yew-bootstrap/src/component/container.rs b/packages/yew-bootstrap/src/component/container.rs
index 981d311..345176c 100644
--- a/packages/yew-bootstrap/src/component/container.rs
+++ b/packages/yew-bootstrap/src/component/container.rs
@@ -11,6 +11,7 @@ pub enum ContainerSize {
     ExtraLarge,
     ExtraExtraLarge,
 }
+
 impl ToString for ContainerSize {
     fn to_string(&self) -> String {
         match self {
@@ -24,26 +25,6 @@ impl ToString for ContainerSize {
     }
 }
 
-/// # Container component
-/// Global container for a page.
-/// 
-/// See [ContainerProps] for a listing of properties.
-/// 
-/// ## Example
-/// Example container:
-/// 
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::{Container, ContainerSize};
-/// use yew_bootstrap::util::Color;
-/// fn test() -> Html {
-///     html!{
-///         <Container size={ContainerSize::Large} fluid={ true }/>
-///     }
-/// }
-/// ```
-pub struct Container {}
-
 /// Properties for [Container]
 #[derive(Properties, Clone, PartialEq)]
 pub struct ContainerProps {
@@ -64,36 +45,45 @@ pub struct ContainerProps {
     pub fluid: bool,
 }
 
-impl Component for Container {
-    type Message = ();
-    type Properties = ContainerProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        // ExtraSmall have no size class
-        if props.size != ContainerSize::ExtraSmall {
-            if props.fluid {
-                warn!("Fluid is set to true, but a size is also set. Fluid will be ignored.");
-            }
-            classes.push(format!("container-{}", props.size.to_string()));
-        } else if props.fluid {
-            classes.push("container-fluid");
-        } else {
-            classes.push("container");
+/// # Container component
+/// Global container for a page.
+///
+/// See [ContainerProps] for a listing of properties.
+///
+/// ## Example
+/// Example container:
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::{Container, ContainerSize};
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <Container size={ContainerSize::Large} fluid={ true }/>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Container(props: &ContainerProps) -> Html {
+    let mut classes = Classes::new();
+    // ExtraSmall have no size class
+    if props.size != ContainerSize::ExtraSmall {
+        if props.fluid {
+            warn!("Fluid is set to true, but a size is also set. Fluid will be ignored.");
         }
-        classes.push(props.class.clone());
+        classes.push(format!("container-{}", props.size.to_string()));
+    } else if props.fluid {
+        classes.push("container-fluid");
+    } else {
+        classes.push("container");
+    }
+    classes.push(props.class.clone());
 
-        html! {
-            <div
-                class={classes}
-            >
-                { for props.children.iter() }
-            </div>
-        }
+    html! {
+        <div
+            class={classes}
+        >
+            { for props.children.iter() }
+        </div>
     }
 }
diff --git a/packages/yew-bootstrap/src/component/display.rs b/packages/yew-bootstrap/src/component/display.rs
index 06db12f..09f31ed 100644
--- a/packages/yew-bootstrap/src/component/display.rs
+++ b/packages/yew-bootstrap/src/component/display.rs
@@ -4,25 +4,6 @@ use yew::prelude::*;
 
 use crate::util::Color;
 
-/// # Display heading component
-/// Use Display when you need heading element to stand out
-///
-/// See [DisplayProps] for a listing of properties
-///
-/// ## Example
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::Display;
-/// fn test() -> Html {
-///     html!{
-///         <Display>
-///             {"Display heading text"}
-///         </Display>
-///     }
-/// }
-/// ```
-pub struct Display {}
-
 /// # Properties of [Display]
 #[derive(Properties, Clone, PartialEq)]
 pub struct DisplayProps {
@@ -47,27 +28,35 @@ pub struct DisplayProps {
     pub text: String,
 }
 
-impl Component for Display {
-    type Message = ();
-    type Properties = DisplayProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        classes.push(format!("display-{}", props.size));
-        classes.push(format!("text-{}", props.style));
-        classes.push(props.class.clone());
+/// # Display heading component
+/// Use Display when you need heading element to stand out
+///
+/// See [DisplayProps] for a listing of properties
+///
+/// ## Example
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::Display;
+/// fn test() -> Html {
+///     html!{
+///         <Display>
+///             {"Display heading text"}
+///         </Display>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Display(props: &DisplayProps) -> Html {
+    let mut classes = Classes::new();
+    classes.push(format!("display-{}", props.size));
+    classes.push(format!("text-{}", props.style));
+    classes.push(props.class.clone());
 
-        html! {
-            <h1 class={classes}>
-                { &props.text }
-                { for props.children.iter() }
-            </h1>
-        }
+    html! {
+        <h1 class={classes}>
+            { &props.text }
+            { for props.children.iter() }
+        </h1>
     }
 }
 
diff --git a/packages/yew-bootstrap/src/component/lead.rs b/packages/yew-bootstrap/src/component/lead.rs
index f3ae8d6..7624805 100644
--- a/packages/yew-bootstrap/src/component/lead.rs
+++ b/packages/yew-bootstrap/src/component/lead.rs
@@ -2,25 +2,6 @@ use yew::prelude::*;
 
 use crate::util::Color;
 
-/// # Lead component
-/// Use Lead to make a paragraph stand out.
-///
-/// See [LeadProps] for a listing of properties
-///
-/// ## Example
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::Lead;
-/// fn test() -> Html {
-///     html!{
-///         <Lead>
-///             {"This is a lead paragraph. It stands out from regular paragraphs."}
-///         </Lead>
-///     }
-/// }
-/// ```
-pub struct Lead {}
-
 /// # Properties of [Lead]
 #[derive(Properties, Clone, PartialEq)]
 pub struct LeadProps {
@@ -41,26 +22,34 @@ pub struct LeadProps {
     pub text: String,
 }
 
-impl Component for Lead {
-    type Message = ();
-    type Properties = LeadProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        classes.push("lead");
-        classes.push(format!("text-{}", props.style));
-        classes.push(props.class.clone());
-
-        html! {
-            <p class={classes}>
-                { &props.text }
-                { for props.children.iter() }
-            </p>
-        }
+/// # Lead component
+/// Use Lead to make a paragraph stand out.
+///
+/// See [LeadProps] for a listing of properties
+///
+/// ## Example
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::Lead;
+/// fn test() -> Html {
+///     html!{
+///         <Lead>
+///             {"This is a lead paragraph. It stands out from regular paragraphs."}
+///         </Lead>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Lead(props: &LeadProps) -> Html {
+    let mut classes = Classes::new();
+    classes.push("lead");
+    classes.push(format!("text-{}", props.style));
+    classes.push(props.class.clone());
+
+    html! {
+        <p class={classes}>
+            { &props.text }
+            { for props.children.iter() }
+        </p>
     }
-}
\ No newline at end of file
+}
diff --git a/packages/yew-bootstrap/src/component/line.rs b/packages/yew-bootstrap/src/component/line.rs
index 6ecd309..c10bf75 100644
--- a/packages/yew-bootstrap/src/component/line.rs
+++ b/packages/yew-bootstrap/src/component/line.rs
@@ -1,24 +1,6 @@
 use crate::util::*;
 use yew::prelude::*;
 
-/// # Horizontal or vertical line
-/// 
-/// See [LineProps] for a listing of properties.
-/// 
-/// ## Example
-/// Example line:
-/// 
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::Line;
-/// use yew_bootstrap::util::{Size, Color};
-/// fn test() -> Html {
-///     html!{
-///         <Line width={ Size::Percent(80.0) } height={ Size::Px(1) } style={ Color::Light }/>
-///     }
-/// }
-/// ```
-pub struct Line {}
 
 /// Properties for [Line]
 #[derive(Properties, Clone, PartialEq)]
@@ -44,41 +26,49 @@ pub struct LineProps {
     pub width: Option<Size>,
 }
 
-impl Component for Line {
-    type Message = ();
-    type Properties = LineProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
+/// # Horizontal or vertical line
+///
+/// See [LineProps] for a listing of properties.
+///
+/// ## Example
+/// Example line:
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::Line;
+/// use yew_bootstrap::util::{Size, Color};
+/// fn test() -> Html {
+///     html!{
+///         <Line width={ Size::Percent(80.0) } height={ Size::Px(1) } style={ Color::Light }/>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Line(props: &LineProps) -> Html {
+    let mut classes = Classes::new();
+    if props.vertical {
+        classes.push("vr");
+    }
+    if let Some(style) = props.style.clone() {
+        classes.push(format!("bg-{}", style));
     }
+    classes.push(props.class.clone());
 
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        if props.vertical {
-            classes.push("vr");
-        }
-        if let Some(style) = props.style.clone() {
-            classes.push(format!("bg-{}", style));
-        }
-        classes.push(props.class.clone());
+    let mut css = String::new();
+    if let Some(height) = props.height.clone() {
+        css = format!("height: {}", height);
+    }
+    if let Some(width) = props.width.clone() {
+        css = format!("{}; width: {}", css, width);
+    }
 
-        let mut css = String::new();
-        if let Some(height) = props.height.clone() {
-            css = format!("height: {}", height);
+    if props.vertical {
+        html! {
+            <div class={classes} style={css} />
         }
-        if let Some(width) = props.width.clone() {
-            css = format!("{}; width: {}", css, width);
-        }
-
-        if props.vertical {
-            html! {
-                <div class={classes} style={css} />
-            }
-        } else {
-            html! {
-                <hr class={classes} style={css} />
-            }
+    } else {
+        html! {
+            <hr class={classes} style={css} />
         }
     }
 }
diff --git a/packages/yew-bootstrap/src/component/link.rs b/packages/yew-bootstrap/src/component/link.rs
index d928dd3..2a67ab0 100644
--- a/packages/yew-bootstrap/src/component/link.rs
+++ b/packages/yew-bootstrap/src/component/link.rs
@@ -1,27 +1,6 @@
 use yew::prelude::*;
 use crate::util::Color;
 
-/// # Link component
-/// Link component rendered as `<a/>` component. This link can contain
-/// any element.
-/// 
-/// See [LinkProps] for a listing of properties.
-/// 
-/// ## Example
-/// Example of link:
-/// 
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::Link;
-/// use yew_bootstrap::util::Color;
-/// fn test() -> Html {
-///     html!{
-///         <Link style={Color::Primary} stretched={ true } text={ "Link text" }/>
-///     }
-/// }
-/// ```
-pub struct Link {}
-
 /// Properties for [Link]
 #[derive(Properties, Clone, PartialEq)]
 pub struct LinkProps {
@@ -46,32 +25,42 @@ pub struct LinkProps {
     pub text: String,
 }
 
-impl Component for Link {
-    type Message = ();
-    type Properties = LinkProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
+/// # Link component
+/// Link component rendered as `<a/>` component. This link can contain
+/// any element.
+///
+/// See [LinkProps] for a listing of properties.
+///
+/// ## Example
+/// Example of link:
+///
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::Link;
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <Link style={Color::Primary} stretched={ true } text={ "Link text" }/>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Link(props: &LinkProps) -> Html {
+    let mut classes = Classes::new();
+    if let Some(style) = props.style.clone() {
+        classes.push(format!("link-{}", style));
     }
+    if props.stretched {
+        classes.push("stretched-link");
+    }
+    classes.push(props.class.clone());
 
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        if let Some(style) = props.style.clone() {
-            classes.push(format!("link-{}", style));
-        }
-        if props.stretched {
-            classes.push("stretched-link");
-        }
-        classes.push(props.class.clone());
-
-        html! {
-            <a
-                class={classes}
-            >
-                { &props.text }
-                { for props.children.iter() }
-            </a>
-        }
+    html! {
+        <a
+            class={classes}
+        >
+            { &props.text }
+            { for props.children.iter() }
+        </a>
     }
 }
diff --git a/packages/yew-bootstrap/src/component/modal.rs b/packages/yew-bootstrap/src/component/modal.rs
index 25ce1cf..5b63563 100644
--- a/packages/yew-bootstrap/src/component/modal.rs
+++ b/packages/yew-bootstrap/src/component/modal.rs
@@ -15,45 +15,6 @@ impl Default for ModalSize {
     }
 }
 
-/// # Modal dialog
-/// Modal dialog, parent of [ModalHeader], [ModalBody] and [ModalFooter].
-/// 
-/// See [ModalProps] for a listing of properties
-/// 
-/// ## Example
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::{Modal, ModalHeader, ModalBody, ModalFooter, Button, ModalSize};
-/// use yew_bootstrap::util::Color;
-/// fn test() -> Html {
-///     html!{
-///         <Modal id="ExampleModal" size={ModalSize::Large}> // size defaults to Normal
-///             <ModalHeader title="Modal title" id="ExampleModal"/>
-///             <ModalBody>
-///                 <p>{"Modal body text goes here."}</p>
-///             </ModalBody>
-///             <ModalFooter>
-///                 <Button style={ Color::Secondary } modal_dismiss={ true }>{ "Close" }</Button>
-///                 <Button style={ Color::Primary }>{ "Save changes" }</Button>
-///             </ModalFooter>
-///         </Modal>
-///     }
-/// }
-/// ```
-pub struct Modal { }
-
-/// # Header for a [Modal] dialog
-/// See [ModalHeaderProps] for a listing of properties
-pub struct ModalHeader { }
-
-/// # Body for a [Modal] dialog
-/// See [ModalBodyProps] for a listing of properties
-pub struct ModalBody { }
-
-/// # Footer for a [Modal] dialog
-/// See [ModalFooterProps] for a listing of properties
-pub struct ModalFooter { }
-
 /// Properties for [ModalFooter]
 #[derive(Properties, Clone, PartialEq)]
 pub struct ModalFooterProps {
@@ -61,22 +22,14 @@ pub struct ModalFooterProps {
     pub children: Children
 }
 
-impl Component for ModalFooter {
-    type Message = ();
-    type Properties = ModalFooterProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-
-        html! {
-            <div class="modal-footer">
-                { for props.children.iter() }
-            </div>
-        }
+/// # Footer for a [Modal] dialog
+/// See [ModalFooterProps] for a listing of properties
+#[function_component]
+pub fn ModalFooter(props: &ModalFooterProps) -> Html {
+    html! {
+        <div class="modal-footer">
+            { for props.children.iter() }
+        </div>
     }
 }
 
@@ -92,23 +45,16 @@ pub struct ModalHeaderProps {
     pub id: String,
 }
 
-impl Component for ModalHeader {
-    type Message = ();
-    type Properties = ModalHeaderProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-
-        html! {
-            <div class="modal-header">
-                <h5 class="modal-title" id={format!("#{}", props.id.clone())}>{props.title.clone()}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-        }
+/// # Header for a [Modal] dialog
+/// See [ModalHeaderProps] for a listing of properties
+///
+#[function_component]
+pub fn ModalHeader(props: &ModalHeaderProps) -> Html {
+    html! {
+        <div class="modal-header">
+            <h5 class="modal-title" id={format!("#{}", props.id.clone())}>{props.title.clone()}</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
     }
 }
 
@@ -119,22 +65,15 @@ pub struct ModalBodyProps {
     pub children: Children
 }
 
-impl Component for ModalBody {
-    type Message = ();
-    type Properties = ModalBodyProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
 
-        html! {
-            <div class="modal-body">
-                { for props.children.iter() }
-            </div>
-        }
+/// # Body for a [Modal] dialog
+/// See [ModalBodyProps] for a listing of properties
+#[function_component]
+pub fn ModalBody(props: &ModalBodyProps) -> Html {
+    html! {
+        <div class="modal-body">
+            { for props.children.iter() }
+        </div>
     }
 }
 
@@ -154,35 +93,50 @@ pub struct ModalProps {
     pub size: ModalSize,
 }
 
-impl Component for Modal {
-    type Message = ();
-    type Properties = ModalProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
+/// # Modal dialog
+/// Modal dialog, parent of [ModalHeader], [ModalBody] and [ModalFooter].
+///
+/// See [ModalProps] for a listing of properties
+///
+/// ## Example
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::{Modal, ModalHeader, ModalBody, ModalFooter, Button, ModalSize};
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <Modal id="ExampleModal" size={ModalSize::Large}> // size defaults to Normal
+///             <ModalHeader title="Modal title" id="ExampleModal"/>
+///             <ModalBody>
+///                 <p>{"Modal body text goes here."}</p>
+///             </ModalBody>
+///             <ModalFooter>
+///                 <Button style={ Color::Secondary } modal_dismiss={ true }>{ "Close" }</Button>
+///                 <Button style={ Color::Primary }>{ "Save changes" }</Button>
+///             </ModalFooter>
+///         </Modal>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn  Modal(props: &ModalProps) -> Html {
+    let mut dialog_classes = Classes::new();
+    dialog_classes.push("modal-dialog");
+
+    match props.size {
+        ModalSize::ExtraLarge => dialog_classes.push("modal-xl"),
+        ModalSize::Large => dialog_classes.push("modal-lg"),
+        ModalSize::Small => dialog_classes.push("modal-sm"),
+        _ => (),
     }
 
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-
-        let mut dialog_classes = Classes::new();
-        dialog_classes.push("modal-dialog");
-
-        match props.size {
-            ModalSize::ExtraLarge => dialog_classes.push("modal-xl"),
-            ModalSize::Large => dialog_classes.push("modal-lg"),
-            ModalSize::Small => dialog_classes.push("modal-sm"),
-            _ => (),
-        }
-
-        html! {
-            <div class="modal" tabindex="-1" id={props.id.clone()}>
-                <div class={dialog_classes}>
-                    <div class="modal-content">
-                        { for props.children.iter() }
-                    </div>
+    html! {
+        <div class="modal" tabindex="-1" id={props.id.clone()}>
+            <div class={dialog_classes}>
+                <div class="modal-content">
+                    { for props.children.iter() }
                 </div>
             </div>
-        }
+        </div>
     }
 }
\ No newline at end of file
diff --git a/packages/yew-bootstrap/src/component/navbar.rs b/packages/yew-bootstrap/src/component/navbar.rs
index a974f8f..d96a7ad 100644
--- a/packages/yew-bootstrap/src/component/navbar.rs
+++ b/packages/yew-bootstrap/src/component/navbar.rs
@@ -3,12 +3,6 @@ use super::Container;
 use crate::util::Dimension;
 use crate::icons::BI;
 
-/// # A singular dropdown item, child of [NavDropdown]
-/// Used as a child of [NavDropdown] to create a dropdown menu. 
-/// 
-/// See [NavDropdownItemProps] for a listing of properties.
-pub struct NavDropdownItem { }
-
 /// # Properties for [NavDropdown]
 #[derive(Properties, Clone, PartialEq, Eq)]
 pub struct NavDropdownItemProps {
@@ -20,29 +14,19 @@ pub struct NavDropdownItemProps {
     pub url: AttrValue,
 }
 
-impl Component for NavDropdownItem {
-    type Message = ();
-    type Properties = NavDropdownItemProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-
-        html! {
-            <li>
-                <a class="dropdown-item" href={props.url.clone()}>{props.text.clone()}</a>
-            </li>
-        }
+/// # A singular dropdown item, child of [NavDropdown]
+/// Used as a child of [NavDropdown] to create a dropdown menu.
+///
+/// See [NavDropdownItemProps] for a listing of properties.
+#[function_component]
+pub fn NavDropdownItem(props: &NavDropdownItemProps) -> Html {
+    html! {
+        <li>
+            <a class="dropdown-item" href={props.url.clone()}>{props.text.clone()}</a>
+        </li>
     }
 }
 
-/// A dropdown menu, child of [NavBar]. See [NavDropdownProps] for a listing of properties.
-#[derive(Clone, PartialEq, Eq)]
-pub struct NavDropdown { }
-
 /// Properties for [NavDropdown]
 #[derive(Properties, Clone, PartialEq)]
 pub struct NavDropdownProps {
@@ -62,50 +46,35 @@ pub struct NavDropdownProps {
     pub active: bool
 }
 
-impl Component for NavDropdown {
-    type Message = ();
-    type Properties = NavDropdownProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self { }
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
+/// A dropdown menu, child of [NavBar]. See [NavDropdownProps] for a listing of properties.
+#[function_component]
+pub fn NavDropdown(props: &NavDropdownProps) -> Html {
+    let expanded = String::from(match props.expanded {
+        true => "true",
+        false => "false"
+    });
 
-        let expanded = String::from(match props.expanded {
-            true => "true",
-            false => "false"
-        });
 
-        
-        let mut dropdown_toggle_classes = Classes::new();
-        dropdown_toggle_classes.push(String::from("nav-link"));
-        dropdown_toggle_classes.push(String::from("dropdown-toggle"));
+    let mut dropdown_toggle_classes = Classes::new();
+    dropdown_toggle_classes.push(String::from("nav-link"));
+    dropdown_toggle_classes.push(String::from("dropdown-toggle"));
 
-        if props.active {
-            dropdown_toggle_classes.push(String::from("active"));
-        }
+    if props.active {
+        dropdown_toggle_classes.push(String::from("active"));
+    }
 
-        html! {
-            <li class="nav-item dropdown">
-                <a class={dropdown_toggle_classes} href="#" id={props.id.clone()} role="button" data-bs-toggle="dropdown" aria-expanded={expanded}>
-                    {props.text.clone()}
-                </a>
-                <ul class="dropdown-menu" aria-labelledby={props.id.clone()}>
-                    { for props.children.iter() }
-                </ul>
-            </li>
-        }
+    html! {
+        <li class="nav-item dropdown">
+            <a class={dropdown_toggle_classes} href="#" id={props.id.clone()} role="button" data-bs-toggle="dropdown" aria-expanded={expanded}>
+                {props.text.clone()}
+            </a>
+            <ul class="dropdown-menu" aria-labelledby={props.id.clone()}>
+                { for props.children.iter() }
+            </ul>
+        </li>
     }
 }
 
-/// # Item of a [NavBar]
-/// This typically contains text inside a link
-/// 
-/// Refer to [NavItemProperties] for a listing of properties
-pub struct NavItem { }
-
 /// Properties for NavItem
 #[derive(Properties, Clone, PartialEq)]
 pub struct NavItemProperties {
@@ -129,57 +98,51 @@ pub struct NavItemProperties {
     pub children: Children
 }
 
-impl Component for NavItem {
-    type Message = ();
-    type Properties = NavItemProperties;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-
-        match &props.children.is_empty() {
-            true => {
-                let mut classes = Classes::new();
-                classes.push(String::from("nav-link"));
-
-                if props.active {
-                    classes.push(String::from("active"));
-                }
+/// # Item of a [NavBar]
+/// This typically contains text inside a link
+///
+/// Refer to [NavItemProperties] for a listing of properties
+#[function_component]
+pub fn NavItem(props: &NavItemProperties) -> Html {
+    match &props.children.is_empty() {
+        true => {
+            let mut classes = Classes::new();
+            classes.push(String::from("nav-link"));
+
+            if props.active {
+                classes.push(String::from("active"));
+            }
 
-                if props.disabled {
-                    classes.push(String::from("disabled"));
-                }
+            if props.disabled {
+                classes.push(String::from("disabled"));
+            }
 
-                match props.disabled {
-                    true => {
-                        html! {
-                            <li class="nav-item">
-                                <a class={classes} tabindex="-1" aria-disabled="true" href={props.url.clone()}>
-                                    {props.text.clone()}
-                                </a>
-                            </li>
-                        }
-                    },
-                    false => {
-                        html! {
-                            <li class="nav-item">
-                                <a class={classes} href={props.url.clone()}>
-                                    {props.text.clone()}
-                                </a>
-                            </li>
-                        }
+            match props.disabled {
+                true => {
+                    html! {
+                        <li class="nav-item">
+                            <a class={classes} tabindex="-1" aria-disabled="true" href={props.url.clone()}>
+                                {props.text.clone()}
+                            </a>
+                        </li>
+                    }
+                },
+                false => {
+                    html! {
+                        <li class="nav-item">
+                            <a class={classes} href={props.url.clone()}>
+                                {props.text.clone()}
+                            </a>
+                        </li>
                     }
                 }
-            },
-            false => {
-                html! {
-                    <NavDropdown text={props.text.clone()} id={props.id.clone()} active={props.active}>
-                        { for props.children.iter() }
-                    </NavDropdown>
-                }                
+            }
+        },
+        false => {
+            html! {
+                <NavDropdown text={props.text.clone()} id={props.id.clone()} active={props.active}>
+                    { for props.children.iter() }
+                </NavDropdown>
             }
         }
     }
@@ -217,34 +180,6 @@ pub enum BrandType {
     }
 }
 
-/// # Navbar component, parent of [NavItem], [NavDropdown], and [NavDropdownItem]
-/// The navbar is a responsive horizontal menu bar that can contain links, dropdowns, and text.
-/// We have broken up this component into several sub-components to make it easier to use: [NavItem], [NavDropdown], and [NavDropdownItem].
-/// The brand property is set using the [BrandType] enum.
-/// 
-/// See [NavBarProps] for more information on properties supported by this component.
-/// # Example
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::{BrandType, NavBar, NavDropdownItem, NavItem};
-/// 
-/// fn test() -> Html {
-///     let brand = BrandType::BrandSimple { 
-///         text: AttrValue::from("Yew Bootstrap"), 
-///         url: Some(AttrValue::from("https://yew.rs")) 
-///     };
-///     html!{
-///         <NavBar nav_id={"test-nav"} class="navbar-expand-lg navbar-light bg-light" brand={brand}>
-///             <NavItem text="Home" url={AttrValue::from("/")} />
-///             <NavItem text="more">
-///                 <NavDropdownItem text="dropdown item 1" url={AttrValue::from("/dropdown1")} />
-///             </NavItem>
-///         </NavBar>
-///     }
-/// }
-/// ```
-pub struct NavBar { }
-
 /// Properties for [NavBar]
 #[derive(Properties, Clone, PartialEq)]
 pub struct NavBarProps {
@@ -271,118 +206,134 @@ pub struct NavBarProps {
     pub brand_callback: Callback<MouseEvent>
 }
 
-impl Component for NavBar {
-    type Message = ();
-    type Properties = NavBarProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-
-        let expanded = String::from(match &props.expanded {
-            true => {
-                "true"
-            },
-            false => {
-                "false"
-            }
-        });
-
-        let mut classes = Classes::new();
-        classes.push("navbar");
-        classes.push(props.class.to_string());
-
-        let brand = match &props.brand {
-            None => html!{},
-            Some(b) => {
-                match b {
-                    BrandType::BrandSimple{text, url} => {
-                        let url = match url { 
-                            Some(u) => u.clone(),
-                            None => AttrValue::from("#")
-                        };
-
-                        html!{
-                            <a class="navbar-brand" href={url} onclick={props.brand_callback.clone()}>
-                                {text.clone()}
-                            </a>
-                        }
-                    },
-                    BrandType::BrandIcon { text, icon, url } => {
-                        let url = match url { 
-                            Some(u) => u.clone(),
-                            None => AttrValue::from("#")
-                        };
-                        html! {
-                            <a class="navbar-brand" href={url} onclick={props.brand_callback.clone()}>
-                                {icon}
-                                {text.clone()}
-                            </a>
-                        }
+/// # Navbar component, parent of [NavItem], [NavDropdown], and [NavDropdownItem]
+/// The navbar is a responsive horizontal menu bar that can contain links, dropdowns, and text.
+/// We have broken up this component into several sub-components to make it easier to use: [NavItem], [NavDropdown], and [NavDropdownItem].
+/// The brand property is set using the [BrandType] enum.
+///
+/// See [NavBarProps] for more information on properties supported by this component.
+/// # Example
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::{BrandType, NavBar, NavDropdownItem, NavItem};
+///
+/// fn test() -> Html {
+///     let brand = BrandType::BrandSimple {
+///         text: AttrValue::from("Yew Bootstrap"),
+///         url: Some(AttrValue::from("https://yew.rs"))
+///     };
+///     html!{
+///         <NavBar nav_id={"test-nav"} class="navbar-expand-lg navbar-light bg-light" brand={brand}>
+///             <NavItem text="Home" url={AttrValue::from("/")} />
+///             <NavItem text="more">
+///                 <NavDropdownItem text="dropdown item 1" url={AttrValue::from("/dropdown1")} />
+///             </NavItem>
+///         </NavBar>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn NavBar(props: &NavBarProps) -> Html {
+   let expanded = String::from(match &props.expanded {
+        true => {
+            "true"
+        },
+        false => {
+            "false"
+        }
+    });
+
+    let mut classes = Classes::new();
+    classes.push("navbar");
+    classes.push(props.class.to_string());
+
+    let brand = match &props.brand {
+        None => html!{},
+        Some(b) => {
+            match b {
+                BrandType::BrandSimple{text, url} => {
+                    let url = match url {
+                        Some(u) => u.clone(),
+                        None => AttrValue::from("#")
+                    };
+
+                    html!{
+                        <a class="navbar-brand" href={url} onclick={props.brand_callback.clone()}>
+                            {text.clone()}
+                        </a>
                     }
-                    BrandType::BrandImage { image_url, alt, dimension } => {
-                        match dimension {
-                            None => {
-                                html! {
-                                    <a class="navbar-brand" href={"#"} onclick={props.brand_callback.clone()}>
-                                        <img src={image_url.clone()} alt={alt.clone()} class="d-inline-block align-text-top" />
-                                    </a>
-                                }
+                },
+                BrandType::BrandIcon { text, icon, url } => {
+                    let url = match url {
+                        Some(u) => u.clone(),
+                        None => AttrValue::from("#")
+                    };
+                    html! {
+                        <a class="navbar-brand" href={url} onclick={props.brand_callback.clone()}>
+                            {icon}
+                            {text.clone()}
+                        </a>
+                    }
+                }
+                BrandType::BrandImage { image_url, alt, dimension } => {
+                    match dimension {
+                        None => {
+                            html! {
+                                <a class="navbar-brand" href={"#"} onclick={props.brand_callback.clone()}>
+                                    <img src={image_url.clone()} alt={alt.clone()} class="d-inline-block align-text-top" />
+                                </a>
                             }
-                            Some(Dimension{width, height}) => {
-                                html! {
-                                    <a class="navbar-brand" href={"#"} onclick={props.brand_callback.clone()}>
-                                        <img src={image_url.clone()} alt={alt.clone()} width={width.clone()} height={height.clone()} class="d-inline-block align-text-top" />
-                                    </a>
-                                }
+                        }
+                        Some(Dimension{width, height}) => {
+                            html! {
+                                <a class="navbar-brand" href={"#"} onclick={props.brand_callback.clone()}>
+                                    <img src={image_url.clone()} alt={alt.clone()} width={width.clone()} height={height.clone()} class="d-inline-block align-text-top" />
+                                </a>
                             }
                         }
                     }
-                    BrandType::BrandCombined { text, url, image_url, alt, dimension } => {
-                        let url = match url { 
-                            Some(u) => u.clone(),
-                            None => AttrValue::from("#")
-                        };
-                        match dimension {
-                            None => {
-                                html! {
-                                    <a class="navbar-brand" href={url} onclick={props.brand_callback.clone()}>
-                                        <img src={image_url.clone()} alt={alt.clone()} class="d-inline-block align-text-top" />
-                                        {text.clone()}
-                                    </a>
-                                }
-                            },
-                            Some(Dimension{width, height}) => {
-                                html! {
-                                    <a class="navbar-brand" href={url} onclick={props.brand_callback.clone()}>
-                                        <img src={image_url.clone()} alt={alt.clone()} width={width.clone()} height={height.clone()} class="d-inline-block align-text-top" />
-                                        {text.clone()}
-                                    </a>
-                                }
+                }
+                BrandType::BrandCombined { text, url, image_url, alt, dimension } => {
+                    let url = match url {
+                        Some(u) => u.clone(),
+                        None => AttrValue::from("#")
+                    };
+                    match dimension {
+                        None => {
+                            html! {
+                                <a class="navbar-brand" href={url} onclick={props.brand_callback.clone()}>
+                                    <img src={image_url.clone()} alt={alt.clone()} class="d-inline-block align-text-top" />
+                                    {text.clone()}
+                                </a>
+                            }
+                        },
+                        Some(Dimension{width, height}) => {
+                            html! {
+                                <a class="navbar-brand" href={url} onclick={props.brand_callback.clone()}>
+                                    <img src={image_url.clone()} alt={alt.clone()} width={width.clone()} height={height.clone()} class="d-inline-block align-text-top" />
+                                    {text.clone()}
+                                </a>
                             }
                         }
                     }
                 }
             }
-        };
-
-        html! {
-            <nav class={classes}>
-                <Container fluid=true>
-                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target={format!("#{}", props.nav_id.clone())} aria-controls={props.nav_id.clone()} aria-expanded={expanded} aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
-                    </button>
-                    {brand}
-                    <div class="collapse navbar-collapse" id={props.nav_id.clone()}>
-                        <ul class="navbar-nav">
-                            { for props.children.clone() }
-                        </ul>
-                    </div>
-                </Container>
-            </nav>
         }
+    };
+
+    html! {
+        <nav class={classes}>
+            <Container fluid=true>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target={format!("#{}", props.nav_id.clone())} aria-controls={props.nav_id.clone()} aria-expanded={expanded} aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                {brand}
+                <div class="collapse navbar-collapse" id={props.nav_id.clone()}>
+                    <ul class="navbar-nav">
+                        { for props.children.clone() }
+                    </ul>
+                </div>
+            </Container>
+        </nav>
     }
 }
\ No newline at end of file
diff --git a/packages/yew-bootstrap/src/component/row.rs b/packages/yew-bootstrap/src/component/row.rs
index 4f01a75..85323b4 100644
--- a/packages/yew-bootstrap/src/component/row.rs
+++ b/packages/yew-bootstrap/src/component/row.rs
@@ -1,6 +1,23 @@
 use super::Column;
 use yew::prelude::*;
 
+
+/// # Properties for [Row]
+#[derive(Properties, Clone, PartialEq)]
+pub struct RowProps {
+    /// CSS class
+    #[prop_or_default]
+    pub class: String,
+
+    /// Event called when the element is clicked
+    #[prop_or_default]
+    pub onclick: Callback<MouseEvent>,
+
+    /// Children of type [crate::component::Column]
+    #[prop_or_default]
+    pub children: ChildrenWithProps<Column>,
+}
+
 /// # Row container
 /// Used alongside [crate::component::Column] to create grids
 ///
@@ -19,45 +36,18 @@ use yew::prelude::*;
 ///     }
 /// }
 /// ```
-pub struct Row {}
-
-/// # Properties for [Row]
-#[derive(Properties, Clone, PartialEq)]
-pub struct RowProps {
-    /// CSS class
-    #[prop_or_default]
-    pub class: String,
-
-    /// Event called when the element is clicked
-    #[prop_or_default]
-    pub onclick: Callback<MouseEvent>,
-
-    /// Children of type [crate::component::Column]
-    #[prop_or_default]
-    pub children: ChildrenWithProps<Column>,
-}
-
-impl Component for Row {
-    type Message = ();
-    type Properties = RowProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
-        classes.push("row");
-        classes.push(props.class.clone());
-
-        html! {
-            <div
-                class={classes}
-                onclick={props.onclick.clone()}
-            >
-                { for props.children.iter() }
-            </div>
-        }
+#[function_component]
+pub fn Row(props: &RowProps) -> Html {
+    let mut classes = Classes::new();
+    classes.push("row");
+    classes.push(props.class.clone());
+
+    html! {
+        <div
+            class={classes}
+            onclick={props.onclick.clone()}
+        >
+            { for props.children.iter() }
+        </div>
     }
 }
diff --git a/packages/yew-bootstrap/src/component/spinner.rs b/packages/yew-bootstrap/src/component/spinner.rs
index e447405..401f508 100644
--- a/packages/yew-bootstrap/src/component/spinner.rs
+++ b/packages/yew-bootstrap/src/component/spinner.rs
@@ -2,25 +2,6 @@ use yew::prelude::*;
 
 use crate::util::Color;
 
-/// # Spinner component
-/// Used alongside [crate::util::Color] to create Spinner components
-///
-/// See [SpinnerProps] for a listing of properties
-///
-/// ## Example
-/// ```rust
-/// use yew::prelude::*;
-/// use yew_bootstrap::component::Spinner;
-/// use yew_bootstrap::util::Color;
-/// fn test() -> Html {
-///     html!{
-///         <Spinner style={Color::Primary}>
-///             {"Visually hidden text"}
-///         </Spinner>
-///     }
-/// }
-/// ```
-pub struct Spinner {}
 
 /// # Properties of [Spinner]
 #[derive(Properties, Clone, PartialEq)]
@@ -46,39 +27,48 @@ pub struct SpinnerProps {
     pub small: bool,
 }
 
-impl Component for Spinner {
-    type Message = ();
-    type Properties = SpinnerProps;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let props = ctx.props();
-        let mut classes = Classes::new();
+/// # Spinner component
+/// Used alongside [crate::util::Color] to create Spinner components
+///
+/// See [SpinnerProps] for a listing of properties
+///
+/// ## Example
+/// ```rust
+/// use yew::prelude::*;
+/// use yew_bootstrap::component::Spinner;
+/// use yew_bootstrap::util::Color;
+/// fn test() -> Html {
+///     html!{
+///         <Spinner style={Color::Primary}>
+///             {"Visually hidden text"}
+///         </Spinner>
+///     }
+/// }
+/// ```
+#[function_component]
+pub fn Spinner(props: &SpinnerProps) -> Html {
+    let mut classes = Classes::new();
 
-        if props.grow {
-            classes.push("spinner-grow");
-            if props.small {
-                classes.push("spinner-grow-sm");
-            }
-        } else {
-            classes.push("spinner-border");
-            if props.small {
-                classes.push("spinner-border-sm");
-            }
+    if props.grow {
+        classes.push("spinner-grow");
+        if props.small {
+            classes.push("spinner-grow-sm");
+        }
+    } else {
+        classes.push("spinner-border");
+        if props.small {
+            classes.push("spinner-border-sm");
         }
+    }
 
-        classes.push(format!("text-{}", props.style));
-        classes.push(props.class.clone());
+    classes.push(format!("text-{}", props.style));
+    classes.push(props.class.clone());
 
-        html! {
-            <div class={classes} role="status">
-                <span class="visually-hidden">
-                    { for props.children.iter() }
-                </span>
-            </div>
-        }
+    html! {
+        <div class={classes} role="status">
+            <span class="visually-hidden">
+                { for props.children.iter() }
+            </span>
+        </div>
     }
 }