diff --git a/packages/web-react/README.md b/packages/web-react/README.md
index fbe19f73d0..64721067d2 100644
--- a/packages/web-react/README.md
+++ b/packages/web-react/README.md
@@ -4,6 +4,7 @@
 [![minified + gzip](https://badgen.net/bundlephobia/minzip/@lmc-eu/spirit-web-react)](https://bundlephobia.com/package/@lmc-eu/spirit-web-react)
 [![dependency count](https://badgen.net/bundlephobia/dependency-count/@lmc-eu/spirit-web-react)](https://bundlephobia.com/package/@lmc-eu/spirit-web-react)
 [![tree shaking](https://badgen.net/bundlephobia/tree-shaking/@lmc-eu/spirit-web-react)](https://bundlephobia.com/package/@lmc-eu/spirit-web-react)
+[![client components](https://badgen.net/badge/client%20components/supported/green)](https://bundlephobia.com/package/@lmc-eu/spirit-web-react)
 
 > React implementation of Spirit Design System components.
 
diff --git a/packages/web-react/src/components/Accordion/Accordion.tsx b/packages/web-react/src/components/Accordion/Accordion.tsx
index 89522afffd..0f60ec03c6 100644
--- a/packages/web-react/src/components/Accordion/Accordion.tsx
+++ b/packages/web-react/src/components/Accordion/Accordion.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Accordion/AccordionContent.tsx b/packages/web-react/src/components/Accordion/AccordionContent.tsx
index ba4628c45b..1a93ed5c27 100644
--- a/packages/web-react/src/components/Accordion/AccordionContent.tsx
+++ b/packages/web-react/src/components/Accordion/AccordionContent.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Accordion/AccordionContext.ts b/packages/web-react/src/components/Accordion/AccordionContext.ts
index 3658a9e774..5845a474d4 100644
--- a/packages/web-react/src/components/Accordion/AccordionContext.ts
+++ b/packages/web-react/src/components/Accordion/AccordionContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import { AccordionHandlingProps } from '../../types';
 
diff --git a/packages/web-react/src/components/Accordion/AccordionHeader.tsx b/packages/web-react/src/components/Accordion/AccordionHeader.tsx
index 751a8ca0b8..462e2560f7 100644
--- a/packages/web-react/src/components/Accordion/AccordionHeader.tsx
+++ b/packages/web-react/src/components/Accordion/AccordionHeader.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Accordion/AccordionItem.tsx b/packages/web-react/src/components/Accordion/AccordionItem.tsx
index 33f9ad0d97..678d454238 100644
--- a/packages/web-react/src/components/Accordion/AccordionItem.tsx
+++ b/packages/web-react/src/components/Accordion/AccordionItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Accordion/AccordionItemContext.ts b/packages/web-react/src/components/Accordion/AccordionItemContext.ts
index 6c45c18ecd..adb45d4ac2 100644
--- a/packages/web-react/src/components/Accordion/AccordionItemContext.ts
+++ b/packages/web-react/src/components/Accordion/AccordionItemContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import { AccordionItemContextProps } from '../../types';
 
diff --git a/packages/web-react/src/components/Accordion/UncontrolledAccordion.tsx b/packages/web-react/src/components/Accordion/UncontrolledAccordion.tsx
index d0a30c1475..f06322eed9 100644
--- a/packages/web-react/src/components/Accordion/UncontrolledAccordion.tsx
+++ b/packages/web-react/src/components/Accordion/UncontrolledAccordion.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { UncontrolledAccordionProps } from '../../types';
 import Accordion from './Accordion';
diff --git a/packages/web-react/src/components/Accordion/index.ts b/packages/web-react/src/components/Accordion/index.ts
index 36ccda1c11..6ed2507026 100644
--- a/packages/web-react/src/components/Accordion/index.ts
+++ b/packages/web-react/src/components/Accordion/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Accordion';
 export * from './AccordionItem';
 export * from './AccordionHeader';
diff --git a/packages/web-react/src/components/Alert/Alert.tsx b/packages/web-react/src/components/Alert/Alert.tsx
index 173ae4eb7c..250471e964 100644
--- a/packages/web-react/src/components/Alert/Alert.tsx
+++ b/packages/web-react/src/components/Alert/Alert.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Alert/index.ts b/packages/web-react/src/components/Alert/index.ts
index c60c1dd8c3..e5c3cb5b5b 100644
--- a/packages/web-react/src/components/Alert/index.ts
+++ b/packages/web-react/src/components/Alert/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Alert';
 export * from './useAlertStyleProps';
 export { default as Alert } from './Alert';
diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx
index ca917038d5..08685e20d2 100644
--- a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, Fragment } from 'react';
 import { useStyleProps } from '../../hooks/styleProps';
diff --git a/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx
index 88b8ff4bc3..4f0dbc1e5a 100644
--- a/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx
+++ b/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Breadcrumbs/index.ts b/packages/web-react/src/components/Breadcrumbs/index.ts
index 42d55bb34d..90c6f61beb 100644
--- a/packages/web-react/src/components/Breadcrumbs/index.ts
+++ b/packages/web-react/src/components/Breadcrumbs/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Breadcrumbs';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export * from './BreadcrumbsItem';
diff --git a/packages/web-react/src/components/Button/Button.tsx b/packages/web-react/src/components/Button/Button.tsx
index ee373f30e0..1064144d82 100644
--- a/packages/web-react/src/components/Button/Button.tsx
+++ b/packages/web-react/src/components/Button/Button.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Button/index.ts b/packages/web-react/src/components/Button/index.ts
index 5c3d5e9bb6..0c9871f0c7 100644
--- a/packages/web-react/src/components/Button/index.ts
+++ b/packages/web-react/src/components/Button/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Button';
 export * from './useButtonAriaProps';
 export * from './useButtonStyleProps';
diff --git a/packages/web-react/src/components/ButtonLink/ButtonLink.tsx b/packages/web-react/src/components/ButtonLink/ButtonLink.tsx
index 7a812fad49..ce6c0f9738 100644
--- a/packages/web-react/src/components/ButtonLink/ButtonLink.tsx
+++ b/packages/web-react/src/components/ButtonLink/ButtonLink.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/ButtonLink/index.ts b/packages/web-react/src/components/ButtonLink/index.ts
index 34d245a938..2af3377499 100644
--- a/packages/web-react/src/components/ButtonLink/index.ts
+++ b/packages/web-react/src/components/ButtonLink/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './ButtonLink';
 export * from './useButtonLinkAriaProps';
 export * from './useButtonLinkStyleProps';
diff --git a/packages/web-react/src/components/Checkbox/Checkbox.tsx b/packages/web-react/src/components/Checkbox/Checkbox.tsx
index 2bfb1d67ca..ae7639d8c2 100644
--- a/packages/web-react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/web-react/src/components/Checkbox/Checkbox.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { forwardRef, ForwardedRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Checkbox/index.ts b/packages/web-react/src/components/Checkbox/index.ts
index 01df9aa336..91d03f50cb 100644
--- a/packages/web-react/src/components/Checkbox/index.ts
+++ b/packages/web-react/src/components/Checkbox/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Checkbox';
 export * from './useCheckboxStyleProps';
 export { default as Checkbox } from './Checkbox';
diff --git a/packages/web-react/src/components/Collapse/Collapse.tsx b/packages/web-react/src/components/Collapse/Collapse.tsx
index b9c9505f1c..97474aedde 100644
--- a/packages/web-react/src/components/Collapse/Collapse.tsx
+++ b/packages/web-react/src/components/Collapse/Collapse.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { MutableRefObject, useRef } from 'react';
 import { Transition, TransitionStatus } from 'react-transition-group';
diff --git a/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx b/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx
index 68213c794f..5e143f69d7 100644
--- a/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx
+++ b/packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { SpiritUncontrolledCollapseProps } from '../../types';
 import Collapse from './Collapse';
diff --git a/packages/web-react/src/components/Collapse/index.ts b/packages/web-react/src/components/Collapse/index.ts
index a5e024915e..a90fae48a7 100644
--- a/packages/web-react/src/components/Collapse/index.ts
+++ b/packages/web-react/src/components/Collapse/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Collapse';
 export { default as Collapse } from './Collapse';
 export * from './UncontrolledCollapse';
diff --git a/packages/web-react/src/components/Container/Container.tsx b/packages/web-react/src/components/Container/Container.tsx
index 713ff4058d..a7de97042e 100644
--- a/packages/web-react/src/components/Container/Container.tsx
+++ b/packages/web-react/src/components/Container/Container.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks/styleProps';
diff --git a/packages/web-react/src/components/Container/index.ts b/packages/web-react/src/components/Container/index.ts
index 3b0b87d71a..7664fd309d 100644
--- a/packages/web-react/src/components/Container/index.ts
+++ b/packages/web-react/src/components/Container/index.ts
@@ -1,2 +1,4 @@
+'use client';
+
 export * from './Container';
 export { default as Container } from './Container';
diff --git a/packages/web-react/src/components/Dialog/Dialog.tsx b/packages/web-react/src/components/Dialog/Dialog.tsx
index 80828a7f7b..1a43ee6de6 100644
--- a/packages/web-react/src/components/Dialog/Dialog.tsx
+++ b/packages/web-react/src/components/Dialog/Dialog.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useRef, MutableRefObject, Children, cloneElement, forwardRef, ReactElement, ForwardedRef } from 'react';
 import { useCancelEvent, useClickOutside } from '../../hooks';
 import { DialogProps } from '../../types';
diff --git a/packages/web-react/src/components/Dialog/index.ts b/packages/web-react/src/components/Dialog/index.ts
index 18f5025cac..68a1082b3d 100644
--- a/packages/web-react/src/components/Dialog/index.ts
+++ b/packages/web-react/src/components/Dialog/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Dialog';
 export { default as Dialog } from './Dialog';
 export * from './useDialog';
diff --git a/packages/web-react/src/components/Divider/Divider.tsx b/packages/web-react/src/components/Divider/Divider.tsx
index d0aa10d659..119f6cdaf3 100644
--- a/packages/web-react/src/components/Divider/Divider.tsx
+++ b/packages/web-react/src/components/Divider/Divider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Divider/index.ts b/packages/web-react/src/components/Divider/index.ts
index 9e695083af..dcf3a16eeb 100644
--- a/packages/web-react/src/components/Divider/index.ts
+++ b/packages/web-react/src/components/Divider/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Divider';
 export * from './useDividerStyleProps';
 export { default as Divider } from './Divider';
diff --git a/packages/web-react/src/components/Dropdown/Dropdown.tsx b/packages/web-react/src/components/Dropdown/Dropdown.tsx
index fa693a5f84..3f7d61e512 100644
--- a/packages/web-react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/web-react/src/components/Dropdown/Dropdown.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useRef } from 'react';
 import { useClickOutside, useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Dropdown/DropdownContext.ts b/packages/web-react/src/components/Dropdown/DropdownContext.ts
index 663fa427b9..2c3df06050 100644
--- a/packages/web-react/src/components/Dropdown/DropdownContext.ts
+++ b/packages/web-react/src/components/Dropdown/DropdownContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { MutableRefObject, createContext, useContext } from 'react';
 import { Placements } from '../../constants';
 import { ClickEvent, PlacementDictionaryType } from '../../types';
diff --git a/packages/web-react/src/components/Dropdown/DropdownPopover.tsx b/packages/web-react/src/components/Dropdown/DropdownPopover.tsx
index 3d12941e13..2b3ba71d53 100644
--- a/packages/web-react/src/components/Dropdown/DropdownPopover.tsx
+++ b/packages/web-react/src/components/Dropdown/DropdownPopover.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx b/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx
index deffc66995..15682ef20a 100644
--- a/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx
+++ b/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Dropdown/UncontrolledDropdown.tsx b/packages/web-react/src/components/Dropdown/UncontrolledDropdown.tsx
index a11394f292..2f186a4bf2 100644
--- a/packages/web-react/src/components/Dropdown/UncontrolledDropdown.tsx
+++ b/packages/web-react/src/components/Dropdown/UncontrolledDropdown.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Dropdown/index.ts b/packages/web-react/src/components/Dropdown/index.ts
index 6aab864de8..a78b385c0a 100644
--- a/packages/web-react/src/components/Dropdown/index.ts
+++ b/packages/web-react/src/components/Dropdown/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export { default as Dropdown } from './Dropdown';
 export { default as DropdownTrigger } from './DropdownTrigger';
 export { default as DropdownPopover } from './DropdownPopover';
diff --git a/packages/web-react/src/components/Field/HelperText.tsx b/packages/web-react/src/components/Field/HelperText.tsx
index d99b69e7e0..65670294a1 100644
--- a/packages/web-react/src/components/Field/HelperText.tsx
+++ b/packages/web-react/src/components/Field/HelperText.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ElementType, useEffect } from 'react';
 import { HelperTextProps } from './types';
 
diff --git a/packages/web-react/src/components/Field/ValidationText.tsx b/packages/web-react/src/components/Field/ValidationText.tsx
index d4ec8bbc9c..c5c5575a96 100644
--- a/packages/web-react/src/components/Field/ValidationText.tsx
+++ b/packages/web-react/src/components/Field/ValidationText.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ElementType, useEffect } from 'react';
 import { ValidationTextProps } from './types';
 
diff --git a/packages/web-react/src/components/Field/index.ts b/packages/web-react/src/components/Field/index.ts
index ac154f6db9..1e314c4724 100644
--- a/packages/web-react/src/components/Field/index.ts
+++ b/packages/web-react/src/components/Field/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './HelperText';
 export * from './useAriaIds';
 export * from './ValidationText';
diff --git a/packages/web-react/src/components/FieldGroup/FieldGroup.tsx b/packages/web-react/src/components/FieldGroup/FieldGroup.tsx
index ca765fcf8f..55eb4600e7 100644
--- a/packages/web-react/src/components/FieldGroup/FieldGroup.tsx
+++ b/packages/web-react/src/components/FieldGroup/FieldGroup.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/FieldGroup/index.ts b/packages/web-react/src/components/FieldGroup/index.ts
index e14d37fe12..daf0d49fda 100644
--- a/packages/web-react/src/components/FieldGroup/index.ts
+++ b/packages/web-react/src/components/FieldGroup/index.ts
@@ -1,2 +1,4 @@
+'use client';
+
 export * from './FieldGroup';
 export { default as FieldGroup } from './FieldGroup';
diff --git a/packages/web-react/src/components/FileUploader/AttachmentActionButton.tsx b/packages/web-react/src/components/FileUploader/AttachmentActionButton.tsx
index 756d98959e..dfaa8308e1 100644
--- a/packages/web-react/src/components/FileUploader/AttachmentActionButton.tsx
+++ b/packages/web-react/src/components/FileUploader/AttachmentActionButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/FileUploader/AttachmentDismissButton.tsx b/packages/web-react/src/components/FileUploader/AttachmentDismissButton.tsx
index 88048e2bdc..f7fad421c0 100644
--- a/packages/web-react/src/components/FileUploader/AttachmentDismissButton.tsx
+++ b/packages/web-react/src/components/FileUploader/AttachmentDismissButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx b/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx
index a1612c62b0..b6fcbe0968 100644
--- a/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx
+++ b/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { FileMetadata } from '../../types/fileUploader';
 import { IMAGE_DIMENSION } from './constants';
diff --git a/packages/web-react/src/components/FileUploader/FileUploader.tsx b/packages/web-react/src/components/FileUploader/FileUploader.tsx
index 006eaff903..888833c671 100644
--- a/packages/web-react/src/components/FileUploader/FileUploader.tsx
+++ b/packages/web-react/src/components/FileUploader/FileUploader.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
index b6fa6c18dd..a08ad5fbfd 100644
--- a/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
+++ b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { MouseEvent, RefObject, useRef, useState } from 'react';
 import { useClassNamePrefix, useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/FileUploader/FileUploaderContext.ts b/packages/web-react/src/components/FileUploader/FileUploaderContext.ts
index 23dcc96fcf..6002db3be6 100644
--- a/packages/web-react/src/components/FileUploader/FileUploaderContext.ts
+++ b/packages/web-react/src/components/FileUploader/FileUploaderContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import { FileUploaderHandlingProps, FileUploaderErrorMessagesProps } from '../../types';
 
diff --git a/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx b/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx
index 98f0f9e1f3..ded9912949 100644
--- a/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx
+++ b/packages/web-react/src/components/FileUploader/FileUploaderInput.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useDeprecationMessage, useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/FileUploader/FileUploaderList.tsx b/packages/web-react/src/components/FileUploader/FileUploaderList.tsx
index 771d15ede7..75d12e568b 100644
--- a/packages/web-react/src/components/FileUploader/FileUploaderList.tsx
+++ b/packages/web-react/src/components/FileUploader/FileUploaderList.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/FileUploader/UncontrolledFileUploader.tsx b/packages/web-react/src/components/FileUploader/UncontrolledFileUploader.tsx
index ef6ec5cd7a..bd4d548d55 100644
--- a/packages/web-react/src/components/FileUploader/UncontrolledFileUploader.tsx
+++ b/packages/web-react/src/components/FileUploader/UncontrolledFileUploader.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect } from 'react';
 import { SpiritUncontrolledFileUploaderProps } from '../../types';
 import FileUploader from './FileUploader';
diff --git a/packages/web-react/src/components/FileUploader/index.ts b/packages/web-react/src/components/FileUploader/index.ts
index 5a285f7522..a9319301bb 100644
--- a/packages/web-react/src/components/FileUploader/index.ts
+++ b/packages/web-react/src/components/FileUploader/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export { default as FileUploader } from './FileUploader';
 export { default as FileUploaderInput } from './FileUploaderInput';
 export { default as FileUploaderList } from './FileUploaderList';
diff --git a/packages/web-react/src/components/Grid/Grid.tsx b/packages/web-react/src/components/Grid/Grid.tsx
index 6bfb2bfc4d..7b684d2914 100644
--- a/packages/web-react/src/components/Grid/Grid.tsx
+++ b/packages/web-react/src/components/Grid/Grid.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Grid/GridItem.tsx b/packages/web-react/src/components/Grid/GridItem.tsx
index 851b34bbe1..5e91b42610 100644
--- a/packages/web-react/src/components/Grid/GridItem.tsx
+++ b/packages/web-react/src/components/Grid/GridItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Grid/index.ts b/packages/web-react/src/components/Grid/index.ts
index b47b7b61d5..222d4ee757 100644
--- a/packages/web-react/src/components/Grid/index.ts
+++ b/packages/web-react/src/components/Grid/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Grid';
 export * from './GridItem';
 export * from './useGridStyleProps';
diff --git a/packages/web-react/src/components/Header/Header.tsx b/packages/web-react/src/components/Header/Header.tsx
index ee43a7661f..b37824f0db 100644
--- a/packages/web-react/src/components/Header/Header.tsx
+++ b/packages/web-react/src/components/Header/Header.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderButton.tsx b/packages/web-react/src/components/Header/HeaderButton.tsx
index 4e98f7e58c..fd113e772e 100644
--- a/packages/web-react/src/components/Header/HeaderButton.tsx
+++ b/packages/web-react/src/components/Header/HeaderButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderDesktopActions.tsx b/packages/web-react/src/components/Header/HeaderDesktopActions.tsx
index f91844fdc3..dd75ea2e40 100644
--- a/packages/web-react/src/components/Header/HeaderDesktopActions.tsx
+++ b/packages/web-react/src/components/Header/HeaderDesktopActions.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderDialog.tsx b/packages/web-react/src/components/Header/HeaderDialog.tsx
index 22bcfdd555..cf7e1cfedd 100644
--- a/packages/web-react/src/components/Header/HeaderDialog.tsx
+++ b/packages/web-react/src/components/Header/HeaderDialog.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps, useLastActiveFocus } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderDialogActions.tsx b/packages/web-react/src/components/Header/HeaderDialogActions.tsx
index 6fbf43e37d..b149970336 100644
--- a/packages/web-react/src/components/Header/HeaderDialogActions.tsx
+++ b/packages/web-react/src/components/Header/HeaderDialogActions.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderDialogButton.tsx b/packages/web-react/src/components/Header/HeaderDialogButton.tsx
index f077442988..7a6f27f07d 100644
--- a/packages/web-react/src/components/Header/HeaderDialogButton.tsx
+++ b/packages/web-react/src/components/Header/HeaderDialogButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx b/packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx
index f947b7bec3..cc60787382 100644
--- a/packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx
+++ b/packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderDialogContext.ts b/packages/web-react/src/components/Header/HeaderDialogContext.ts
index f19c001e3e..3812fdddf6 100644
--- a/packages/web-react/src/components/Header/HeaderDialogContext.ts
+++ b/packages/web-react/src/components/Header/HeaderDialogContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import { ClickEvent } from '../../types';
 
diff --git a/packages/web-react/src/components/Header/HeaderDialogLink.tsx b/packages/web-react/src/components/Header/HeaderDialogLink.tsx
index 9b1ecfa9d4..01cbdbd6d7 100644
--- a/packages/web-react/src/components/Header/HeaderDialogLink.tsx
+++ b/packages/web-react/src/components/Header/HeaderDialogLink.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderDialogNav.tsx b/packages/web-react/src/components/Header/HeaderDialogNav.tsx
index 67e2c40dfb..4b5e4374e0 100644
--- a/packages/web-react/src/components/Header/HeaderDialogNav.tsx
+++ b/packages/web-react/src/components/Header/HeaderDialogNav.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderDialogNavItem.tsx b/packages/web-react/src/components/Header/HeaderDialogNavItem.tsx
index 88ed6f3dea..0848b7514b 100644
--- a/packages/web-react/src/components/Header/HeaderDialogNavItem.tsx
+++ b/packages/web-react/src/components/Header/HeaderDialogNavItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderDialogText.tsx b/packages/web-react/src/components/Header/HeaderDialogText.tsx
index 4957f07279..f625776b20 100644
--- a/packages/web-react/src/components/Header/HeaderDialogText.tsx
+++ b/packages/web-react/src/components/Header/HeaderDialogText.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderLink.tsx b/packages/web-react/src/components/Header/HeaderLink.tsx
index c0d3c0b337..7f351f17d7 100644
--- a/packages/web-react/src/components/Header/HeaderLink.tsx
+++ b/packages/web-react/src/components/Header/HeaderLink.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderMobileActions.tsx b/packages/web-react/src/components/Header/HeaderMobileActions.tsx
index cc0920ef3d..b1acd66ff4 100644
--- a/packages/web-react/src/components/Header/HeaderMobileActions.tsx
+++ b/packages/web-react/src/components/Header/HeaderMobileActions.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderNav.tsx b/packages/web-react/src/components/Header/HeaderNav.tsx
index 01e7f33b00..a375553313 100644
--- a/packages/web-react/src/components/Header/HeaderNav.tsx
+++ b/packages/web-react/src/components/Header/HeaderNav.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/HeaderNavItem.tsx b/packages/web-react/src/components/Header/HeaderNavItem.tsx
index e0feab4fb9..cd97f22421 100644
--- a/packages/web-react/src/components/Header/HeaderNavItem.tsx
+++ b/packages/web-react/src/components/Header/HeaderNavItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Header/index.ts b/packages/web-react/src/components/Header/index.ts
index 049c185f4a..ee25e27fc6 100644
--- a/packages/web-react/src/components/Header/index.ts
+++ b/packages/web-react/src/components/Header/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export { default as Header } from './Header';
 export { default as HeaderButton } from './HeaderButton';
 export { default as HeaderDesktopActions } from './HeaderDesktopActions';
diff --git a/packages/web-react/src/components/Heading/Heading.tsx b/packages/web-react/src/components/Heading/Heading.tsx
index aa5d30b7e0..8a32fa7626 100644
--- a/packages/web-react/src/components/Heading/Heading.tsx
+++ b/packages/web-react/src/components/Heading/Heading.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Heading/index.ts b/packages/web-react/src/components/Heading/index.ts
index f6a6b1a6e7..4e2d83ef75 100644
--- a/packages/web-react/src/components/Heading/index.ts
+++ b/packages/web-react/src/components/Heading/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Heading';
 export * from './useHeadingStyleProps';
 export { default as Heading } from './Heading';
diff --git a/packages/web-react/src/components/Icon/Icon.tsx b/packages/web-react/src/components/Icon/Icon.tsx
index 0c3408955f..6379c40605 100644
--- a/packages/web-react/src/components/Icon/Icon.tsx
+++ b/packages/web-react/src/components/Icon/Icon.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ForwardedRef, forwardRef } from 'react';
 import { useIcon, useStyleProps } from '../../hooks';
 import { IconProps } from '../../types';
diff --git a/packages/web-react/src/components/Icon/index.ts b/packages/web-react/src/components/Icon/index.ts
index ac2ed84c78..dc71fc446a 100644
--- a/packages/web-react/src/components/Icon/index.ts
+++ b/packages/web-react/src/components/Icon/index.ts
@@ -1,2 +1,4 @@
+'use client';
+
 export * from './Icon';
 export { default as Icon } from './Icon';
diff --git a/packages/web-react/src/components/Item/Item.tsx b/packages/web-react/src/components/Item/Item.tsx
index 4e1cf54f1a..88c1b96ec6 100644
--- a/packages/web-react/src/components/Item/Item.tsx
+++ b/packages/web-react/src/components/Item/Item.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Item/index.ts b/packages/web-react/src/components/Item/index.ts
index 48b1344c68..b95632b1d2 100644
--- a/packages/web-react/src/components/Item/index.ts
+++ b/packages/web-react/src/components/Item/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Item';
 export * from './useItemStyleProps';
 export { default as Item } from './Item';
diff --git a/packages/web-react/src/components/Link/Link.tsx b/packages/web-react/src/components/Link/Link.tsx
index ec41f36e71..8c3bc78ebb 100644
--- a/packages/web-react/src/components/Link/Link.tsx
+++ b/packages/web-react/src/components/Link/Link.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Link/index.ts b/packages/web-react/src/components/Link/index.ts
index 6c2729db12..d83dfca040 100644
--- a/packages/web-react/src/components/Link/index.ts
+++ b/packages/web-react/src/components/Link/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Link';
 export * from './useLinkStyleProps';
 export { default as Link } from './Link';
diff --git a/packages/web-react/src/components/Modal/Modal.tsx b/packages/web-react/src/components/Modal/Modal.tsx
index 6b97e26c01..a93358e160 100644
--- a/packages/web-react/src/components/Modal/Modal.tsx
+++ b/packages/web-react/src/components/Modal/Modal.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { AlignmentY } from '../../constants';
diff --git a/packages/web-react/src/components/Modal/ModalBody.tsx b/packages/web-react/src/components/Modal/ModalBody.tsx
index 1e0956abd9..7d1b80bd3f 100644
--- a/packages/web-react/src/components/Modal/ModalBody.tsx
+++ b/packages/web-react/src/components/Modal/ModalBody.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Modal/ModalCloseButton.tsx b/packages/web-react/src/components/Modal/ModalCloseButton.tsx
index 2489a18b93..0a65cb124c 100644
--- a/packages/web-react/src/components/Modal/ModalCloseButton.tsx
+++ b/packages/web-react/src/components/Modal/ModalCloseButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { ModalCloseButtonProps } from '../../types';
 import { Button } from '../Button';
diff --git a/packages/web-react/src/components/Modal/ModalContext.ts b/packages/web-react/src/components/Modal/ModalContext.ts
index abd1e835a1..209b65928d 100644
--- a/packages/web-react/src/components/Modal/ModalContext.ts
+++ b/packages/web-react/src/components/Modal/ModalContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import { ModalDialogHandlingProps } from '../../types';
 
diff --git a/packages/web-react/src/components/Modal/ModalDialog.tsx b/packages/web-react/src/components/Modal/ModalDialog.tsx
index e7cb8ba592..9848c798ad 100644
--- a/packages/web-react/src/components/Modal/ModalDialog.tsx
+++ b/packages/web-react/src/components/Modal/ModalDialog.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, ForwardedRef, forwardRef, HTMLAttributes } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Modal/ModalFooter.tsx b/packages/web-react/src/components/Modal/ModalFooter.tsx
index fff9c90d94..4e0af7c43e 100644
--- a/packages/web-react/src/components/Modal/ModalFooter.tsx
+++ b/packages/web-react/src/components/Modal/ModalFooter.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { AlignmentX } from '../../constants';
diff --git a/packages/web-react/src/components/Modal/ModalHeader.tsx b/packages/web-react/src/components/Modal/ModalHeader.tsx
index b2aa65d73d..45dfa30194 100644
--- a/packages/web-react/src/components/Modal/ModalHeader.tsx
+++ b/packages/web-react/src/components/Modal/ModalHeader.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Modal/index.ts b/packages/web-react/src/components/Modal/index.ts
index d074b7372c..efbaba0495 100644
--- a/packages/web-react/src/components/Modal/index.ts
+++ b/packages/web-react/src/components/Modal/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export { default as Modal } from './Modal';
 export { default as ModalBody } from './ModalBody';
 export { default as ModalCloseButton } from './ModalCloseButton';
diff --git a/packages/web-react/src/components/NoSsr/NoSsr.tsx b/packages/web-react/src/components/NoSsr/NoSsr.tsx
index 57eeeedc90..f666a8fcc3 100644
--- a/packages/web-react/src/components/NoSsr/NoSsr.tsx
+++ b/packages/web-react/src/components/NoSsr/NoSsr.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 import { ChildrenProps } from '../../types';
 
diff --git a/packages/web-react/src/components/NoSsr/index.ts b/packages/web-react/src/components/NoSsr/index.ts
index 01583f8ea5..72e6b5bc9d 100644
--- a/packages/web-react/src/components/NoSsr/index.ts
+++ b/packages/web-react/src/components/NoSsr/index.ts
@@ -1 +1,3 @@
+'use client';
+
 export { default as NoSsr } from './NoSsr';
diff --git a/packages/web-react/src/components/Pagination/Pagination.tsx b/packages/web-react/src/components/Pagination/Pagination.tsx
index f5ad89fc10..d422202082 100644
--- a/packages/web-react/src/components/Pagination/Pagination.tsx
+++ b/packages/web-react/src/components/Pagination/Pagination.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Pagination/PaginationButtonLink.tsx b/packages/web-react/src/components/Pagination/PaginationButtonLink.tsx
index 066b14540f..250f467e51 100644
--- a/packages/web-react/src/components/Pagination/PaginationButtonLink.tsx
+++ b/packages/web-react/src/components/Pagination/PaginationButtonLink.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { SpiritPaginationButtonLinkProps } from '../../types';
 import { ButtonLink } from '../Button';
diff --git a/packages/web-react/src/components/Pagination/PaginationItem.tsx b/packages/web-react/src/components/Pagination/PaginationItem.tsx
index 513f73ca00..5cf67121cc 100644
--- a/packages/web-react/src/components/Pagination/PaginationItem.tsx
+++ b/packages/web-react/src/components/Pagination/PaginationItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Pagination/PaginationLink.tsx b/packages/web-react/src/components/Pagination/PaginationLink.tsx
index 84147a3c3a..c3e53768a7 100644
--- a/packages/web-react/src/components/Pagination/PaginationLink.tsx
+++ b/packages/web-react/src/components/Pagination/PaginationLink.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Pagination/PaginationLinkNext.tsx b/packages/web-react/src/components/Pagination/PaginationLinkNext.tsx
index ea8205f92c..bf2dc4006b 100644
--- a/packages/web-react/src/components/Pagination/PaginationLinkNext.tsx
+++ b/packages/web-react/src/components/Pagination/PaginationLinkNext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { SpiritPaginationLinkPreviousNextProps } from '../../types';
 import { PAGINATION_NEXT_LINK_DEFAULT_ACCESSIBILITY_LABEL } from './constants';
diff --git a/packages/web-react/src/components/Pagination/PaginationLinkPrevious.tsx b/packages/web-react/src/components/Pagination/PaginationLinkPrevious.tsx
index 6165673370..349ed205b7 100644
--- a/packages/web-react/src/components/Pagination/PaginationLinkPrevious.tsx
+++ b/packages/web-react/src/components/Pagination/PaginationLinkPrevious.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { SpiritPaginationLinkPreviousNextProps } from '../../types';
 import { PAGINATION_PREVIOUS_LINK_DEFAULT_ACCESSIBILITY_LABEL } from './constants';
diff --git a/packages/web-react/src/components/Pagination/UncontrolledPagination.tsx b/packages/web-react/src/components/Pagination/UncontrolledPagination.tsx
index 84d55f6311..fc00ef2abe 100644
--- a/packages/web-react/src/components/Pagination/UncontrolledPagination.tsx
+++ b/packages/web-react/src/components/Pagination/UncontrolledPagination.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { SpiritUncontrolledPaginationProps } from '../../types/pagination';
 import Pagination from './Pagination';
diff --git a/packages/web-react/src/components/Pagination/index.ts b/packages/web-react/src/components/Pagination/index.ts
index 4bcb66b813..d3f7cf312a 100644
--- a/packages/web-react/src/components/Pagination/index.ts
+++ b/packages/web-react/src/components/Pagination/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export { default as Pagination } from './Pagination';
 export { default as PaginationButtonLink } from './PaginationButtonLink';
 export { default as PaginationItem } from './PaginationItem';
diff --git a/packages/web-react/src/components/Pill/Pill.tsx b/packages/web-react/src/components/Pill/Pill.tsx
index 04eb8e287b..ba001921c0 100644
--- a/packages/web-react/src/components/Pill/Pill.tsx
+++ b/packages/web-react/src/components/Pill/Pill.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Pill/index.ts b/packages/web-react/src/components/Pill/index.ts
index 85f42879e2..2003a560f9 100644
--- a/packages/web-react/src/components/Pill/index.ts
+++ b/packages/web-react/src/components/Pill/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Pill';
 export * from './usePillStyleProps';
 export { default as Pill } from './Pill';
diff --git a/packages/web-react/src/components/Radio/Radio.tsx b/packages/web-react/src/components/Radio/Radio.tsx
index 714ddbe62b..23975a7e33 100644
--- a/packages/web-react/src/components/Radio/Radio.tsx
+++ b/packages/web-react/src/components/Radio/Radio.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { forwardRef, ForwardedRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Radio/index.ts b/packages/web-react/src/components/Radio/index.ts
index cd1ea6dc76..a0fb784f0a 100644
--- a/packages/web-react/src/components/Radio/index.ts
+++ b/packages/web-react/src/components/Radio/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Radio';
 export * from './useRadioStyleProps';
 export { default as Radio } from './Radio';
diff --git a/packages/web-react/src/components/ScrollView/ScrollView.tsx b/packages/web-react/src/components/ScrollView/ScrollView.tsx
index 7b0e19e713..e319b3189f 100644
--- a/packages/web-react/src/components/ScrollView/ScrollView.tsx
+++ b/packages/web-react/src/components/ScrollView/ScrollView.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/ScrollView/index.ts b/packages/web-react/src/components/ScrollView/index.ts
index c513fab51b..7e1cd25fdd 100644
--- a/packages/web-react/src/components/ScrollView/index.ts
+++ b/packages/web-react/src/components/ScrollView/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export { default as ScrollView } from './ScrollView';
 export * from './useScrollViewStyleProps';
 export * from './useScrollPosition';
diff --git a/packages/web-react/src/components/Select/Select.tsx b/packages/web-react/src/components/Select/Select.tsx
index b24d37fc4a..dac01f5d2b 100644
--- a/packages/web-react/src/components/Select/Select.tsx
+++ b/packages/web-react/src/components/Select/Select.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { forwardRef, ForwardedRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Select/index.ts b/packages/web-react/src/components/Select/index.ts
index 7c9455e2fc..e59617baca 100644
--- a/packages/web-react/src/components/Select/index.ts
+++ b/packages/web-react/src/components/Select/index.ts
@@ -1,2 +1,4 @@
+'use client';
+
 export { default as Select } from './Select';
 export * from './useSelectStyleProps';
diff --git a/packages/web-react/src/components/Spinner/Spinner.tsx b/packages/web-react/src/components/Spinner/Spinner.tsx
index c4f2c01a10..90cf76c37d 100644
--- a/packages/web-react/src/components/Spinner/Spinner.tsx
+++ b/packages/web-react/src/components/Spinner/Spinner.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Spinner/index.ts b/packages/web-react/src/components/Spinner/index.ts
index 04075ec1e6..700b8e6c1f 100644
--- a/packages/web-react/src/components/Spinner/index.ts
+++ b/packages/web-react/src/components/Spinner/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Spinner';
 export * from './useSpinnerStyleProps';
 export { default as Spinner } from './Spinner';
diff --git a/packages/web-react/src/components/Stack/Stack.tsx b/packages/web-react/src/components/Stack/Stack.tsx
index 33e2abfc25..b55c810046 100644
--- a/packages/web-react/src/components/Stack/Stack.tsx
+++ b/packages/web-react/src/components/Stack/Stack.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Stack/index.ts b/packages/web-react/src/components/Stack/index.ts
index 606491a678..cf6f61fdc1 100644
--- a/packages/web-react/src/components/Stack/index.ts
+++ b/packages/web-react/src/components/Stack/index.ts
@@ -1,2 +1,4 @@
+'use client';
+
 export * from './Stack';
 export { default as Stack } from './Stack';
diff --git a/packages/web-react/src/components/Tabs/TabContent.tsx b/packages/web-react/src/components/Tabs/TabContent.tsx
index c725c2e0fa..9839d0fd99 100644
--- a/packages/web-react/src/components/Tabs/TabContent.tsx
+++ b/packages/web-react/src/components/Tabs/TabContent.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { TabContentProps } from '../../types';
diff --git a/packages/web-react/src/components/Tabs/TabContext.tsx b/packages/web-react/src/components/Tabs/TabContext.tsx
index 25dbd3148c..9426dcb818 100644
--- a/packages/web-react/src/components/Tabs/TabContext.tsx
+++ b/packages/web-react/src/components/Tabs/TabContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import { TabId, TabsContextType, TabsToggler } from '../../types';
 
diff --git a/packages/web-react/src/components/Tabs/TabItem.tsx b/packages/web-react/src/components/Tabs/TabItem.tsx
index 6cb3533f46..a4c234808c 100644
--- a/packages/web-react/src/components/Tabs/TabItem.tsx
+++ b/packages/web-react/src/components/Tabs/TabItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Tabs/TabLink.tsx b/packages/web-react/src/components/Tabs/TabLink.tsx
index e0d4c8abc1..8740b2743e 100644
--- a/packages/web-react/src/components/Tabs/TabLink.tsx
+++ b/packages/web-react/src/components/Tabs/TabLink.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Tabs/TabList.tsx b/packages/web-react/src/components/Tabs/TabList.tsx
index c7e18c9844..9476f7488d 100644
--- a/packages/web-react/src/components/Tabs/TabList.tsx
+++ b/packages/web-react/src/components/Tabs/TabList.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Tabs/TabPane.tsx b/packages/web-react/src/components/Tabs/TabPane.tsx
index 2d515583d2..2c538c94e4 100644
--- a/packages/web-react/src/components/Tabs/TabPane.tsx
+++ b/packages/web-react/src/components/Tabs/TabPane.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Tabs/Tabs.tsx b/packages/web-react/src/components/Tabs/Tabs.tsx
index a628b956a8..ce5dc069cb 100644
--- a/packages/web-react/src/components/Tabs/Tabs.tsx
+++ b/packages/web-react/src/components/Tabs/Tabs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { TabsProps } from '../../types';
 import { TabsProvider } from './TabContext';
diff --git a/packages/web-react/src/components/Tabs/UncontrolledTabs.tsx b/packages/web-react/src/components/Tabs/UncontrolledTabs.tsx
index 23effd5992..111edb0934 100644
--- a/packages/web-react/src/components/Tabs/UncontrolledTabs.tsx
+++ b/packages/web-react/src/components/Tabs/UncontrolledTabs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { UncontrolledTabsProps } from '../../types';
 import { TabsProvider } from './TabContext';
diff --git a/packages/web-react/src/components/Tabs/index.ts b/packages/web-react/src/components/Tabs/index.ts
index 6cbb1b8f03..b16423ffcc 100644
--- a/packages/web-react/src/components/Tabs/index.ts
+++ b/packages/web-react/src/components/Tabs/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './TabContent';
 export * from './TabContext';
 export * from './TabItem';
diff --git a/packages/web-react/src/components/Tag/Tag.tsx b/packages/web-react/src/components/Tag/Tag.tsx
index 071a6e69c7..dbe048f0b9 100644
--- a/packages/web-react/src/components/Tag/Tag.tsx
+++ b/packages/web-react/src/components/Tag/Tag.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Tag/index.ts b/packages/web-react/src/components/Tag/index.ts
index f072721cea..a8d73ffff1 100644
--- a/packages/web-react/src/components/Tag/index.ts
+++ b/packages/web-react/src/components/Tag/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Tag';
 export * from './useTagStyleProps';
 export { default as Tag } from './Tag';
diff --git a/packages/web-react/src/components/Text/Text.tsx b/packages/web-react/src/components/Text/Text.tsx
index 5147752eea..506b47dd88 100644
--- a/packages/web-react/src/components/Text/Text.tsx
+++ b/packages/web-react/src/components/Text/Text.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Text/index.ts b/packages/web-react/src/components/Text/index.ts
index 217f025710..dce6c8c961 100644
--- a/packages/web-react/src/components/Text/index.ts
+++ b/packages/web-react/src/components/Text/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Text';
 export * from './useTextStyleProps';
 export { default as Text } from './Text';
diff --git a/packages/web-react/src/components/TextArea/TextArea.tsx b/packages/web-react/src/components/TextArea/TextArea.tsx
index e92f40b6c4..742d9e3822 100644
--- a/packages/web-react/src/components/TextArea/TextArea.tsx
+++ b/packages/web-react/src/components/TextArea/TextArea.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ForwardedRef, RefObject, forwardRef, useRef } from 'react';
 import { SpiritTextAreaProps } from '../../types';
 import { TextFieldBase } from '../TextFieldBase';
diff --git a/packages/web-react/src/components/TextArea/index.ts b/packages/web-react/src/components/TextArea/index.ts
index 2f7d387d74..d2b8ef9d9a 100644
--- a/packages/web-react/src/components/TextArea/index.ts
+++ b/packages/web-react/src/components/TextArea/index.ts
@@ -1,2 +1,4 @@
+'use client';
+
 export * from './TextArea';
 export { default as TextArea } from './TextArea';
diff --git a/packages/web-react/src/components/TextField/TextField.tsx b/packages/web-react/src/components/TextField/TextField.tsx
index 2b9de1f13f..9ecf7428aa 100644
--- a/packages/web-react/src/components/TextField/TextField.tsx
+++ b/packages/web-react/src/components/TextField/TextField.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef, ForwardedRef } from 'react';
 import { SpiritTextFieldProps } from '../../types';
 import { TextFieldBase } from '../TextFieldBase';
diff --git a/packages/web-react/src/components/TextField/index.ts b/packages/web-react/src/components/TextField/index.ts
index 0181178123..e8f31a18fa 100644
--- a/packages/web-react/src/components/TextField/index.ts
+++ b/packages/web-react/src/components/TextField/index.ts
@@ -1,2 +1,4 @@
+'use client';
+
 export * from './TextField';
 export { default as TextField } from './TextField';
diff --git a/packages/web-react/src/components/TextFieldBase/TextFieldBase.tsx b/packages/web-react/src/components/TextFieldBase/TextFieldBase.tsx
index 8060465c9c..68d46bf1c4 100644
--- a/packages/web-react/src/components/TextFieldBase/TextFieldBase.tsx
+++ b/packages/web-react/src/components/TextFieldBase/TextFieldBase.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/TextFieldBase/TextFieldBaseInput.tsx b/packages/web-react/src/components/TextFieldBase/TextFieldBaseInput.tsx
index 037fb2fcb4..aa20cd3541 100644
--- a/packages/web-react/src/components/TextFieldBase/TextFieldBaseInput.tsx
+++ b/packages/web-react/src/components/TextFieldBase/TextFieldBaseInput.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef, ForwardedRef, RefObject } from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritTextFieldBaseInputProps } from '../../types';
diff --git a/packages/web-react/src/components/TextFieldBase/TextFieldBasePasswordToggle.tsx b/packages/web-react/src/components/TextFieldBase/TextFieldBasePasswordToggle.tsx
index a4351f65cc..b6c48dcf1e 100644
--- a/packages/web-react/src/components/TextFieldBase/TextFieldBasePasswordToggle.tsx
+++ b/packages/web-react/src/components/TextFieldBase/TextFieldBasePasswordToggle.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { SpiritTextFieldBasePasswordToggleProps } from '../../types';
 import { Icon } from '../Icon';
