diff --git a/components/package-lock.json b/components/package-lock.json
index 03b99e7ce..93e710619 100644
--- a/components/package-lock.json
+++ b/components/package-lock.json
@@ -72,7 +72,7 @@
                 "msw": "^2.2.14",
                 "postcss": "^8.4.38",
                 "prettier": "^3.2.5",
-                "react": "^18.3.1",
+                "react": "^19.0.0",
                 "storybook": "^8.0.9",
                 "storybook-addon-fetch-mock": "^2.0.0",
                 "tailwindcss": "^4.0.9",
@@ -3039,6 +3039,43 @@
                 "storybook": "^8.6.14"
             }
         },
+        "node_modules/@storybook/addon-docs/node_modules/react": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+            "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/@storybook/addon-docs/node_modules/react-dom": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+            "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.1.0",
+                "scheduler": "^0.23.2"
+            },
+            "peerDependencies": {
+                "react": "^18.3.1"
+            }
+        },
+        "node_modules/@storybook/addon-docs/node_modules/scheduler": {
+            "version": "0.23.2",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+            "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            }
+        },
         "node_modules/@storybook/addon-essentials": {
             "version": "8.6.14",
             "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.6.14.tgz",
@@ -13681,29 +13718,26 @@
             "license": "MIT"
         },
         "node_modules/react": {
-            "version": "18.3.1",
-            "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-            "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+            "version": "19.0.0",
+            "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
+            "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
             "license": "MIT",
-            "dependencies": {
-                "loose-envify": "^1.1.0"
-            },
             "engines": {
                 "node": ">=0.10.0"
             }
         },
         "node_modules/react-dom": {
-            "version": "18.3.1",
-            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-            "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+            "version": "19.0.0",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
+            "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
-                "loose-envify": "^1.1.0",
-                "scheduler": "^0.23.2"
+                "scheduler": "^0.25.0"
             },
             "peerDependencies": {
-                "react": "^18.3.1"
+                "react": "^19.0.0"
             }
         },
         "node_modules/react-is": {
@@ -14113,14 +14147,12 @@
             "license": "MIT"
         },
         "node_modules/scheduler": {
-            "version": "0.23.2",
-            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-            "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+            "version": "0.25.0",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+            "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
             "dev": true,
             "license": "MIT",
-            "dependencies": {
-                "loose-envify": "^1.1.0"
-            }
+            "peer": true
         },
         "node_modules/secure-compare": {
             "version": "3.0.1",
diff --git a/components/package.json b/components/package.json
index 185e32424..d8bd5e905 100644
--- a/components/package.json
+++ b/components/package.json
@@ -136,7 +136,7 @@
         "msw": "^2.2.14",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
-        "react": "^18.3.1",
+        "react": "^19.0.0",
         "storybook": "^8.0.9",
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^4.0.9",
diff --git a/components/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts b/components/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts
index ec607fe67..3c9bf0e9b 100644
--- a/components/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts
+++ b/components/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts
@@ -8,7 +8,9 @@ import { type useMutationAnnotationsProvider } from '../MutationAnnotationsConte
 import type { DisplayedMutationType } from '../components/mutation-type-selector';
 import type { DisplayedSegment } from '../components/segment-selector';
 
-export const displayMutationsSchema = z.array(z.string());
+export const displayMutationsSchema = z.array(z.string(), {
+    errorMap: () => ({ message: `invalid display mutations` }),
+});
 export type DisplayMutations = z.infer<typeof displayMutationsSchema>;
 
 export type MutationFilter = {
diff --git a/components/src/web-components/gs-app.ts b/components/src/web-components/gs-app.ts
index d4e5a6a84..e5b260dfc 100644
--- a/components/src/web-components/gs-app.ts
+++ b/components/src/web-components/gs-app.ts
@@ -2,7 +2,6 @@ import { provide } from '@lit/context';
 import { Task } from '@lit/task';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 import z from 'zod';
 
 import { lapisContext } from './lapis-context';
@@ -129,9 +128,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-app': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-app': AppComponent;
         }
     }
 }
