diff --git a/nicegui/elements/expansion.js b/nicegui/elements/expansion.js
new file mode 100644
index 000000000..c689b8916
--- /dev/null
+++ b/nicegui/elements/expansion.js
@@ -0,0 +1,18 @@
+export default {
+  template: `
+    <q-expansion-item ref="qRef">
+      <template v-for="(_, name) in nonDefaultSlots" :key="name" v-slot:[name]="slotProps">
+        <slot :name="name" v-bind="slotProps || {}" />
+      </template>
+      <div class="nicegui-expansion-content">
+        <slot></slot>
+      </div>
+    </q-expansion-item>
+  `,
+  computed: {
+    nonDefaultSlots() {
+      const { default: _, ...rest } = this.$slots;
+      return rest;
+    },
+  },
+};
diff --git a/nicegui/elements/expansion.py b/nicegui/elements/expansion.py
index 7a4e6c86b..c28196d20 100644
--- a/nicegui/elements/expansion.py
+++ b/nicegui/elements/expansion.py
@@ -8,7 +8,8 @@
 from .mixins.value_element import ValueElement
 
 
-class Expansion(IconElement, TextElement, ValueElement, DisableableElement, default_classes='nicegui-expansion'):
+class Expansion(IconElement, TextElement, ValueElement, DisableableElement,
+                component='expansion.js', default_classes='nicegui-expansion'):
 
     @resolve_defaults
     def __init__(self,
@@ -30,7 +31,7 @@ def __init__(self,
         :param value: whether the expansion should be opened on creation (default: `False`)
         :param on_value_change: callback to execute when value changes
         """
-        super().__init__(tag='q-expansion-item', icon=icon, text=text, value=value, on_value_change=on_value_change)
+        super().__init__(icon=icon, text=text, value=value, on_value_change=on_value_change)
         self._props.set_optional('caption', caption)
         self._props.set_optional('group', group)
 
diff --git a/nicegui/static/nicegui.css b/nicegui/static/nicegui.css
index e72eda655..9d1ab091f 100644
--- a/nicegui/static/nicegui.css
+++ b/nicegui/static/nicegui.css
@@ -18,7 +18,7 @@
 .nicegui-tab-panel,
 .nicegui-card,
 .nicegui-carousel-slide,
-.nicegui-expansion .q-expansion-item__content,
+.nicegui-expansion-content,
 .nicegui-scroll-area .q-scrollarea__content {
   display: flex;
   flex-direction: column;
@@ -66,15 +66,6 @@
   gap: 8px;
 }
 
-/* HACK: avoid stutter when expansion item is toggled */
-.nicegui-expansion .q-expansion-item__content {
-  padding: 0 var(--nicegui-default-padding);
-}
-.nicegui-expansion .q-expansion-item__content::before,
-.nicegui-expansion .q-expansion-item__content::after {
-  content: ""; /* the gap compensates for the missing vertical padding */
-}
-
 /* revert Tailwind's CSS reset for ui.editor and ui.markdown */
 .nicegui-editor .q-editor__content h1,
 .nicegui-markdown h1 {