diff --git a/Cargo.toml b/Cargo.toml
index d416f658e..fa9591911 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -4,7 +4,24 @@ version = "0.0.0"
 edition = "2021"
 
 [workspace]
-members = ["crates/renderer", "crates/state", "crates/freya", "crates/elements", "crates/components", "crates/hooks", "crates/common", "crates/core", "crates/testing", "crates/devtools", "crates/torin", "crates/engine", "./examples/installer",  "crates/native-core",  "crates/native-core-macro"]
+members = [
+    "crates/renderer",
+    "crates/state",
+    "crates/freya",
+    "crates/elements",
+    "crates/components",
+    "crates/hooks",
+    "crates/common",
+    "crates/core",
+    "crates/testing",
+    "crates/devtools",
+    "crates/torin",
+    "crates/engine",
+    "./examples/installer",
+    "./examples/all-components",
+    "crates/native-core",
+    "crates/native-core-macro",
+]
 
 [features]
 log = ["freya/log"]
@@ -39,15 +56,21 @@ torin = { path = "crates/torin", version = "0.2" }
 freya-native-core-macro = { path = "crates/native-core-macro", version = "0.2" }
 freya-native-core = { path = "crates/native-core", version = "0.2" }
 
-dioxus = { version = "0.5", default-features = false, features = ["macro", "signals", "hooks"]}
+dioxus = { version = "0.5", default-features = false, features = [
+    "macro",
+    "signals",
+    "hooks",
+] }
 dioxus-rsx = { version = "0.5", features = ["hot_reload"] }
 dioxus-core-macro = { version = "0.5" }
 dioxus-hooks = { version = "0.5" }
 dioxus-signals = { version = "0.5" }
 dioxus-core = { version = "0.5" }
-dioxus-hot-reload = { version = "0.5", features = ["file_watcher"], default-features = false }
+dioxus-hot-reload = { version = "0.5", features = [
+    "file_watcher",
+], default-features = false }
 dioxus-router = { version = "0.5", default-features = false }
-dioxus-sdk = { version = "0.5", features = ["clipboard"]}
+dioxus-sdk = { version = "0.5", features = ["clipboard"] }
 
 skia-safe = { version = "0.75.0", features = ["gl", "textlayout", "svg"] }
 
@@ -56,14 +79,23 @@ glutin = "0.32.0"
 glutin-winit = "0.5.0"
 raw-window-handle = "0.6.0"
 winit = "0.30.0"
-tokio = { version = "1.33.0", features = ["sync", "rt-multi-thread", "time", "macros"] }
-accesskit = { version = "0.16.0", features = ["serde"]}
+tokio = { version = "1.33.0", features = [
+    "sync",
+    "rt-multi-thread",
+    "time",
+    "macros",
+] }
+accesskit = { version = "0.16.0", features = ["serde"] }
 accesskit_winit = "0.22.0"
-shipyard = { version = "0.6.2", features = ["proc", "std", "parallel"], default-features = false }
+shipyard = { version = "0.6.2", features = [
+    "proc",
+    "std",
+    "parallel",
+], default-features = false }
 smallvec = "1.13.1"
 
 euclid = "0.22.9"
-uuid = { version = "1.4.1", features = ["v4"]}
+uuid = { version = "1.4.1", features = ["v4"] }
 futures-util = "0.3.30"
 futures-task = "0.3.30"
 tracing = "0.1"
@@ -72,7 +104,7 @@ rustc-hash = "2.0.0"
 
 [dev-dependencies]
 skia-safe = { workspace = true }
-tokio = { workspace = true, features = ["fs"]}
+tokio = { workspace = true, features = ["fs"] }
 dioxus = { workspace = true }
 freya = { workspace = true }
 freya-core = { workspace = true }