diff --git a/packages/web-react/src/components/TextFieldBase/index.ts b/packages/web-react/src/components/TextFieldBase/index.ts
index 19b907b5ce..c0ca52061a 100644
--- a/packages/web-react/src/components/TextFieldBase/index.ts
+++ b/packages/web-react/src/components/TextFieldBase/index.ts
@@ -1,2 +1,4 @@
+'use client';
+
 export * from './TextFieldBase';
 export { default as TextFieldBase } from './TextFieldBase';
diff --git a/packages/web-react/src/components/TextFieldBase/withPasswordToggle.tsx b/packages/web-react/src/components/TextFieldBase/withPasswordToggle.tsx
index e266d502dc..598d81a472 100644
--- a/packages/web-react/src/components/TextFieldBase/withPasswordToggle.tsx
+++ b/packages/web-react/src/components/TextFieldBase/withPasswordToggle.tsx
@@ -5,6 +5,9 @@ error TS2322: Type 'Omit<T, "hasPasswordToggle"> & { type: string; }' is not ass
   Type 'Omit<T, "hasPasswordToggle"> & { type: string; }' is not assignable to type 'T'.
     'T' could be instantiated with an arbitrary type which could be unrelated to 'Omit<T, "hasPasswordToggle"> & { type: string; }'.
 */