diff --git a/components/src/web-components/input/gs-date-range-filter.tsx b/components/src/web-components/input/gs-date-range-filter.tsx
index bcdc74ed0..61117a7af 100644
--- a/components/src/web-components/input/gs-date-range-filter.tsx
+++ b/components/src/web-components/input/gs-date-range-filter.tsx
@@ -1,7 +1,6 @@
 import flatpickrStyle from 'flatpickr/dist/flatpickr.css?inline';
 import { unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { DateRangeFilter, type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
 import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeFilter/dateRangeOption';
@@ -144,9 +143,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DateRangeFilterComponent;
         }
     }
 }
diff --git a/components/src/web-components/input/gs-lineage-filter.tsx b/components/src/web-components/input/gs-lineage-filter.tsx
index f92b630b9..48a8456ed 100644
--- a/components/src/web-components/input/gs-lineage-filter.tsx
+++ b/components/src/web-components/input/gs-lineage-filter.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     type LineageFilterChangedEvent,
@@ -146,9 +145,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': LineageFilterComponent;
         }
     }
 }
diff --git a/components/src/web-components/input/gs-location-filter.tsx b/components/src/web-components/input/gs-location-filter.tsx
index 715d7ddd0..eef0a3a0f 100644
--- a/components/src/web-components/input/gs-location-filter.tsx
+++ b/components/src/web-components/input/gs-location-filter.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type LocationChangedEvent } from '../../preact/locationFilter/LocationChangedEvent';
 import { LocationFilter, type LocationFilterProps } from '../../preact/locationFilter/location-filter';
@@ -110,9 +109,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': LocationFilterComponent;
         }
     }
 }
diff --git a/components/src/web-components/input/gs-mutation-filter.tsx b/components/src/web-components/input/gs-mutation-filter.tsx
index de3ef80ed..f5e7454f1 100644
--- a/components/src/web-components/input/gs-mutation-filter.tsx
+++ b/components/src/web-components/input/gs-mutation-filter.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
 import { MutationFilter, type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
@@ -67,7 +66,7 @@ export class MutationFilterComponent extends PreactLitAdapter {
      * All values provided must be valid mutations or insertions.
      * Invalid values will be ignored.
      */
-    @property({type: Object})
+    @property({ type: Object })
     initialValue:
         {
             nucleotideMutations: string[];
@@ -125,9 +124,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': MutationFilterComponent;
         }
     }
 }
diff --git a/components/src/web-components/input/gs-number-range-filter.tsx b/components/src/web-components/input/gs-number-range-filter.tsx
index de789dab8..d15ccf085 100644
--- a/components/src/web-components/input/gs-number-range-filter.tsx
+++ b/components/src/web-components/input/gs-number-range-filter.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     type NumberRangeFilterChangedEvent,
@@ -140,9 +139,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': NumberRangeFilterComponent;
         }
     }
 }
diff --git a/components/src/web-components/input/gs-text-filter.tsx b/components/src/web-components/input/gs-text-filter.tsx
index b7ced0744..bc16a118c 100644
--- a/components/src/web-components/input/gs-text-filter.tsx
+++ b/components/src/web-components/input/gs-text-filter.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type TextFilterChangedEvent } from '../../preact/textFilter/TextFilterChangedEvent';
 import { TextFilter, type TextFilterProps } from '../../preact/textFilter/text-filter';
@@ -100,9 +99,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': TextFilterComponent;
         }
     }
 }
diff --git a/components/src/web-components/mutation-annotations-context.ts b/components/src/web-components/mutation-annotations-context.ts
index d8b35d466..14a917b32 100644
--- a/components/src/web-components/mutation-annotations-context.ts
+++ b/components/src/web-components/mutation-annotations-context.ts
@@ -14,7 +14,9 @@ const mutationAnnotationSchema = z.object({
 });
 export type MutationAnnotation = z.infer<typeof mutationAnnotationSchema>;
 