diff --git a/examples/all-components/Cargo.toml b/examples/all-components/Cargo.toml
new file mode 100644
index 000000000..6827b6be8
--- /dev/null
+++ b/examples/all-components/Cargo.toml
@@ -0,0 +1,11 @@
+[package]
+name = "freya-design-system-example"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+freya = { workspace = true }
+dioxus = { workspace = true }
+dioxus-router = { workspace = true }
+strum = { version = "0.26", features = ["derive"] }
+itertools = "0.13.0"
diff --git a/examples/all-components/src/ds/components/accordion.rs b/examples/all-components/src/ds/components/accordion.rs
new file mode 100644
index 000000000..24fecb8aa
--- /dev/null
+++ b/examples/all-components/src/ds/components/accordion.rs
@@ -0,0 +1,37 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsAccordion() -> Element {
+    rsx!(
+        Accordion {
+            summary: rsx!(AccordionSummary {
+                label {
+                    "Accordion 1"
+                }
+            }),
+            AccordionBody {
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/ds/components/activable_route.rs b/examples/all-components/src/ds/components/activable_route.rs
new file mode 100644
index 000000000..ca55a4513
--- /dev/null
+++ b/examples/all-components/src/ds/components/activable_route.rs
@@ -0,0 +1,15 @@
+use freya::prelude::*;
+
+use crate::Route;
+
+#[allow(non_snake_case)]
+pub fn DsActivableRoute() -> Element {
+    rsx!(
+        ActivableRoute {
+            route: Route::Home,
+            label {
+                "ActivableRoute 1"
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/ds/components/button.rs b/examples/all-components/src/ds/components/button.rs
new file mode 100644
index 000000000..597cd2b8a
--- /dev/null
+++ b/examples/all-components/src/ds/components/button.rs
@@ -0,0 +1,23 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsButton() -> Element {
+    rsx!(
+        Button {
+            onclick: move |_| {
+                println!("button clicked")
+            },
+            label {
+                "A button"
+            }
+        }
+    )
+}
+
+#[component]
+pub fn ButtonThemeEditor(theme: Signal<Theme>) -> Element {
+    rsx!(Input {
+        value: theme().button.background,
+        onchange: move |e: String| { theme.write().button.background = e.into() }
+    })
+}
diff --git a/examples/all-components/src/ds/components/choice.rs b/examples/all-components/src/ds/components/choice.rs
new file mode 100644
index 000000000..385d020b1
--- /dev/null
+++ b/examples/all-components/src/ds/components/choice.rs
@@ -0,0 +1,104 @@
+use std::collections::HashSet;
+
+use freya::prelude::*;
+
+#[derive(PartialEq, Eq, Hash)]
+enum Choice {
+    First,
+    Second,
+    Third,
+}
+
+#[allow(non_snake_case)]
+pub fn DsCheckbox() -> Element {
+    let mut selected = use_signal::<HashSet<Choice>>(HashSet::default);
+
+    rsx!(
+        Tile {
+            onselect: move |_| {
+                if selected.read().contains(&Choice::First) {
+                    selected.write().remove(&Choice::First);
+                } else {
+                    selected.write().insert(Choice::First);
+                }
+            },
+            leading: rsx!(
+                Checkbox {
+                    selected: selected.read().contains(&Choice::First),
+                },
+            ),
+            label { "First choice" }
+        }
+        Tile {
+            onselect: move |_| {
+                if selected.read().contains(&Choice::Second) {
+                    selected.write().remove(&Choice::Second);
+                } else {
+                    selected.write().insert(Choice::Second);
+                }
+            },
+            leading: rsx!(
+                Checkbox {
+                    selected: selected.read().contains(&Choice::Second),
+                },
+            ),
+            label { "Second choice" }
+        }
+        Tile {
+            onselect: move |_| {
+                if selected.read().contains(&Choice::Third) {
+                    selected.write().remove(&Choice::Third);
+                } else {
+                    selected.write().insert(Choice::Third);
+                }
+            },
+            leading: rsx!(
+                Checkbox {
+                    selected: selected.read().contains(&Choice::Third),
+                },
+            ),
+            label { "Third choice" }
+        }
+    )
+}
+
+#[allow(non_snake_case)]
+pub fn DsRadio() -> Element {
+    let mut selected = use_signal(|| Choice::First);
+
+    rsx!(
+        Tile {
+            onselect: move |_| {
+                selected.set(Choice::First);
+            },
+            leading: rsx!(
+                Radio {
+                    selected: *selected.read() == Choice::First,
+                },
+            ),
+            label { "First choice" }
+        }
+        Tile {
+            onselect: move |_| {
+                selected.set(Choice::Second);
+            },
+            leading: rsx!(
+                Radio {
+                    selected: *selected.read() == Choice::Second,
+                },
+            ),
+            label { "Second choice" }
+        }
+        Tile {
+            onselect: move |_| {
+                selected.set(Choice::Third);
+            },
+            leading: rsx!(
+                Radio {
+                    selected: *selected.read() == Choice::Third,
+                },
+            ),
+            label { "Third choice" }
+        }
+    )
+}
diff --git a/examples/all-components/src/ds/components/drag_drop.rs b/examples/all-components/src/ds/components/drag_drop.rs
new file mode 100644
index 000000000..b7908609f
--- /dev/null
+++ b/examples/all-components/src/ds/components/drag_drop.rs
@@ -0,0 +1,37 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsDragProvider() -> Element {
+    let column = vec!["I Like".to_string(), "Rust".to_string(), "🦀!".to_string()];
+
+    rsx!(
+        DragProvider::<String> {
+            DropZone {
+                ondrop: move |data: String| {
+                    println!("drop {data}");
+                },
+                rect {
+                    width: "100%",
+                    height: "100%",
+                    direction: "vertical",
+                    for el in column {
+                        DragZone {
+                            data: el.to_string(),
+                            drag_element: rsx!(
+                                label {
+                                    width: "200",
+                                    font_size: "20",
+                                "Moving '{el}'"
+                                }
+                            ),
+                            label {
+                                font_size: "30",
+                                "{el}"
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/ds/components/dropdown.rs b/examples/all-components/src/ds/components/dropdown.rs
new file mode 100644
index 000000000..0305cc384
--- /dev/null
+++ b/examples/all-components/src/ds/components/dropdown.rs
@@ -0,0 +1,29 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsDropdown() -> Element {
+    let values = use_hook(|| {
+        vec![
+            "First Option".to_string(),
+            "Second Option".to_string(),
+            "Rust".to_string(),
+        ]
+    });
+    let mut selected_dropdown = use_signal(|| "First Option".to_string());
+
+    rsx!(
+        Dropdown {
+            value: selected_dropdown.read().clone(),
+            for ch in values {
+                DropdownItem {
+                    value: ch.clone(),
+                    onclick: {
+                        to_owned![ch];
+                        move |_| selected_dropdown.set(ch.clone())
+                    },
+                    label { "{ch}" }
+                }
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/ds/components/icon.rs b/examples/all-components/src/ds/components/icon.rs
new file mode 100644
index 000000000..ad32b5156
--- /dev/null
+++ b/examples/all-components/src/ds/components/icon.rs
@@ -0,0 +1,19 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsArrowIcon() -> Element {
+    rsx!(ArrowIcon {
+        fill: "black",
+        rotate: "0"
+    })
+}
+
+#[allow(non_snake_case)]
+pub fn DsCrossIcon() -> Element {
+    rsx!(CrossIcon { fill: "black" })
+}
+
+#[allow(non_snake_case)]
+pub fn DsTickIcon() -> Element {
+    rsx!(TickIcon { fill: "black" })
+}
diff --git a/examples/all-components/src/ds/components/input.rs b/examples/all-components/src/ds/components/input.rs
new file mode 100644
index 000000000..fcc0d7127
--- /dev/null
+++ b/examples/all-components/src/ds/components/input.rs
@@ -0,0 +1,18 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsInput() -> Element {
+    let mut value = use_signal(String::new);
+
+    rsx!(
+        label {
+            "Value: {value}"
+        }
+        Input {
+            value: value.read().clone(),
+            onchange: move |e| {
+                 value.set(e)
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/ds/components/link.rs b/examples/all-components/src/ds/components/link.rs
new file mode 100644
index 000000000..3b7ca8571
--- /dev/null
+++ b/examples/all-components/src/ds/components/link.rs
@@ -0,0 +1,11 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsLink() -> Element {
+    rsx! {
+        Link {
+            to: "https://crates.io/crates/freya",
+            label { "Freya crates.io" }
+        }
+    }
+}
diff --git a/examples/all-components/src/ds/components/menu.rs b/examples/all-components/src/ds/components/menu.rs
new file mode 100644
index 000000000..4e1d8e927
--- /dev/null
+++ b/examples/all-components/src/ds/components/menu.rs
@@ -0,0 +1,52 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsMenu() -> Element {
+    let mut show_menu = use_signal(|| false);
+
+    rsx!(
+        Body {
+            Button {
+                onclick: move |_| show_menu.toggle(),
+                label { "Open Menu" }
+            },
+            if *show_menu.read() {
+                Menu {
+                    onclose: move |_| show_menu.set(false),
+                    MenuItem {
+                        label {
+                            "MenuItem"
+                        }
+                    }
+                    MenuButton {
+                        label {
+                            "Open"
+                        }
+                    }
+                    MenuButton {
+                        label {
+                            "Save"
+                        }
+                    }
+                    SubMenu {
+                        menu: rsx!(
+                            MenuButton {
+                                label {
+                                    "Some option"
+                                }
+                            }
+                        ),
+                        label {
+                            "Options"
+                        }
+                    }
+                    MenuButton {
+                        label {
+                            "Close"
+                        }
+                    }
+                }
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/ds/components/mod.rs b/examples/all-components/src/ds/components/mod.rs
new file mode 100644
index 000000000..ff549afe1
--- /dev/null
+++ b/examples/all-components/src/ds/components/mod.rs
@@ -0,0 +1,35 @@
+mod accordion;
+mod activable_route;
+mod button;
+mod choice;
+mod drag_drop;
+mod dropdown;
+mod icon;
+mod input;
+mod link;
+mod menu;
+mod popup;
+mod progress;
+mod slider;
+mod snackbar;
+mod switch;
+mod table;
+mod tooltip;
+
+pub use accordion::*;
+pub use activable_route::*;
+pub use button::*;
+pub use choice::*;
+pub use drag_drop::*;
+pub use dropdown::*;
+pub use icon::*;
+pub use input::*;
+pub use link::*;
+pub use menu::*;
+pub use popup::*;
+pub use progress::*;
+pub use slider::*;
+pub use snackbar::*;
+pub use switch::*;
+pub use table::*;
+pub use tooltip::*;
diff --git a/examples/all-components/src/ds/components/popup.rs b/examples/all-components/src/ds/components/popup.rs
new file mode 100644
index 000000000..31acf942f
--- /dev/null
+++ b/examples/all-components/src/ds/components/popup.rs
@@ -0,0 +1,32 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsPopup() -> Element {
+    let mut show_popup = use_signal(|| false);
+
+    rsx!(
+        if *show_popup.read() {
+             Popup {
+                 oncloserequest: move |_| {
+                     show_popup.set(false)
+                 },
+                 PopupTitle {
+                     label {
+                         "Awesome Popup"
+                     }
+                 }
+                 PopupContent {
+                     label {
+                         "Some content"
+                     }
+                 }
+             }
+         }
+         Button {
+             onclick: move |_| show_popup.set(true),
+             label {
+                 "Open"
+             }
+         }
+    )
+}
diff --git a/examples/all-components/src/ds/components/progress.rs b/examples/all-components/src/ds/components/progress.rs
new file mode 100644
index 000000000..3594697bc
--- /dev/null
+++ b/examples/all-components/src/ds/components/progress.rs
@@ -0,0 +1,11 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsProgressBar() -> Element {
+    rsx!(ProgressBar { progress: 75.0 })
+}
+
+#[allow(non_snake_case)]
+pub fn DsLoader() -> Element {
+    rsx!(Loader {})
+}
diff --git a/examples/all-components/src/ds/components/slider.rs b/examples/all-components/src/ds/components/slider.rs
new file mode 100644
index 000000000..3c0e50b02
--- /dev/null
+++ b/examples/all-components/src/ds/components/slider.rs
@@ -0,0 +1,13 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsSlider() -> Element {
+    let mut value = use_signal(|| 10.0);
+
+    rsx!(Slider {
+        value: *value.read(),
+        onmoved: move |p| {
+            value.set(p);
+        }
+    })
+}
diff --git a/examples/all-components/src/ds/components/snackbar.rs b/examples/all-components/src/ds/components/snackbar.rs
new file mode 100644
index 000000000..1699a2b5e
--- /dev/null
+++ b/examples/all-components/src/ds/components/snackbar.rs
@@ -0,0 +1,23 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsSnackBar() -> Element {
+    let mut show = use_signal(|| false);
+
+    rsx!(
+        rect {
+            height: "100%",
+            width: "100%",
+            Button {
+                onclick: move |_| show.toggle(),
+                label { "Open" }
+            }
+            SnackBar {
+                show,
+                label {
+                    "Hello, World!"
+                }
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/ds/components/switch.rs b/examples/all-components/src/ds/components/switch.rs
new file mode 100644
index 000000000..f4a4b14e5
--- /dev/null
+++ b/examples/all-components/src/ds/components/switch.rs
@@ -0,0 +1,10 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsSwitch() -> Element {
+    let mut is_enabled = use_signal(|| true);
+    rsx!(Switch {
+        enabled: is_enabled(),
+        ontoggled: move |_| { is_enabled.toggle() }
+    })
+}
diff --git a/examples/all-components/src/ds/components/table.rs b/examples/all-components/src/ds/components/table.rs
new file mode 100644
index 000000000..be6f00990
--- /dev/null
+++ b/examples/all-components/src/ds/components/table.rs
@@ -0,0 +1,127 @@
+use std::fmt::Display;
+
+use freya::prelude::*;
+use itertools::{Either, Itertools};
+
+#[derive(PartialEq, Clone)]
+enum OrderBy {
+    Name,
+    Type,
+    Rank,
+}
+
+impl Display for OrderBy {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            OrderBy::Name => f.write_str("Name"),
+            OrderBy::Type => f.write_str("Type"),
+            OrderBy::Rank => f.write_str("Rank"),
+        }
+    }
+}
+
+#[allow(non_snake_case)]
+pub fn DsTable() -> Element {
+    let mut order_direction = use_signal(|| OrderDirection::Down);
+    let mut order = use_signal(|| OrderBy::Name);
+    let data = use_signal(|| {
+        vec![
+            vec!["Zeus".to_owned(), "Sky".to_owned(), "01".to_owned()],
+            vec!["Poseidon".to_owned(), "Sea".to_owned(), "03".to_owned()],
+            vec!["Ares".to_owned(), "War".to_owned(), "08".to_owned()],
+            vec!["Aphrodite".to_owned(), "Love".to_owned(), "10".to_owned()],
+            vec!["Hera".to_owned(), "Women".to_owned(), "02".to_owned()],
+            vec!["Demeter".to_owned(), "Harvest".to_owned(), "04".to_owned()],
+            vec!["Athena".to_owned(), "Strategy".to_owned(), "05".to_owned()],
+            vec!["Apollo".to_owned(), "Sun".to_owned(), "06".to_owned()],
+            vec!["Artemis".to_owned(), "Hunt".to_owned(), "07".to_owned()],
+            vec!["Hephaestus".to_owned(), "Fire".to_owned(), "09".to_owned()],
+            vec!["Hermes".to_owned(), "Messenger".to_owned(), "11".to_owned()],
+            vec!["Dionysus".to_owned(), "Wine".to_owned(), "12".to_owned()],
+        ]
+    });
+    let columns = use_hook(|| {
+        vec![
+            ("Name", OrderBy::Name),
+            ("Type", OrderBy::Type),
+            ("Rank", OrderBy::Rank),
+        ]
+    });
+    let data = data.read();
+
+    let filtered_data = {
+        let filtered_data = data.iter().sorted_by(|a, b| match *order.read() {
+            OrderBy::Name => Ord::cmp(&a[0].to_lowercase(), &b[0].to_lowercase()),
+            OrderBy::Type => Ord::cmp(&a[1].to_lowercase(), &b[1].to_lowercase()),
+            OrderBy::Rank => Ord::cmp(&a[2].to_lowercase(), &b[2].to_lowercase()),
+        });
+
+        if *order_direction.read() == OrderDirection::Down {
+            Either::Left(filtered_data)
+        } else {
+            Either::Right(filtered_data.rev())
+        }
+    };
+
+    let mut on_column_head_click = move |column_order: &OrderBy| {
+        // Change order diection
+        if &*order.read() == column_order {
+            if *order_direction.read() == OrderDirection::Up {
+                order_direction.set(OrderDirection::Down)
+            } else {
+                order_direction.set(OrderDirection::Up)
+            }
+        // Change order column
+        } else {
+            order.set(column_order.clone());
+            order_direction.set(OrderDirection::default())
+        }
+    };
+
+    rsx!(
+        rect {
+            padding: "10",
+            label {
+                height: "25",
+                "Ordering by {order}"
+            }
+            Table {
+                columns: 3,
+                TableHead {
+                    TableRow {
+                        for (n, (text, order_by)) in columns.into_iter().enumerate() {
+                            TableCell {
+                                key: "{n}",
+                                order_direction: if *order.read() == order_by { Some(*order_direction.read()) } else { None },
+                                onclick: move |_| on_column_head_click(&order_by),
+                                label {
+                                    "{text}"
+                                }
+                            }
+                        }
+                    }
+                }
+                TableBody {
+                    ScrollView {
+                        for (i, items) in filtered_data.enumerate() {
+                            TableRow {
+                                key: "{i}",
+                                alternate_colors: i % 2 == 0,
+                                for (n, item) in items.iter().enumerate() {
+                                    TableCell {
+                                        key: "{n}",
+                                        label {
+                                            width: "100%",
+                                            text_align: "right",
+                                            "{item}"
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/ds/components/tooltip.rs b/examples/all-components/src/ds/components/tooltip.rs
new file mode 100644
index 000000000..410d11598
--- /dev/null
+++ b/examples/all-components/src/ds/components/tooltip.rs
@@ -0,0 +1,6 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsTooltip() -> Element {
+    rsx!(Tooltip { url: "tooltip url" })
+}
diff --git a/examples/all-components/src/ds/elements/ferris.svg b/examples/all-components/src/ds/elements/ferris.svg
new file mode 100644
index 000000000..0d8a78b37
--- /dev/null
+++ b/examples/all-components/src/ds/elements/ferris.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1200 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+    <g id="Layer-1" serif:id="Layer 1">
+        <g transform="matrix(1,0,0,1,597.344,637.02)">
+            <path d="M0,-279.559C-121.238,-279.559 -231.39,-264.983 -312.939,-241.23L-312.939,-38.329C-231.39,-14.575 -121.238,0 0,0C138.76,0 262.987,-19.092 346.431,-49.186L346.431,-230.37C262.987,-260.465 138.76,-279.559 0,-279.559" style="fill:rgb(165,43,0);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,1068.75,575.642)">
+            <path d="M0,-53.32L-14.211,-82.761C-14.138,-83.879 -14.08,-84.998 -14.08,-86.121C-14.08,-119.496 -48.786,-150.256 -107.177,-174.883L-107.177,2.643C-79.932,-8.849 -57.829,-21.674 -42.021,-35.482C-46.673,-16.775 -62.585,21.071 -75.271,47.686C-96.121,85.752 -103.671,118.889 -102.703,120.53C-102.086,121.563 -94.973,110.59 -84.484,92.809C-60.074,58.028 -13.82,-8.373 -4.575,-25.287C5.897,-44.461 0,-53.32 0,-53.32" style="fill:rgb(165,43,0);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,149.064,591.421)">
+            <path d="M0,-99.954C0,-93.526 1.293,-87.194 3.788,-80.985L-4.723,-65.835C-4.723,-65.835 -11.541,-56.989 0.465,-38.327C11.055,-21.872 64.1,42.54 92.097,76.271C104.123,93.564 112.276,104.216 112.99,103.187C114.114,101.554 105.514,69.087 81.631,32.046C70.487,12.151 57.177,-14.206 49.189,-33.675C71.492,-19.559 100.672,-6.755 135.341,4.265L135.341,-204.17C51.797,-177.622 0,-140.737 0,-99.954" style="fill:rgb(165,43,0);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(-65.8097,-752.207,-752.207,65.8097,621.707,796.312)">
+            <path d="M0.991,-0.034L0.933,0.008C0.933,0.014 0.933,0.02 0.933,0.026L0.99,0.069C0.996,0.073 0.999,0.08 0.998,0.087C0.997,0.094 0.992,0.1 0.986,0.103L0.92,0.133C0.919,0.139 0.918,0.145 0.916,0.15L0.964,0.203C0.968,0.208 0.97,0.216 0.968,0.222C0.965,0.229 0.96,0.234 0.953,0.236L0.882,0.254C0.88,0.259 0.877,0.264 0.875,0.27L0.91,0.33C0.914,0.336 0.914,0.344 0.91,0.35C0.907,0.356 0.9,0.36 0.893,0.361L0.82,0.365C0.817,0.369 0.813,0.374 0.81,0.379L0.832,0.445C0.835,0.452 0.833,0.459 0.828,0.465C0.824,0.47 0.816,0.473 0.809,0.472L0.737,0.462C0.733,0.466 0.729,0.47 0.724,0.474L0.733,0.544C0.734,0.551 0.731,0.558 0.725,0.562C0.719,0.566 0.711,0.568 0.704,0.565L0.636,0.542C0.631,0.546 0.626,0.549 0.621,0.552L0.615,0.621C0.615,0.629 0.61,0.635 0.604,0.638C0.597,0.641 0.589,0.641 0.583,0.638L0.521,0.602C0.52,0.603 0.519,0.603 0.518,0.603L0.406,0.729C0.406,0.729 0.394,0.747 0.359,0.725C0.329,0.705 0.206,0.599 0.141,0.543C0.109,0.52 0.089,0.504 0.09,0.502C0.093,0.499 0.149,0.509 0.217,0.554C0.278,0.588 0.371,0.631 0.38,0.619C0.38,0.619 0.396,0.604 0.406,0.575C0.406,0.575 0.406,0.575 0.406,0.575C0.407,0.576 0.407,0.576 0.406,0.575C0.406,0.575 0.091,0.024 0.305,-0.531C0.311,-0.593 0.275,-0.627 0.275,-0.627C0.266,-0.639 0.178,-0.598 0.12,-0.566C0.055,-0.523 0.002,-0.513 0,-0.516C-0.001,-0.518 0.018,-0.533 0.049,-0.555C0.11,-0.608 0.227,-0.707 0.256,-0.726C0.289,-0.748 0.301,-0.73 0.301,-0.73L0.402,-0.615C0.406,-0.614 0.41,-0.613 0.415,-0.613L0.47,-0.658C0.475,-0.663 0.483,-0.664 0.49,-0.662C0.497,-0.66 0.502,-0.655 0.504,-0.648L0.522,-0.58C0.527,-0.578 0.533,-0.576 0.538,-0.574L0.602,-0.608C0.608,-0.612 0.616,-0.612 0.623,-0.608C0.629,-0.605 0.633,-0.599 0.633,-0.592L0.637,-0.522C0.642,-0.519 0.647,-0.515 0.652,-0.512L0.721,-0.534C0.728,-0.536 0.736,-0.535 0.741,-0.531C0.747,-0.526 0.75,-0.519 0.749,-0.512L0.738,-0.443C0.742,-0.439 0.746,-0.435 0.751,-0.431L0.823,-0.439C0.83,-0.44 0.837,-0.437 0.842,-0.432C0.847,-0.426 0.848,-0.419 0.845,-0.412L0.821,-0.347C0.824,-0.342 0.828,-0.337 0.831,-0.332L0.903,-0.327C0.911,-0.327 0.917,-0.322 0.92,-0.316C0.924,-0.31 0.924,-0.302 0.92,-0.296L0.883,-0.236C0.885,-0.231 0.887,-0.226 0.889,-0.22L0.959,-0.202C0.966,-0.2 0.972,-0.195 0.974,-0.188C0.976,-0.181 0.974,-0.174 0.969,-0.168L0.92,-0.116C0.921,-0.111 0.923,-0.105 0.924,-0.099L0.988,-0.068C0.995,-0.065 0.999,-0.059 1,-0.052C1.001,-0.045 0.997,-0.038 0.991,-0.034ZM0.406,0.575C0.406,0.575 0.406,0.575 0.406,0.575C0.406,0.575 0.406,0.575 0.406,0.575Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,450.328,483.629)">
+            <path d="M0,167.33C-1.664,165.91 -2.536,165.068 -2.536,165.068L140.006,153.391C23.733,0 -69.418,122.193 -79.333,135.855L-79.333,167.33L0,167.33Z" style="fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,747.12,477.333)">
+            <path d="M0,171.974C1.663,170.554 2.536,169.71 2.536,169.71L-134.448,159.687C-18.12,0 69.421,126.835 79.335,140.497L79.335,171.974L0,171.974Z" style="fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(-1.53e-05,-267.211,-267.211,1.53e-05,809.465,764.23)">
+            <path d="M1,-0.586C1,-0.586 0.768,-0.528 0.524,-0.165L0.5,-0.064C0.5,-0.064 1.1,0.265 0.424,0.731C0.424,0.731 0.508,0.586 0.405,0.197C0.405,0.197 0.131,0.376 0.14,0.736C0.14,0.736 -0.275,0.391 0.324,-0.135C0.324,-0.135 0.539,-0.691 1,-0.736L1,-0.586Z" style="fill:url(#_Linear2);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,677.392,509.61)">
+            <path d="M0,-92.063C0,-92.063 43.486,-139.678 86.974,-92.063C86.974,-92.063 121.144,-28.571 86.974,3.171C86.974,3.171 31.062,47.615 0,3.171C0,3.171 -37.275,-31.75 0,-92.063" style="fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,727.738,435.209)">
+            <path d="M0,0.002C0,18.543 -10.93,33.574 -24.408,33.574C-37.885,33.574 -48.814,18.543 -48.814,0.002C-48.814,-18.539 -37.885,-33.572 -24.408,-33.572C-10.93,-33.572 0,-18.539 0,0.002" style="fill:white;fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,483.3,502.984)">
+            <path d="M0,-98.439C0,-98.439 74.596,-131.467 94.956,-57.748C94.956,-57.748 116.283,28.178 33.697,33.028C33.697,33.028 -71.613,12.745 0,-98.439" style="fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(1,0,0,1,520.766,436.428)">
+            <path d="M0,0C0,19.119 -11.27,34.627 -25.173,34.627C-39.071,34.627 -50.344,19.119 -50.344,0C-50.344,-19.124 -39.071,-34.627 -25.173,-34.627C-11.27,-34.627 0,-19.124 0,0" style="fill:white;fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(-1.53e-05,-239.021,-239.021,1.53e-05,402.161,775.388)">
+            <path d="M0.367,0.129C-0.364,-0.441 0.223,-0.711 0.223,-0.711C0.259,-0.391 0.472,-0.164 0.472,-0.164C0.521,-0.548 0.525,-0.77 0.525,-0.77C1.203,-0.256 0.589,0.161 0.589,0.161C0.627,0.265 0.772,0.372 0.906,0.451L1,0.77C0.376,0.403 0.367,0.129 0.367,0.129Z" style="fill:url(#_Linear3);fill-rule:nonzero;"/>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,1.38778e-17,-1,0,-0.000650515)"><stop offset="0" style="stop-color:rgb(247,76,0);stop-opacity:1"/><stop offset="0.33" style="stop-color:rgb(247,76,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(244,150,0);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,-1,0,1.23438e-06)"><stop offset="0" style="stop-color:rgb(204,58,0);stop-opacity:1"/><stop offset="0.15" style="stop-color:rgb(204,58,0);stop-opacity:1"/><stop offset="0.74" style="stop-color:rgb(247,76,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(247,76,0);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,1.32349e-23,1.32349e-23,-1,0,-9.1568e-07)"><stop offset="0" style="stop-color:rgb(204,58,0);stop-opacity:1"/><stop offset="0.15" style="stop-color:rgb(204,58,0);stop-opacity:1"/><stop offset="0.74" style="stop-color:rgb(247,76,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(247,76,0);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/examples/all-components/src/ds/elements/image.rs b/examples/all-components/src/ds/elements/image.rs
new file mode 100644
index 000000000..bddbdb75e
--- /dev/null
+++ b/examples/all-components/src/ds/elements/image.rs
@@ -0,0 +1,14 @@
+use freya::prelude::*;
+
+static RUST_LOGO: &[u8] = include_bytes!("./rust_logo.png");
+
+#[allow(non_snake_case)]
+pub fn DsImage() -> Element {
+    let image_data = static_bytes(RUST_LOGO);
+
+    rsx!(image {
+        image_data: image_data,
+        width: "250",
+        height: "250",
+    })
+}
diff --git a/examples/all-components/src/ds/elements/label.rs b/examples/all-components/src/ds/elements/label.rs
new file mode 100644
index 000000000..f7a8b676d
--- /dev/null
+++ b/examples/all-components/src/ds/elements/label.rs
@@ -0,0 +1,8 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsLabel() -> Element {
+    rsx!(label {
+        "This is a label"
+    })
+}
diff --git a/examples/all-components/src/ds/elements/mod.rs b/examples/all-components/src/ds/elements/mod.rs
new file mode 100644
index 000000000..4c6d1f0b0
--- /dev/null
+++ b/examples/all-components/src/ds/elements/mod.rs
@@ -0,0 +1,13 @@
+mod image;
+mod label;
+mod paragraph;
+mod rect;
+mod svg;
+mod text;
+
+pub use image::*;
+pub use label::*;
+pub use paragraph::*;
+pub use rect::*;
+pub use svg::*;
+pub use text::*;
diff --git a/examples/all-components/src/ds/elements/paragraph.rs b/examples/all-components/src/ds/elements/paragraph.rs
new file mode 100644
index 000000000..fdf01f2b4
--- /dev/null
+++ b/examples/all-components/src/ds/elements/paragraph.rs
@@ -0,0 +1,14 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsParagraph() -> Element {
+    let loremipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+
+    rsx!(
+        paragraph {
+            text{
+                {loremipsum}
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/ds/elements/rect.rs b/examples/all-components/src/ds/elements/rect.rs
new file mode 100644
index 000000000..1f2d5d5c3
--- /dev/null
+++ b/examples/all-components/src/ds/elements/rect.rs
@@ -0,0 +1,10 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsRect() -> Element {
+    rsx!(rect {
+        background: "green",
+        width: "150",
+        height: "150"
+    })
+}
diff --git a/examples/all-components/src/ds/elements/rust_logo.png b/examples/all-components/src/ds/elements/rust_logo.png
new file mode 100644
index 000000000..1793f8198
Binary files /dev/null and b/examples/all-components/src/ds/elements/rust_logo.png differ
diff --git a/examples/all-components/src/ds/elements/svg.rs b/examples/all-components/src/ds/elements/svg.rs
new file mode 100644
index 000000000..2891581cb
--- /dev/null
+++ b/examples/all-components/src/ds/elements/svg.rs
@@ -0,0 +1,14 @@
+use freya::prelude::*;
+
+static FERRIS: &[u8] = include_bytes!("./ferris.svg");
+
+#[allow(non_snake_case)]
+pub fn DsSvg() -> Element {
+    let image_data = static_bytes(FERRIS);
+
+    rsx!(svg {
+        width: "100%",
+        height: "50%",
+        svg_data: image_data,
+    })
+}
diff --git a/examples/all-components/src/ds/elements/text.rs b/examples/all-components/src/ds/elements/text.rs
new file mode 100644
index 000000000..f4dc5e876
--- /dev/null
+++ b/examples/all-components/src/ds/elements/text.rs
@@ -0,0 +1,23 @@
+use freya::prelude::*;
+
+static RUST_LOGO: &[u8] = include_bytes!("./rust_logo.png");
+
+#[allow(non_snake_case)]
+pub fn DsText() -> Element {
+    let loremipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+
+    rsx!(paragraph {
+        text{
+            color: "red",
+            {loremipsum}
+        }
+        text{
+            color: "green",
+            {loremipsum}
+        }
+        text{
+            color: "blue",
+            {loremipsum}
+        }
+    })
+}
diff --git a/examples/all-components/src/ds/mod.rs b/examples/all-components/src/ds/mod.rs
new file mode 100644
index 000000000..56cacf6b0
--- /dev/null
+++ b/examples/all-components/src/ds/mod.rs
@@ -0,0 +1,38 @@
+mod components;
+mod elements;
+mod theme;
+
+pub use components::*;
+pub use elements::*;
+pub use theme::*;
+
+use freya::prelude::*;
+
+#[component]
+pub fn DsGui(children: Element) -> Element {
+    let theme_signal = use_init_default_theme();
+
+    rsx!(
+        rect{
+            main_align: "center",
+            cross_align: "center",
+            height: "100%",
+            width: "100%",
+            rect {
+                height: "80%",
+                width: "100%",
+                ThemeProvider {
+                    theme: theme_signal()
+                    {children}
+                }
+            }
+            rect{
+                height: "20%",
+                width: "100%",
+                ThemeEditor{
+                    theme: theme_signal
+                }
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/ds/theme.rs b/examples/all-components/src/ds/theme.rs
new file mode 100644
index 000000000..0e8e14b23
--- /dev/null
+++ b/examples/all-components/src/ds/theme.rs
@@ -0,0 +1,34 @@
+use dioxus_router::{components::Outlet, hooks::use_route};
+use freya::prelude::*;
+
+use crate::{ButtonThemeEditor, Route};
+
+#[component]
+pub fn ThemeEditor(theme: Signal<Theme>) -> Element {
+    let route = use_route::<Route>();
+
+    rsx!(
+        rect {
+            width: "100%",
+            height: "100%",
+            background: "rgb(230, 230, 230)",
+            ScrollView {
+                rect{
+                    padding: "20",
+                    {
+                        match route {
+                            Route::DsButton => {
+                                rsx!(ButtonThemeEditor {theme: theme})
+                            },
+                            _ => rsx!(
+                                label{
+                                    "No theme editor for this component"
+                                }
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/home.rs b/examples/all-components/src/home.rs
new file mode 100644
index 000000000..852699c4e
--- /dev/null
+++ b/examples/all-components/src/home.rs
@@ -0,0 +1,172 @@
+use dioxus_router::prelude::{Outlet, Routable};
+use freya::prelude::*;
+use strum::IntoEnumIterator;
+
+use crate::DsGui;
+
+use super::Route;
+
+#[allow(non_snake_case)]
+pub fn Home() -> Element {
+    rsx!(
+        rect {
+            main_align: "start",
+            padding: "50",
+            background: "rgb(200, 200, 200)",
+            corner_radius: "10",
+            label{
+                font_size: "28",
+                "Welcome to Freya components preview"
+            }
+            rect{
+                height: "10"
+            }
+            label{
+                "Here you can:"
+            }
+            rect{
+                height: "10"
+            }
+            label{
+                "- View all components"
+            }
+            rect{
+                height: "10"
+            }
+            label{
+                "- Play with theming"
+            }
+        }
+    )
+}
+
+#[allow(non_snake_case)]
+pub fn AppSidebar() -> Element {
+    let mut search = use_signal(|| String::default());
+
+    rsx!(
+        NativeRouter {
+            Sidebar {
+                sidebar: rsx!(
+                    Input {
+                        value: search(),
+                        placeholder: "Search...",
+                        onchange: move |e| {
+                             search.set(e)
+                        }
+                    }
+                    for route in Route::iter().filter(|r| r != &Route::PageNotFound {  } ) {
+                        {
+                            let (code, entry_type) = route_entry(route);
+                            if search().is_empty()
+                                || code.map(|c|
+                                    c.to_lowercase().contains(search().to_lowercase().as_str())
+                                ).unwrap_or_default() {
+                                rsx!(
+                                    SideBarEntry {
+                                        route: route,
+                                        code: code,
+                                        entry_type: entry_type
+                                    }
+                                )
+                            }
+                            else {
+                                rsx!()
+                            }
+                        }
+                    }
+                ),
+                Body {
+                    DsGui {
+                        rect {
+                            main_align: "center",
+                            cross_align: "start",
+                            width: "100%",
+                            height: "100%",
+                            padding: "20",
+                            Outlet::<Route> {  }
+                        }
+                    }
+                }
+            }
+        }
+    )
+}
+
+fn route_entry(route: Route) -> (Option<&'static str>, &'static str) {
+    match route {
+        Route::Home => (None, "Welcome"),
+        Route::DsImage => (Some("image"), "element"),
+        Route::DsLabel => (Some("label"), "element"),
+        Route::DsParagraph => (Some("paragraph"), "element"),
+        Route::DsRect => (Some("rect"), "element"),
+        Route::DsSvg => (Some("svg"), "element"),
+        Route::DsText => (Some("text"), "element"),
+        Route::DsAccordion => (Some("Accordion"), "component"),
+        Route::DsActivableRoute => (Some("ActivableRoute"), "component"),
+        Route::DsArrowIcon => (Some("ArrowIcon"), "component"),
+        Route::DsButton => (Some("Button"), "component"),
+        // Route::DsCanvas => (Some("Canvas"), "component"),
+        Route::DsCheckbox => (Some("Checkbox"), "component"),
+        Route::DsCrossIcon => (Some("CrossIcon"), "component"),
+        // Route::DsCursorArea => (Some("CursorArea"), "component"),
+        Route::DsDragProvider => (Some("DragProvider"), "component"),
+        Route::DsDropdown => (Some("Dropdown"), "component"),
+        // Route::DsGestureArea => (Some("GestureArea"), "component"),
+        // Route::DsGraph => (Some("Graph"), "component"),
+        Route::DsInput => (Some("Input"), "component"),
+        // Route::DsKeyboardNavigator => (Some("KeyboardNavigator"), "component"),
+        Route::DsLink => (Some("Link"), "component"),
+        Route::DsLoader => (Some("Loader"), "component"),
+        Route::DsMenu => (Some("Menu"), "component"),
+        // Route::DsMenuButton => (Some("MenuButton"), "component"),
+        // Route::DsNetworkImage => (Some("NetworkImage"), "component"),
+        Route::DsPopup => (Some("Popup"), "component"),
+        Route::DsProgressBar => (Some("ProgressBar"), "component"),
+        Route::DsRadio => (Some("Radio"), "component"),
+        // Route::DsScrollView => (Some("ScrollView"), "component"),
+        // Route::DsScrollBar => (Some("ScrollBar"), "component"),
+        // Route::DsScrollThumb => (Some("ScrollThumb"), "component"),
+        // Route::DsSideBar => (Some("SideBar"), "component"),
+        Route::DsSlider => (Some("Slider"), "component"),
+        Route::DsSnackBar => (Some("SnackBar"), "component"),
+        // Route::DsSubMenu => (Some("SubMenu"), "component"),
+        Route::DsSwitch => (Some("Switch"), "component"),
+        Route::DsTable => (Some("Table"), "component"),
+        Route::DsTickIcon => (Some("TickIcon"), "component"),
+        // Route::DsTile => (Some("Tile"), "component"),
+        Route::DsTooltip => (Some("Tooltip"), "component"),
+        // Route::DsVirtualScrollView => (Some("VirtualScrollView"), "component"),
+        _ => unimplemented!(),
+    }
+}
+
+#[component]
+fn SideBarEntry(route: Route, code: Option<&'static str>, entry_type: &'static str) -> Element {
+    rsx!(
+        Link {
+            to: route,
+            ActivableRoute {
+                route: route,
+                exact: true,
+                SidebarItem {
+                    if let Some(code) = code {
+                        label {
+                            font_style: "mono",
+                            {code}
+                        }
+                        label {
+                            font_size: "11",
+                            {entry_type}
+                        }
+                    }
+                    else {
+                        label {
+                            {entry_type}
+                        }
+                    }
+                },
+            }
+        }
+    )
+}
diff --git a/examples/all-components/src/main.rs b/examples/all-components/src/main.rs
new file mode 100644
index 000000000..9b0566327
--- /dev/null
+++ b/examples/all-components/src/main.rs
@@ -0,0 +1,116 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+mod ds;
+mod home;
+mod not_found;
+
+use dioxus_router::prelude::{Routable, Router};
+use ds::*;
+use freya::prelude::*;
+use home::*;
+use not_found::*;
+use strum::EnumIter;
+
+fn main() {
+    launch_with_props(app, "Freya Components Preview", (800.0, 600.0));
+}
+
+fn app() -> Element {
+    rsx!(Router::<Route> {})
+}
+
+#[derive(Routable, Clone, Copy, PartialEq, EnumIter)]
+#[rustfmt::skip]
+pub enum Route {
+    #[layout(AppSidebar)]
+        #[route("/")]
+        Home,
+        #[nest("/elements")]
+            #[route("/image")]
+            DsImage,
+            #[route("/label")]
+            DsLabel,
+            #[route("/paragraph")]
+            DsParagraph,
+            #[route("/rect")]
+            DsRect,
+            #[route("/svg")]
+            DsSvg,
+            #[route("/text")]
+            DsText,
+        #[end_nest]
+        #[nest("/components")]
+            #[route("/arrow-icon")]
+            DsArrowIcon,
+            #[route("/cross-icon")]
+            DsCrossIcon,
+            #[route("/tick-icon")]
+            DsTickIcon,
+            #[route("/accordion")]
+            DsAccordion,
+            #[route("/activable-route")]
+            DsActivableRoute,
+            #[route("/button")]
+            DsButton,
+            // #[route("/canvas")]
+            // DsCanvas,
+            #[route("/checkbox")]
+            DsCheckbox,
+            // #[route("/cursor-area")]
+            // DsCursorArea,
+            #[route("/drag-provider")]
+            DsDragProvider,
+            #[route("/dropdown")]
+            DsDropdown,
+            // #[route("/gesture-area")]
+            // DsGestureArea,
+            // #[route("/graph")]
+            // DsGraph,
+            #[route("/input")]
+            DsInput,
+            // #[route("/keyboard-navigator")]
+            // DsKeyboardNavigator,
+            #[route("/link")]
+            DsLink,
+            #[route("/loader")]
+            DsLoader,
+            #[route("/menu")]
+            DsMenu,
+            // #[route("/network-image")]
+            // DsNetworkImage,
+            #[route("/popup")]
+            DsPopup,
+            #[route("/progress-bar")]
+            DsProgressBar,
+            #[route("/radio")]
+            DsRadio,
+            // #[route("/scroll-view")]
+            // DsScrollView,
+            // #[route("/scroll-bar")]
+            // DsScrollBar,
+            // #[route("/scroll-thumb")]
+            // DsScrollThumb,
+            // #[route("/side-bar")]
+            // DsSideBar,
+            #[route("/slider")]
+            DsSlider,
+            #[route("/snack-bar")]
+            DsSnackBar,
+            #[route("/switch")]
+            DsSwitch,
+            #[route("/table")]
+            DsTable,
+            // #[route("/tile")]
+            // DsTile,
+            #[route("/tooltip")]
+            DsTooltip,
+            // #[route("/virtual-scorll-view")]
+            // DsVirtualScrollView,
+        #[end_nest]
+    #[end_layout]
+    #[route("/..route")]
+    PageNotFound { },
+}
diff --git a/examples/all-components/src/not_found.rs b/examples/all-components/src/not_found.rs
new file mode 100644
index 000000000..b9d9f80ca
--- /dev/null
+++ b/examples/all-components/src/not_found.rs
@@ -0,0 +1,17 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+#[component]
+pub fn PageNotFound() -> Element {
+    rsx!(
+        label {
+            "Oh, no! Freya doesn't have such component..."
+        }
+        Link{
+            to: "https://github.com/marc2332/freya/",
+            label {
+                "Contribute"
+            }
+        }
+    )
+}