+
+'use client';
+
 import React, { ComponentType, ForwardedRef } from 'react';
 import { PasswordToggleAdornmentProp } from '../../types/shared/adornments';
 import TextFieldBasePasswordToggle from './TextFieldBasePasswordToggle';
diff --git a/packages/web-react/src/components/Toast/Toast.tsx b/packages/web-react/src/components/Toast/Toast.tsx
index 4c1040b38c..b0faaea3e2 100644
--- a/packages/web-react/src/components/Toast/Toast.tsx
+++ b/packages/web-react/src/components/Toast/Toast.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { AlignmentX, AlignmentY } from '../../constants';
diff --git a/packages/web-react/src/components/Toast/ToastBar.tsx b/packages/web-react/src/components/Toast/ToastBar.tsx
index af2dd8abbd..c711876e2b 100644
--- a/packages/web-react/src/components/Toast/ToastBar.tsx
+++ b/packages/web-react/src/components/Toast/ToastBar.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { MutableRefObject, useRef } from 'react';
 import { Transition, TransitionStatus } from 'react-transition-group';
diff --git a/packages/web-react/src/components/Toast/ToastBarLink.tsx b/packages/web-react/src/components/Toast/ToastBarLink.tsx
index 6046e23ec2..ea37901841 100644
--- a/packages/web-react/src/components/Toast/ToastBarLink.tsx
+++ b/packages/web-react/src/components/Toast/ToastBarLink.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { ActionLinkColors } from '../../constants';
diff --git a/packages/web-react/src/components/Toast/ToastBarMessage.tsx b/packages/web-react/src/components/Toast/ToastBarMessage.tsx
index 174ffbba17..74bc654094 100644
--- a/packages/web-react/src/components/Toast/ToastBarMessage.tsx
+++ b/packages/web-react/src/components/Toast/ToastBarMessage.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useClassNamePrefix, useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Toast/ToastCloseButton.tsx b/packages/web-react/src/components/Toast/ToastCloseButton.tsx
index 31e3665171..f8c840642a 100644
--- a/packages/web-react/src/components/Toast/ToastCloseButton.tsx
+++ b/packages/web-react/src/components/Toast/ToastCloseButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { ToastCloseButtonProps } from '../../types';
 import { Button } from '../Button';
