diff --git a/app/javascript/dashboard/components-next/spinner/Spinner.story.vue b/app/javascript/dashboard/components-next/spinner/Spinner.story.vue
new file mode 100644
index 000000000..0031a5dfc
--- /dev/null
+++ b/app/javascript/dashboard/components-next/spinner/Spinner.story.vue
@@ -0,0 +1,15 @@
+<script setup>
+import Spinner from './Spinner.vue';
+</script>
+
+<template>
+  <Story title="Components/Spinner" :layout="{ type: 'grid', width: '400' }">
+    <Variant title="Default">
+      <Spinner size="24" class="text-n-slate-10" />
+      <Spinner size="32" class="text-n-ruby-10" />
+      <Spinner size="40" class="text-n-amber-10" />
+      <Spinner size="48" class="text-n-teal-10" />
+      <Spinner size="64" class="text-n-brand" />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/spinner/Spinner.vue b/app/javascript/dashboard/components-next/spinner/Spinner.vue
new file mode 100644
index 000000000..d1cf8fc42
--- /dev/null
+++ b/app/javascript/dashboard/components-next/spinner/Spinner.vue
@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+  size: {
+    type: Number,
+    default: 24,
+  },
+});
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="8"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    class="animate-spin"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+  </svg>
+</template>