diff --git a/src/CMakeLists.txt b/src/CMakeLists.txt
index ff599cd..ba15ea0 100644
--- a/src/CMakeLists.txt
+++ b/src/CMakeLists.txt
@@ -25,6 +25,9 @@ target_link_libraries(kirigami-testing
     KF6::I18n
     KF6::CoreAddons
     KF6::IconThemes
+    kirigami-testing-components
 )
 
 install(TARGETS kirigami-testing ${KDE_INSTALL_TARGETS_DEFAULT_ARGS})
+
+add_subdirectory(components)
diff --git a/src/Main.qml b/src/Main.qml
index d8477b4..ffd9b14 100644
--- a/src/Main.qml
+++ b/src/Main.qml
@@ -3,6 +3,7 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls as Controls
 import org.kde.kirigami as Kirigami
+import xyz.toast003.kirigamiTesting.components
 
 // Provides basic features needed for all kirigami applications
 Kirigami.ApplicationWindow {
@@ -44,7 +45,7 @@ Kirigami.ApplicationWindow {
         Kirigami.CardsListView {
             id: cardsView
             model: countdownModel
-            delegate: countdownDelegate
+            delegate: CountdownDelegate {}
         }
     }
 
@@ -52,112 +53,7 @@ Kirigami.ApplicationWindow {
         id: countdownModel
     }
 
-    Component {
-        id: countdownDelegate
-        Kirigami.AbstractCard {
-            contentItem: Item {
-                implicitWidth: delegateLayout.implicitWidth
-                implicitHeight: delegateLayout.implicitHeight
-                GridLayout {
-                    id: delegateLayout
-                    anchors {
-                        left: parent.left
-                        top: parent.top
-                        right: parent.right
-                    }
-                    rowSpacing: Kirigami.Units.largeSpacing
-                    columnSpacing: Kirigami.Units.largeSpacing
-                    columns: root.wideScreen ? 4 : 2
-
-                    Kirigami.Heading {
-                        level: 1
-                        text: i18n("%1 days", Math.round((date-Date.now())/86400000))
-                    }
-                    ColumnLayout {
-                        Kirigami.Heading {
-                            Layout.fillWidth: true
-                            level: 2
-                            text: name
-                        }
-                        Kirigami.Separator {
-                            Layout.fillWidth: true
-                            visible: description.length > 0
-                        }
-                        Controls.Label {
-                            Layout.fillWidth: true
-                            wrapMode: Text.WordWrap
-                            text: description
-                            visible: description.length > 0
-                        }
-                    }
-                    Controls.Button {
-                        Layout.alignment: Qt.AlignRight
-                        Layout.columnSpan: 2
-                        text: i18n("Edit")
-                    }
-                }
-            }
-        }
-    }
-
-    Kirigami.Dialog {
+    AddDialog {
         id: addDialog
-        title: i18nc("@title:window", "Add countdown")
-        standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel
-        padding: Kirigami.Units.largeSpacing
-        preferredWidth: Kirigami.Units.gridUnit * 20
-
-        Kirigami.FormLayout {
-            Controls.TextField {
-                id: nameField
-                Kirigami.FormData.label: i18nc("@label:textbox", "Name*:")
-                onAccepted: descriptionField.forceActiveFocus()
-            }
-            Controls.TextField {
-                id: descriptionField
-                Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
-                placeholderText: i18n("Optional")
-                onAccepted: dateField.forceActiveFocus()
-            }
-            Controls.TextField {
-                id: dateField
-                Kirigami.FormData.label: i18nc("@label:textbox", "ISO Date*:")
-                inputMask: "D999-99-99"
-                onAccepted: addDialog.onAccepted()
-            }
-            Controls.Label {
-                text: "* = required fields"
-            }
-        }
-
-        Component.onCompleted: {
-            const button = standardButton(Kirigami.Dialog.Ok);
-            button.enabled = Qt.binding(() => requiredFieldsFilled());
-        }
-
-        function requiredFieldsFilled() {
-            return (nameField.text !== "" && dateField.acceptableInput);
-        }
-
-        function appendDataToModel() {
-            countdownModel.append({
-                name: nameField.text,
-                description: descriptionField.text,
-                date: new Date(dateField.text)
-            });
-        }
-        function clearFieldsAndClose() {
-            nameField.text = "";
-            descriptionField.text = "";
-            dateField.text = "";
-            addDialog.close();
-        }
-
-        onAccepted: {
-            if (!addDialog.requiredFieldsFilled())
-                return;
-            appendDataToModel();
-            clearFieldsAndClose();
-        }
     }
 }
diff --git a/src/components/AddDialog.qml b/src/components/AddDialog.qml
new file mode 100644
index 0000000..b730bfa
--- /dev/null
+++ b/src/components/AddDialog.qml
@@ -0,0 +1,64 @@
+import QtQuick
+import QtQuick.Controls as Controls
+import org.kde.kirigami as Kirigami
+
+Kirigami.Dialog {
+    id: addDialog
+    title: i18nc("@title:window", "Add countdown")
+    standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel
+    padding: Kirigami.Units.largeSpacing
+    preferredWidth: Kirigami.Units.gridUnit * 20
+
+    Kirigami.FormLayout {
+        Controls.TextField {
+            id: nameField
+            Kirigami.FormData.label: i18nc("@label:textbox", "Name*:")
+            onAccepted: descriptionField.forceActiveFocus()
+        }
+        Controls.TextField {
+            id: descriptionField
+            Kirigami.FormData.label: i18nc("@label:textbox", "Description:")
+            placeholderText: i18n("Optional")
+            onAccepted: dateField.forceActiveFocus()
+        }
+        Controls.TextField {
+            id: dateField
+            Kirigami.FormData.label: i18nc("@label:textbox", "ISO Date*:")
+            inputMask: "D999-99-99"
+            onAccepted: addDialog.onAccepted()
+        }
+        Controls.Label {
+            text: "* = required fields"
+        }
+    }
+
+    Component.onCompleted: {
+        const button = standardButton(Kirigami.Dialog.Ok);
+        button.enabled = Qt.binding(() => requiredFieldsFilled());
+    }
+
+    function requiredFieldsFilled() {
+        return (nameField.text !== "" && dateField.acceptableInput);
+    }
+
+    function appendDataToModel() {
+        countdownModel.append({
+            name: nameField.text,
+            description: descriptionField.text,
+            date: new Date(dateField.text)
+        });
+    }
+    function clearFieldsAndClose() {
+        nameField.text = "";
+        descriptionField.text = "";
+        dateField.text = "";
+        addDialog.close();
+    }
+
+    onAccepted: {
+        if (!addDialog.requiredFieldsFilled())
+            return;
+        appendDataToModel();
+        clearFieldsAndClose();
+    }
+}
diff --git a/src/components/CMakeLists.txt b/src/components/CMakeLists.txt
new file mode 100644
index 0000000..61c0bc7
--- /dev/null
+++ b/src/components/CMakeLists.txt
@@ -0,0 +1,16 @@
+add_library(kirigami-testing-components)
+
+ecm_add_qml_module(kirigami-testing-components
+  URI "xyz.toast003.kirigamiTesting.components"
+  GENERATE_PLUGIN_SOURCE
+)
+
+ecm_target_qml_sources(kirigami-testing-components
+  SOURCES
+  AddDialog.qml
+  CountdownDelegate.qml
+)
+
+ecm_finalize_qml_module(kirigami-testing-components)
+
+install(TARGETS kirigami-testing-components ${KDE_INSTALL_TARGETS_DEFAULT_ARGS})
diff --git a/src/components/CountdownDelegate.qml b/src/components/CountdownDelegate.qml
new file mode 100644
index 0000000..2084d22
--- /dev/null
+++ b/src/components/CountdownDelegate.qml
@@ -0,0 +1,49 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls as Controls
+import org.kde.kirigami as Kirigami
+
+Kirigami.AbstractCard {
+    contentItem: Item {
+        implicitWidth: delegateLayout.implicitWidth
+        implicitHeight: delegateLayout.implicitHeight
+        GridLayout {
+            id: delegateLayout
+            anchors {
+                left: parent.left
+                top: parent.top
+                right: parent.right
+            }
+            rowSpacing: Kirigami.Units.largeSpacing
+            columnSpacing: Kirigami.Units.largeSpacing
+            columns: root.wideScreen ? 4 : 2
+
+            Kirigami.Heading {
+                level: 1
+                text: i18n("%1 days", Math.round((date - Date.now()) / 86400000))
+            }
+            ColumnLayout {
+                Kirigami.Heading {
+                    Layout.fillWidth: true
+                    level: 2
+                    text: name
+                }
+                Kirigami.Separator {
+                    Layout.fillWidth: true
+                    visible: description.length > 0
+                }
+                Controls.Label {
+                    Layout.fillWidth: true
+                    wrapMode: Text.WordWrap
+                    text: description
+                    visible: description.length > 0
+                }
+            }
+            Controls.Button {
+                Layout.alignment: Qt.AlignRight
+                Layout.columnSpan: 2
+                text: i18n("Edit")
+            }
+        }
+    }
+}