diff --git a/packages/web-react/src/components/Toast/ToastContext.tsx b/packages/web-react/src/components/Toast/ToastContext.tsx
index 9f398672ab..fc9d716dcf 100644
--- a/packages/web-react/src/components/Toast/ToastContext.tsx
+++ b/packages/web-react/src/components/Toast/ToastContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { FC, ReactNode, createContext, useCallback, useMemo, useReducer } from 'react';
 import { LinkProps, ToastColorType } from '../../types';
 import { delayedCallback } from '../../utils';
diff --git a/packages/web-react/src/components/Toast/UncontrolledToast.tsx b/packages/web-react/src/components/Toast/UncontrolledToast.tsx
index a5782013f4..e482a8b36b 100644
--- a/packages/web-react/src/components/Toast/UncontrolledToast.tsx
+++ b/packages/web-react/src/components/Toast/UncontrolledToast.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { UncontrolledToastProps } from '../../types';
 import Toast from './Toast';
diff --git a/packages/web-react/src/components/Toast/index.ts b/packages/web-react/src/components/Toast/index.ts
index d5532559a7..8d85964a15 100644
--- a/packages/web-react/src/components/Toast/index.ts
+++ b/packages/web-react/src/components/Toast/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export { default as Toast } from './Toast';
 export { default as ToastBar } from './ToastBar';
 export { default as ToastBarMessage } from './ToastBarMessage';