-export const mutationAnnotationsSchema = z.array(mutationAnnotationSchema);
+export const mutationAnnotationsSchema = z.array(mutationAnnotationSchema, {
+    errorMap: () => ({ message: 'invalid mutation annotations' }),
+});
 export type MutationAnnotations = z.infer<typeof mutationAnnotationsSchema>;
 
 export const mutationAnnotationsContext = createContext<MutationAnnotations>(Symbol('mutation-annotations-context'));
diff --git a/components/src/web-components/visualization/gs-aggregate.tsx b/components/src/web-components/visualization/gs-aggregate.tsx
index 0ad633f4a..d7ab1f252 100644
--- a/components/src/web-components/visualization/gs-aggregate.tsx
+++ b/components/src/web-components/visualization/gs-aggregate.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { Aggregate, type AggregateProps } from '../../preact/aggregatedData/aggregate';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -131,9 +130,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': AggregateComponent;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-genome-data-viewer.tsx b/components/src/web-components/visualization/gs-genome-data-viewer.tsx
index 4db61e3ce..b28e2f763 100644
--- a/components/src/web-components/visualization/gs-genome-data-viewer.tsx
+++ b/components/src/web-components/visualization/gs-genome-data-viewer.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { GenomeDataViewer } from '../../preact/genomeViewer/genome-data-viewer';
 import { PreactLitAdapter } from '../PreactLitAdapter';
@@ -53,9 +52,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': GenomeDataViewerComponent;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-mutation-comparison.tsx b/components/src/web-components/visualization/gs-mutation-comparison.tsx
index 1d10888a8..365df3854 100644
--- a/components/src/web-components/visualization/gs-mutation-comparison.tsx
+++ b/components/src/web-components/visualization/gs-mutation-comparison.tsx
@@ -1,6 +1,5 @@
 import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
@@ -137,9 +136,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison': MutationComparisonComponent;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-mutations-over-time.tsx b/components/src/web-components/visualization/gs-mutations-over-time.tsx
index 1059851e7..98e99b59b 100644
--- a/components/src/web-components/visualization/gs-mutations-over-time.tsx
+++ b/components/src/web-components/visualization/gs-mutations-over-time.tsx
@@ -1,6 +1,5 @@
 import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
@@ -179,9 +178,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': MutationsOverTimeComponent;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-mutations.tsx b/components/src/web-components/visualization/gs-mutations.tsx
index 87ffe3510..a5858c7f9 100644
--- a/components/src/web-components/visualization/gs-mutations.tsx
+++ b/components/src/web-components/visualization/gs-mutations.tsx
@@ -1,6 +1,5 @@
 import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
