diff --git a/src/index.test.ts b/src/index.test.ts
index 1084bf1..4c2aead 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -51,3 +51,12 @@ describe('getPositionClasses', () => {
     expect(getPositionClasses(Position.BottomLeft)).toBe('bottom-6 left-6');
   });
 });
+
+describe('Custom Classes', () => {
+  it('renders correctly with custom class', () => {
+    const { container } = render(NotificationList, {
+      class: 'custom-class'
+    });
+    expect(container.querySelector('.custom-class')).not.toBeNull();
+  });
+});
diff --git a/src/lib/components/NotificationList.svelte b/src/lib/components/NotificationList.svelte
index cf79602..b428c1c 100644
--- a/src/lib/components/NotificationList.svelte
+++ b/src/lib/components/NotificationList.svelte
@@ -31,6 +31,9 @@
 
   let notificationsList: INotification[] = [];
 
+  let className = '';
+  export { className as class };
+
   export let position: Position = Position.TopRight;
 
   // Use auto-subscriptions to avoid leaking memory on re-renders
@@ -43,7 +46,7 @@
 </script>
 
 <ul
-  class={`fixed p-6 space-y-4 overflow-y-auto max-h-[calc(100vh-54px)] ${getPositionClasses(
+  class={`fixed p-6 space-y-4 overflow-y-auto max-h-[calc(100vh-54px)] ${className} ${getPositionClasses(
     position
   )}`}
   class:z-10={notificationsList?.length}