diff --git a/packages/web-react/src/components/Tooltip/Tooltip.tsx b/packages/web-react/src/components/Tooltip/Tooltip.tsx
index e1fcaa46af..883a6853e6 100644
--- a/packages/web-react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/web-react/src/components/Tooltip/Tooltip.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx b/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx
index f350dd86a1..8a6a59dd17 100644
--- a/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx
+++ b/packages/web-react/src/components/Tooltip/TooltipCloseButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Tooltip/TooltipContext.ts b/packages/web-react/src/components/Tooltip/TooltipContext.ts
index 6323a8f9d6..eed0b90cdd 100644
--- a/packages/web-react/src/components/Tooltip/TooltipContext.ts
+++ b/packages/web-react/src/components/Tooltip/TooltipContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { MiddlewareData, Placement, Strategy } from '@floating-ui/react';
 import { HTMLProps, MutableRefObject, createContext, useContext } from 'react';
 
diff --git a/packages/web-react/src/components/Tooltip/TooltipPopover.tsx b/packages/web-react/src/components/Tooltip/TooltipPopover.tsx
index 7b38d497e6..bd94a2c2b2 100644
--- a/packages/web-react/src/components/Tooltip/TooltipPopover.tsx
+++ b/packages/web-react/src/components/Tooltip/TooltipPopover.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/Tooltip/TooltipTrigger.tsx b/packages/web-react/src/components/Tooltip/TooltipTrigger.tsx
index b49eea0129..14ecb3ce76 100644
--- a/packages/web-react/src/components/Tooltip/TooltipTrigger.tsx
+++ b/packages/web-react/src/components/Tooltip/TooltipTrigger.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ElementType, ReactNode } from 'react';
 import { useStyleProps } from '../../hooks';
 import { StyleProps, TransferProps } from '../../types';