@@ -88,11 +87,11 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: Object })
     baselineLapisFilter:
         (Record<string, string | string[] | number | null | boolean | undefined> & {
-              nucleotideMutations?: string[];
-              aminoAcidMutations?: string[];
-              nucleotideInsertions?: string[];
-              aminoAcidInsertions?: string[];
-          })
+            nucleotideMutations?: string[];
+            aminoAcidMutations?: string[];
+            nucleotideInsertions?: string[];
+            aminoAcidInsertions?: string[];
+        })
         | undefined = undefined;
 
     /**
@@ -169,9 +168,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': MutationsComponent;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-number-sequences-over-time.tsx b/components/src/web-components/visualization/gs-number-sequences-over-time.tsx
index 74b3bad20..65a7ed67a 100644
--- a/components/src/web-components/visualization/gs-number-sequences-over-time.tsx
+++ b/components/src/web-components/visualization/gs-number-sequences-over-time.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     NumberSequencesOverTime,
@@ -126,9 +125,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-prevalence-over-time.tsx b/components/src/web-components/visualization/gs-prevalence-over-time.tsx
index 2c02eb065..8ede56c1a 100644
--- a/components/src/web-components/visualization/gs-prevalence-over-time.tsx
+++ b/components/src/web-components/visualization/gs-prevalence-over-time.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -193,9 +192,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': PrevalenceOverTimeComponent;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-queries-over-time.tsx b/components/src/web-components/visualization/gs-queries-over-time.tsx
index 6e1c2ba2e..87d1f8747 100644
--- a/components/src/web-components/visualization/gs-queries-over-time.tsx
+++ b/components/src/web-components/visualization/gs-queries-over-time.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { QueriesOverTime } from '../../preact/queriesOverTime/queries-over-time';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
@@ -148,9 +147,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-queries-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-queries-over-time': QueriesOverTimeComponent;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-relative-growth-advantage.tsx b/components/src/web-components/visualization/gs-relative-growth-advantage.tsx
index 692c3bbd4..2e3e17edb 100644
--- a/components/src/web-components/visualization/gs-relative-growth-advantage.tsx
+++ b/components/src/web-components/visualization/gs-relative-growth-advantage.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     RelativeGrowthAdvantage,
@@ -147,9 +146,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-sequences-by-location.tsx b/components/src/web-components/visualization/gs-sequences-by-location.tsx
index f9a5dfbff..261dcb23e 100644
--- a/components/src/web-components/visualization/gs-sequences-by-location.tsx
+++ b/components/src/web-components/visualization/gs-sequences-by-location.tsx
@@ -1,7 +1,6 @@
 import leafletStyle from 'leaflet/dist/leaflet.css?inline';
 import { unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import leafletStyleModifications from '../../preact/sequencesByLocation/leafletStyleModifications.css?inline';
 import {
@@ -219,9 +218,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': SequencesByLocationComponent;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-statistics.tsx b/components/src/web-components/visualization/gs-statistics.tsx
index 0225b0372..7bf504714 100644
--- a/components/src/web-components/visualization/gs-statistics.tsx
+++ b/components/src/web-components/visualization/gs-statistics.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { Statistics, type StatisticsProps } from '../../preact/statistic/statistics';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -76,9 +75,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': StatisticsComponent;
         }
     }
 }
diff --git a/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx b/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx
index 6b8aea8f1..b13fc625a 100644
--- a/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx
+++ b/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx
@@ -1,6 +1,5 @@
 import { consume } from '@lit/context';
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
 import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
@@ -112,9 +111,9 @@ declare global {
 
 declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
+    namespace React.JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
         }
     }
 }
diff --git a/examples/React/package.json b/examples/React/package.json
index c0a4ba91e..3b3893c1e 100644
--- a/examples/React/package.json
+++ b/examples/React/package.json
@@ -10,11 +10,11 @@
     },
     "dependencies": {
         "@genspectrum/dashboard-components": "file:../../components/genspectrum-dashboard-components.tgz",
-        "@types/react": "^18.2.66",
-        "@types/react-dom": "^18.2.22",
-        "@vitejs/plugin-react": "^4.2.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3",
+        "@vitejs/plugin-react": "^4.3.4",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "typescript": "^5.2.2",
         "vite": "^6.2.2"
     }
diff --git a/examples/React/src/App.tsx b/examples/React/src/App.tsx
index 2a642b14f..97b437188 100644
--- a/examples/React/src/App.tsx
+++ b/examples/React/src/App.tsx
@@ -9,8 +9,8 @@ import '@genspectrum/dashboard-components/components';
 
 
 function App() {
-    const locationFilterRef = useRef<HTMLElement>();
-    const dateRangeFilterRef = useRef<HTMLElement>();
+    const locationFilterRef = useRef<HTMLElement>(null);
+    const dateRangeFilterRef = useRef<HTMLElement>(null);
 
     const [location, setLocation] = useState<Record<string, string | undefined>>({
         region: undefined,
@@ -71,9 +71,8 @@ function App() {
     };
 
     const dataRangeOptions = [
-        dateRangeOptionPresets.allTimes,
-        dateRangeOptionPresets.last6Months,
-        dateRangeOptionPresets.lastMonth,
+        dateRangeOptionPresets().last6Months,
+        dateRangeOptionPresets().lastMonth,
         {label: '2020', dateFrom: '2020-01-01', dateTo: '2020-12-31'},
         {label: '2021', dateFrom: '2021-01-01', dateTo: '2021-12-31'},
         {label: '2022', dateFrom: '2022-01-01', dateTo: '2022-12-31'},
@@ -82,14 +81,14 @@ function App() {
     return (
         <gs-app lapis='https://lapis.cov-spectrum.org/open/v2/'>
             <gs-location-filter
-                fields='["region", "country", "division", "location"]'
+                fields={["region", "country", "division", "location"]}
                 placeholderText='Enter a location'
                 ref={locationFilterRef}
-                lapisFilter={JSON.stringify(location)}
-                value={JSON.stringify(location)}
+                lapisFilter={location}
+                value={location}
             ></gs-location-filter>
             <gs-date-range-filter
-                dateRangeOptions={JSON.stringify(dataRangeOptions)}
+                dateRangeOptions={dataRangeOptions}
                 lapisDateField='date'
                 ref={dateRangeFilterRef}
             ></gs-date-range-filter>
@@ -97,12 +96,12 @@ function App() {
                 <div>
                     <h1>Prevalence over time</h1>
                     <gs-prevalence-over-time
-                        numeratorFilters={JSON.stringify([numerator])}
-                        denominatorFilter={JSON.stringify(denominator)}
+                        numeratorFilters={[numerator]}
+                        denominatorFilter={denominator}
                         lapisDateField='date'
                         granularity='day'
-                        smoothingWindow='7'
-                        views='["line", "table"]'
+                        smoothingWindow={7}
+                        views={["line", "table"]}
                         width='800px'
                         height='300px'
                     ></gs-prevalence-over-time>
@@ -110,12 +109,12 @@ function App() {
                 <div style={{height: '300px', width: '1000px'}}>
                     <h1>Prevalence over time</h1>
                     <gs-prevalence-over-time
-                        numeratorFilters={JSON.stringify([numerator])}
-                        denominatorFilter={JSON.stringify(denominator)}
+                        numeratorFilters={[numerator]}
+                        denominatorFilter={denominator}
                         lapisDateField='date'
                         granularity='day'
-                        smoothingWindow='7'
-                        views='["line", "table"]'
+                        smoothingWindow={7}
+                        views={["line", "table"]}
                         width='80%'
                         height='100%'
                     ></gs-prevalence-over-time>
@@ -124,28 +123,28 @@ function App() {
             <h1>Prevalence over time</h1>
             <div>
                 <gs-prevalence-over-time
-                    numeratorFilters={JSON.stringify([numerator])}
-                    denominatorFilter={JSON.stringify(denominator)}
+                    numeratorFilters={[numerator]}
+                    denominatorFilter={denominator}
                     lapisDateField='date'
                     granularity='day'
-                    smoothingWindow='7'
-                    views='["line", "table"]'
+                    smoothingWindow={7}
+                    views={["line", "table"]}
                 ></gs-prevalence-over-time>
             </div>
             <h1>Relative Growth Advantage</h1>
             <gs-relative-growth-advantage
-                numeratorFilter={JSON.stringify(numerator.lapisFilter)}
-                denominatorFilter={JSON.stringify(denominator)}
+                numeratorFilter={numerator.lapisFilter}
+                denominatorFilter={denominator}
                 lapisDateField='date'
-                generationTime='7'
-                views='["line"]'
+                generationTime={7}
+                views={["line"]}
                 width='100%'
                 height='700px'
             ></gs-relative-growth-advantage>
             <gs-mutations-over-time
-                lapisFilter={JSON.stringify(numerator.lapisFilter)}
+                lapisFilter={numerator.lapisFilter}
                 sequenceType='nucleotide'
-                views='["grid"]'
+                views={["grid"]}
                 width='100%'
                 height='700px'
                 granularity='week'