diff --git a/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx b/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx
index 52b798a65c..585de5103f 100644
--- a/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx
+++ b/packages/web-react/src/components/Tooltip/UncontrolledTooltip.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { SpiritTooltipProps } from '../../types';
 import Tooltip from './Tooltip';
diff --git a/packages/web-react/src/components/Tooltip/index.ts b/packages/web-react/src/components/Tooltip/index.ts
index ce40dcac24..46dbc5b8b9 100644
--- a/packages/web-react/src/components/Tooltip/index.ts
+++ b/packages/web-react/src/components/Tooltip/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export { default as Tooltip } from './Tooltip';
 export { default as TooltipCloseButton } from './TooltipCloseButton';
 export { default as TooltipPopover } from './TooltipPopover';
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.tsx b/packages/web-react/src/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.tsx
index 6b0c1e1765..c3e84a47e2 100644
--- a/packages/web-react/src/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.tsx
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ReactElement } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/UNSTABLE_ActionLayout/index.ts b/packages/web-react/src/components/UNSTABLE_ActionLayout/index.ts
index db68ba9893..d1d7c5cc0c 100644
--- a/packages/web-react/src/components/UNSTABLE_ActionLayout/index.ts
+++ b/packages/web-react/src/components/UNSTABLE_ActionLayout/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export { default as UNSTABLE_ActionLayout } from './UNSTABLE_ActionLayout';
 export * from './UNSTABLE_ActionLayout';
 export * from './useActionLayoutStyleProps';
diff --git a/packages/web-react/src/components/UNSTABLE_Avatar/UNSTABLE_Avatar.tsx b/packages/web-react/src/components/UNSTABLE_Avatar/UNSTABLE_Avatar.tsx
index 76af7ee98a..f6c8c11522 100644
--- a/packages/web-react/src/components/UNSTABLE_Avatar/UNSTABLE_Avatar.tsx
+++ b/packages/web-react/src/components/UNSTABLE_Avatar/UNSTABLE_Avatar.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { SizesExtended } from '../../constants';
diff --git a/packages/web-react/src/components/UNSTABLE_Avatar/index.ts b/packages/web-react/src/components/UNSTABLE_Avatar/index.ts
index 3be542d254..c90a31a2dc 100644
--- a/packages/web-react/src/components/UNSTABLE_Avatar/index.ts
+++ b/packages/web-react/src/components/UNSTABLE_Avatar/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './UNSTABLE_Avatar';
 export * from './useAvatarStyleProps';
 export { default as UNSTABLE_Avatar } from './UNSTABLE_Avatar';
diff --git a/packages/web-react/src/components/UNSTABLE_EmptyState/UNSTABLE_EmptyState.tsx b/packages/web-react/src/components/UNSTABLE_EmptyState/UNSTABLE_EmptyState.tsx
index 3cdf3e1109..035a609595 100644
--- a/packages/web-react/src/components/UNSTABLE_EmptyState/UNSTABLE_EmptyState.tsx
+++ b/packages/web-react/src/components/UNSTABLE_EmptyState/UNSTABLE_EmptyState.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ReactElement } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/UNSTABLE_EmptyState/UNSTABLE_EmptyStateSection.tsx b/packages/web-react/src/components/UNSTABLE_EmptyState/UNSTABLE_EmptyStateSection.tsx
index c9d1504dd1..4ee440ed24 100644
--- a/packages/web-react/src/components/UNSTABLE_EmptyState/UNSTABLE_EmptyStateSection.tsx
+++ b/packages/web-react/src/components/UNSTABLE_EmptyState/UNSTABLE_EmptyStateSection.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ReactElement } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/UNSTABLE_EmptyState/index.ts b/packages/web-react/src/components/UNSTABLE_EmptyState/index.ts
index cdef182eec..1b84370d46 100644
--- a/packages/web-react/src/components/UNSTABLE_EmptyState/index.ts
+++ b/packages/web-react/src/components/UNSTABLE_EmptyState/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export { default as UNSTABLE_EmptyState } from './UNSTABLE_EmptyState';
 export { default as UNSTABLE_EmptyStateSection } from './UNSTABLE_EmptyStateSection';
 export * from './UNSTABLE_EmptyState';
diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx
index 2e703f6f4d..19327b1e35 100644
--- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx
+++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/UNSTABLE_PartnerLogo.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { Sizes } from '../../constants';
diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.ts b/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.ts
index f6e9bef9ea..e473913a5d 100644
--- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.ts
+++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './UNSTABLE_PartnerLogo';
 export * from './usePartnerLogoStyleProps';
 export { default as UNSTABLE_PartnerLogo } from './UNSTABLE_PartnerLogo';
diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/UNSTABLE_ProductLogo.tsx b/packages/web-react/src/components/UNSTABLE_ProductLogo/UNSTABLE_ProductLogo.tsx
index 8a6d790060..c23fd3bc4b 100644
--- a/packages/web-react/src/components/UNSTABLE_ProductLogo/UNSTABLE_ProductLogo.tsx
+++ b/packages/web-react/src/components/UNSTABLE_ProductLogo/UNSTABLE_ProductLogo.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/index.ts b/packages/web-react/src/components/UNSTABLE_ProductLogo/index.ts
index 278ab73a3c..f711cb2d09 100644
--- a/packages/web-react/src/components/UNSTABLE_ProductLogo/index.ts
+++ b/packages/web-react/src/components/UNSTABLE_ProductLogo/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './UNSTABLE_ProductLogo';
 export * from './useProductLogoStyleProps';
 export { default as UNSTABLE_ProductLogo } from './UNSTABLE_ProductLogo';
diff --git a/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx b/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx
index b4f89e7fcf..3d47de258c 100644
--- a/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx
+++ b/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { CSSProperties, ChangeEvent, FormEvent, ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_UncontrolledSlider.tsx b/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_UncontrolledSlider.tsx
index 263b9d69cc..28ae4de2ca 100644
--- a/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_UncontrolledSlider.tsx
+++ b/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_UncontrolledSlider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { UncontrolledSliderProps } from '../../types';
 import { SLIDER_DEFAULT_PROPS } from './constants';
diff --git a/packages/web-react/src/components/UNSTABLE_Slider/index.ts b/packages/web-react/src/components/UNSTABLE_Slider/index.ts
index bcb011656b..8b2525fc41 100644
--- a/packages/web-react/src/components/UNSTABLE_Slider/index.ts
+++ b/packages/web-react/src/components/UNSTABLE_Slider/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './UNSTABLE_Slider';
 export * from './useSliderStyleProps';
 export { default as UNSTABLE_Slider } from './UNSTABLE_Slider';
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx b/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx
index f465f803b7..e7137809de 100644
--- a/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx
+++ b/packages/web-react/src/components/UNSTABLE_Toggle/UNSTABLE_Toggle.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ForwardedRef, forwardRef, useState } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/index.ts b/packages/web-react/src/components/UNSTABLE_Toggle/index.ts
index d2478df86a..edcea20f9c 100644
--- a/packages/web-react/src/components/UNSTABLE_Toggle/index.ts
+++ b/packages/web-react/src/components/UNSTABLE_Toggle/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './UNSTABLE_Toggle';
 export { default as UNSTABLE_Toggle } from './UNSTABLE_Toggle';
 export * from './useToggleStyleProps';
diff --git a/packages/web-react/src/components/UNSTABLE_Truncate/UNSTABLE_Truncate.tsx b/packages/web-react/src/components/UNSTABLE_Truncate/UNSTABLE_Truncate.tsx
index 447e33d11f..10e5acfeb8 100644
--- a/packages/web-react/src/components/UNSTABLE_Truncate/UNSTABLE_Truncate.tsx
+++ b/packages/web-react/src/components/UNSTABLE_Truncate/UNSTABLE_Truncate.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useClassNamePrefix, useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/UNSTABLE_Truncate/index.ts b/packages/web-react/src/components/UNSTABLE_Truncate/index.ts
index 9a7354262a..72a53e61ab 100644
--- a/packages/web-react/src/components/UNSTABLE_Truncate/index.ts
+++ b/packages/web-react/src/components/UNSTABLE_Truncate/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './UNSTABLE_Truncate';
 export * from './useTruncateStyleProps';
 export { default as UNSTABLE_Truncate } from './UNSTABLE_Truncate';
diff --git a/packages/web-react/src/components/VisuallyHidden/VisuallyHidden.tsx b/packages/web-react/src/components/VisuallyHidden/VisuallyHidden.tsx
index 7e7f532c12..9f7d53ecb3 100644
--- a/packages/web-react/src/components/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/web-react/src/components/VisuallyHidden/VisuallyHidden.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';
diff --git a/packages/web-react/src/components/VisuallyHidden/index.ts b/packages/web-react/src/components/VisuallyHidden/index.ts
index 2125e7a06c..cdb5a2bebe 100644
--- a/packages/web-react/src/components/VisuallyHidden/index.ts
+++ b/packages/web-react/src/components/VisuallyHidden/index.ts
@@ -1 +1,3 @@
+'use client';
+
 export { default as VisuallyHidden } from './VisuallyHidden';
diff --git a/packages/web-react/src/components/index.ts b/packages/web-react/src/components/index.ts
index 47998762a8..e1fed555a0 100644
--- a/packages/web-react/src/components/index.ts
+++ b/packages/web-react/src/components/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Accordion';
 export * from './Alert';
 export * from './Breadcrumbs';
diff --git a/packages/web-react/src/context/ClassNamePrefixContext.ts b/packages/web-react/src/context/ClassNamePrefixContext.ts
index adbc5c35ae..9b96cbb79b 100644
--- a/packages/web-react/src/context/ClassNamePrefixContext.ts
+++ b/packages/web-react/src/context/ClassNamePrefixContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext } from 'react';
 
 type ClassNamePrefixContextType = string | null | undefined;
diff --git a/packages/web-react/src/context/IconsContext.ts b/packages/web-react/src/context/IconsContext.ts
index d8fa143875..8463ecf502 100644
--- a/packages/web-react/src/context/IconsContext.ts
+++ b/packages/web-react/src/context/IconsContext.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext } from 'react';
 
 type IconsContextType = Record<string, string> | null | undefined;
diff --git a/packages/web-react/src/context/index.ts b/packages/web-react/src/context/index.ts
index d0fdff9ed6..25ef40fa98 100644
--- a/packages/web-react/src/context/index.ts
+++ b/packages/web-react/src/context/index.ts
@@ -1,2 +1,4 @@
+'use client';
+
 export * from './ClassNamePrefixContext';
 export * from './IconsContext';
diff --git a/packages/web-react/src/index.ts b/packages/web-react/src/index.ts
index 2165e4ee4a..e0663c23b9 100644
--- a/packages/web-react/src/index.ts
+++ b/packages/web-react/src/index.ts
@@ -1,3 +1,5 @@
+'use client';
+
 export * from './components';
 export * from './constants';
 export * from './context';
diff --git a/packages/web-react/tests/testUtils/renderWithHeaderContext.tsx b/packages/web-react/tests/testUtils/renderWithHeaderContext.tsx
index 678daa3735..cdbc2cedd4 100644
--- a/packages/web-react/tests/testUtils/renderWithHeaderContext.tsx
+++ b/packages/web-react/tests/testUtils/renderWithHeaderContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { render } from '@testing-library/react';
 import React, { ElementType } from 'react';
 import { HeaderDialogProvider, HeaderDialogContextProps } from '../../src';
diff --git a/packages/web-react/tests/testUtils/withTabsContext.tsx b/packages/web-react/tests/testUtils/withTabsContext.tsx
index b15d6aebbc..ee7ba61d13 100644
--- a/packages/web-react/tests/testUtils/withTabsContext.tsx
+++ b/packages/web-react/tests/testUtils/withTabsContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ElementType } from 'react';
 import { TabsContextType, TabsProvider } from '../../src';