From 45c50468866d273608eca78dc739489c8732952a Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 16 Dec 2025 14:26:51 +0530
Subject: [PATCH 01/10] fix: add missing ids to components

---
 .../assets/css/src/scss/_utils/_tokens.scss   |  2 +-
 packages/ui/accordion/src/accordion-item.tsx  | 37 ++++++++++++++-----
 packages/ui/accordion/src/accordion.types.ts  |  1 +
 .../advanced-banner/src/advanced-banner.tsx   |  6 ++-
 .../src/advanced-banner.types.ts              |  4 ++
 packages/ui/alert-banner/src/alert-banner.tsx |  6 ++-
 .../ui/alert-banner/src/alert-banner.types.ts |  4 ++
 packages/ui/avatar/src/avatar.tsx             |  7 +++-
 packages/ui/avatar/src/avatar.types.ts        |  4 ++
 packages/ui/basic-box/src/basic-box.tsx       | 35 ++++++++++++++----
 packages/ui/basic-box/src/basic-box.types.ts  |  4 ++
 packages/ui/box/src/box-group.tsx             | 14 ++++++-
 packages/ui/box/src/box-group.types.ts        |  4 ++
 packages/ui/box/src/box.tsx                   | 28 ++++++++++----
 packages/ui/box/src/box.types.ts              |  4 ++
 packages/ui/builder/src/builder-button.tsx    |  6 ++-
 packages/ui/builder/src/builder-empty.tsx     |  6 ++-
 packages/ui/builder/src/builder-field.tsx     | 11 +++++-
 packages/ui/builder/src/builder-wrapper.tsx   |  6 ++-
 packages/ui/builder/src/builder.tsx           |  6 ++-
 packages/ui/builder/src/builder.types.ts      | 20 ++++++++++
 packages/ui/checkbox/src/checkbox-group.tsx   |  6 +--
 packages/ui/checkbox/src/checkbox-wrapper.tsx |  7 +++-
 packages/ui/checkbox/src/checkbox.tsx         | 20 +++++-----
 packages/ui/checkbox/src/checkbox.types.ts    |  4 ++
 packages/ui/code-editor/src/code-editor.tsx   |  6 ++-
 .../ui/code-editor/src/code-editor.types.ts   |  4 ++
 packages/ui/code-snippet/src/code-snippet.tsx |  6 ++-
 .../ui/code-snippet/src/code-snippet.types.ts |  4 ++
 .../ui/color-picker/src/color-picker.types.ts |  8 ++++
 .../config-table/src/config-table-details.tsx |  7 +++-
 packages/ui/config-table/src/config-table.tsx | 11 +++++-
 .../ui/config-table/src/config-table.types.ts |  8 ++++
 .../dashboard-widget/src/dashboard-widget.tsx |  6 ++-
 .../src/dashboard-widget.types.ts             |  4 ++
 packages/ui/date-picker/src/date-picker.tsx   |  7 +---
 packages/ui/drawer/src/drawer-body.tsx        | 11 +++++-
 packages/ui/drawer/src/drawer-footer.tsx      | 11 +++++-
 packages/ui/drawer/src/drawer-header.tsx      |  7 +++-
 packages/ui/drawer/src/drawer.tsx             |  5 +++
 packages/ui/drawer/src/drawer.types.ts        | 12 ++++++
 .../ui/dropdown/src/dropdown-menu-item.tsx    |  8 ++--
 packages/ui/dropdown/src/dropdown-menu.tsx    | 13 +++++--
 packages/ui/dropdown/src/dropdown.tsx         | 28 +++++++++++---
 packages/ui/dropdown/src/dropdown.types.ts    | 12 ++++++
 .../src/editor-toolbar-field.tsx              |  7 +++-
 .../ui/editor-toolbar/src/editor-toolbar.tsx  |  6 ++-
 .../src/editor-toolbar.types.ts               |  8 ++++
 packages/ui/empty-state/src/empty-state.tsx   | 11 +++++-
 .../ui/empty-state/src/empty-state.types.ts   |  4 ++
 .../ui/field-list/src/field-list-item.tsx     | 16 ++++++--
 packages/ui/footer/src/footer.tsx             |  6 ++-
 packages/ui/footer/src/footer.types.ts        |  4 ++
 .../form-field/src/elements/error-message.tsx |  2 +-
 .../ui/form-field/src/elements/helper.tsx     |  2 +-
 packages/ui/form-field/src/elements/label.tsx |  2 +-
 packages/ui/form-field/src/form-field.tsx     |  6 +--
 packages/ui/grid/src/elements/col.tsx         | 12 +++++-
 packages/ui/grid/src/elements/row.tsx         |  7 +++-
 packages/ui/grid/src/grid.types.ts            |  8 ++++
 packages/ui/icon/src/icon.tsx                 |  5 +++
 packages/ui/icon/src/icon.types.ts            |  4 ++
 packages/ui/input/src/input.tsx               | 16 +++++++-
 packages/ui/integration/src/integration.tsx   |  6 ++-
 .../ui/integration/src/integration.types.ts   |  4 ++
 packages/ui/link/src/link.tsx                 |  7 +++-
 packages/ui/link/src/link.types.ts            |  4 ++
 packages/ui/modal/src/modal-body.tsx          |  6 ++-
 packages/ui/modal/src/modal-footer.tsx        |  6 ++-
 packages/ui/modal/src/modal-header.tsx        |  6 ++-
 packages/ui/modal/src/modal.tsx               |  7 +++-
 packages/ui/modal/src/modal.types.ts          |  3 ++
 .../src/navigation-wpmudev.types.ts           | 24 ++++++++++++
 packages/ui/navigation/src/navigation.tsx     |  6 ++-
 .../ui/navigation/src/navigation.types.ts     | 12 ++++++
 .../src/notification-renderer.tsx             |  7 +++-
 packages/ui/notification/src/notification.tsx | 10 ++---
 .../ui/notification/src/notification.types.ts |  4 ++
 packages/ui/page-header/src/page-header.tsx   |  7 +++-
 .../ui/page-header/src/page-header.types.ts   |  4 ++
 packages/ui/pagination/src/pagination.tsx     |  6 ++-
 .../ui/pagination/src/pagination.types.ts     |  8 ++++
 packages/ui/popover/src/popover.tsx           |  5 +++
 packages/ui/popover/src/popover.types.ts      |  4 ++
 packages/ui/progress-bar/src/progress-bar.tsx |  6 ++-
 .../ui/progress-bar/src/progress-bar.types.ts |  4 ++
 packages/ui/radio/src/radio-group.tsx         |  6 ++-
 packages/ui/radio/src/radio.tsx               | 24 +++++-------
 packages/ui/radio/src/radio.types.ts          |  4 ++
 .../ui/recipient/src/recipient-button.tsx     |  7 +++-
 packages/ui/recipient/src/recipient-email.tsx |  7 +++-
 packages/ui/recipient/src/recipient-name.tsx  |  7 +++-
 packages/ui/recipient/src/recipient.tsx       |  6 ++-
 packages/ui/recipient/src/recipient.type.ts   |  4 ++
 .../rich-text-editor/src/rich-text-editor.tsx | 12 ++++--
 packages/ui/score/src/score.tsx               |  6 ++-
 packages/ui/score/src/score.types.ts          |  4 ++
 packages/ui/search/src/search-option-item.tsx |  6 ++-
 packages/ui/search/src/search-options.tsx     |  7 +++-
 packages/ui/search/src/search.tsx             |  2 +-
 packages/ui/search/src/search.types.ts        |  8 ++++
 .../src/segmented-control-button.tsx          |  7 ++--
 .../src/segmented-control.types.ts            |  2 +
 packages/ui/select/src/select.types.ts        |  8 ++++
 packages/ui/selector/src/selector.tsx         | 14 +++++--
 packages/ui/selector/src/selector.types.ts    |  6 +++
 .../ui/setting-block/src/setting-block.tsx    |  6 ++-
 .../setting-block/src/setting-block.types.ts  |  8 ++++
 packages/ui/setup-banner/src/setup-banner.tsx |  6 ++-
 .../ui/setup-banner/src/setup-banner.types.ts |  4 ++
 packages/ui/sidebar/src/sidebar-dropdown.tsx  |  2 +-
 packages/ui/sidebar/src/sidebar-item.tsx      |  7 +++-
 packages/ui/sidebar/src/sidebar.types.ts      |  4 ++
 packages/ui/skeleton/src/skeleton-base.tsx    | 11 +++++-
 packages/ui/skeleton/src/skeleton.types.ts    |  3 ++
 packages/ui/spinner/src/spinner-hook.tsx      |  2 +-
 packages/ui/spinner/src/spinner.tsx           |  6 ++-
 packages/ui/spinner/src/spinner.types.ts      |  8 ++++
 .../ui/summary-box/src/summary-box-body.tsx   |  7 +++-
 .../summary-box/src/summary-box-content.tsx   |  7 +++-
 .../ui/summary-box/src/summary-box-footer.tsx | 11 +++++-
 .../ui/summary-box/src/summary-box-item.tsx   | 11 +++++-
 .../ui/summary-box/src/summary-box-row.tsx    |  7 +++-
 packages/ui/summary-box/src/summary-box.tsx   |  6 ++-
 .../ui/summary-box/src/summary-box.types.ts   | 24 ++++++++++++
 packages/ui/table/src/table-row.tsx           |  6 +--
 packages/ui/table/src/table-toolbar.tsx       |  8 ++--
 packages/ui/table/src/table.types.ts          |  4 ++
 packages/ui/tabs/src/tabs.tsx                 |  6 ++-
 packages/ui/tabs/src/tabs.types.ts            |  2 +
 packages/ui/tag/src/tag.tsx                   |  7 +++-
 packages/ui/tag/src/tag.types.ts              |  4 ++
 packages/ui/toggle/src/toggle.tsx             | 27 ++++++++++----
 packages/ui/tooltip/src/tooltip.tsx           |  8 ++--
 packages/ui/tooltip/src/tooltip.types.ts      |  4 ++
 packages/ui/tree-view/src/tree-view-info.tsx  |  4 +-
 packages/ui/tree-view/src/tree-view-item.tsx  |  2 +-
 packages/ui/uploader/src/uploader-button.tsx  |  7 +++-
 packages/ui/uploader/src/uploader.tsx         | 15 +++++---
 packages/ui/uploader/src/uploader.types.ts    |  4 ++
 .../ui/upsell-notice/src/upsell-notice.tsx    |  6 ++-
 .../upsell-notice/src/upsell-notice.types.ts  |  4 ++
 packages/ui/upsell/src/upsell.tsx             |  6 ++-
 packages/ui/upsell/src/upsell.types.ts        |  4 ++
 144 files changed, 921 insertions(+), 206 deletions(-)

diff --git a/packages/assets/css/src/scss/_utils/_tokens.scss b/packages/assets/css/src/scss/_utils/_tokens.scss
index a7da68e17..e6315dc3e 100644
--- a/packages/assets/css/src/scss/_utils/_tokens.scss
+++ b/packages/assets/css/src/scss/_utils/_tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 03 Nov 2025 10:48:23 GMT
+// Generated on Tue, 16 Dec 2025 08:02:53 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);
diff --git a/packages/ui/accordion/src/accordion-item.tsx b/packages/ui/accordion/src/accordion-item.tsx
index 0870c0b1b..da6a0902b 100644
--- a/packages/ui/accordion/src/accordion-item.tsx
+++ b/packages/ui/accordion/src/accordion-item.tsx
@@ -17,6 +17,7 @@ import { AccordionItemProps } from "./accordion.types"
 
 // The AccordionItem component is defined as a functional component using React.FC.
 const AccordionItem: React.FC<AccordionItemProps> = ({
+	id,
 	title = "{title}",
 	description,
 	children,
@@ -40,7 +41,8 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 	const [isPressed, setIsPressed] = useState(false)
 
 	// Custom hook to generate a unique ID for the accordion item.
-	const uniqueId = useId()
+	const generatedId = useId()
+	const uniqueId = id || `sui_accordion_${generatedId}`
 
 	// Get the "toggle" method and "isCurrentlyExpanded" state from the current AccordionItem
 	const { toggle, isCurrentlyExpanded } = useAccordion({
@@ -50,8 +52,8 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 	const { spacing } = useContext(AccordionContext)
 
 	// IDs for the accordion and its panel to manage accessibility.
-	const accordionId = `sui-accordion-${uniqueId}`
-	const accordionPanelId = `sui-accordion-panel-${uniqueId}`
+	const accordionId = uniqueId
+	const accordionPanelId = `${uniqueId}_panel`
 
 	const onMouseDownCapture = () => {
 		setIsPressed(true)
@@ -150,13 +152,19 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 				)}
 
 				{/* Content of the accordion item's header */}
-				<div className="sui-accordion__header-info">
+				<div
+					className="sui-accordion__header-info"
+					id={`${accordionId}_header_info`}
+				>
 					{(!!hasCheckbox || !!icon) && (
-						<div className="sui-accordion__header-actions">
+						<div
+							className="sui-accordion__header-actions"
+							id={`${accordionId}_header_actions`}
+						>
 							{hasCheckbox && (
 								<Checkbox
 									name={accordionId}
-									id={`${accordionId}-checkbox`}
+									id={`${accordionId}_checkbox`}
 									onChange={onCheckBoxChange}
 									isChecked={isChecked}
 									isDisabled={isDisabled ?? false}
@@ -165,13 +173,19 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 							{!!icon && icon}
 						</div>
 					)}
-					<div className="sui-accordion__header-title">
+					<div
+						className="sui-accordion__header-title"
+						id={`${accordionId}_header_title`}
+					>
 						<h2>{title}</h2>
 						{!isEmpty(description ?? "") && <p>{description}</p>}
 					</div>
 				</div>
 				{/* Icon component to display a chevron icon */}
-				<div className="sui-accordion__header-icon">
+				<div
+					className="sui-accordion__header-icon"
+					id={`${accordionId}_header_icon`}
+				>
 					<Icon iconHeight={16} iconWidth={16} />
 				</div>
 			</div>
@@ -188,7 +202,12 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 				})}
 				data-testid="accordion-item-panel"
 			>
-				<div className={panelContentClassName}>{children}</div>
+				<div
+					className={panelContentClassName}
+					id={`${accordionId}_panel_content`}
+				>
+					{children}
+				</div>
 			</div>
 		</div>
 	)
diff --git a/packages/ui/accordion/src/accordion.types.ts b/packages/ui/accordion/src/accordion.types.ts
index 6508eac27..42522ad7e 100644
--- a/packages/ui/accordion/src/accordion.types.ts
+++ b/packages/ui/accordion/src/accordion.types.ts
@@ -36,6 +36,7 @@ type AccordionCheckboxProps =
 interface AccordionItemBaseProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	id?: string // Optional custom ID for the accordion item.
 	title?: string // The title of the accordion item.
 	description?: string // The description of the accordion item.
 	children?: React.ReactNode // The content of the accordion item, which can be any valid React node.
diff --git a/packages/ui/advanced-banner/src/advanced-banner.tsx b/packages/ui/advanced-banner/src/advanced-banner.tsx
index 980bbcc3b..5f042f25f 100644
--- a/packages/ui/advanced-banner/src/advanced-banner.tsx
+++ b/packages/ui/advanced-banner/src/advanced-banner.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { Button, ButtonProps } from "@wpmudev/sui-button"
@@ -7,6 +7,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 
 // Build "advanced-banner" component
 const AdvancedBanner: React.FC<AdvancedBannerProps> = ({
+	id,
 	variation = "plugin",
 	imageUrl = "https://placehold.co/100",
 	title = "Banner Title",
@@ -23,6 +24,8 @@ const AdvancedBanner: React.FC<AdvancedBannerProps> = ({
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const advancedBannerId = id || `sui_advanced_banner_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	// Define class name
@@ -43,6 +46,7 @@ const AdvancedBanner: React.FC<AdvancedBannerProps> = ({
 
 	return (
 		<div
+			id={advancedBannerId}
 			className={classNames}
 			data-testid="advanced-banner"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/advanced-banner/src/advanced-banner.types.ts b/packages/ui/advanced-banner/src/advanced-banner.types.ts
index c18dc066b..a4735e20f 100644
--- a/packages/ui/advanced-banner/src/advanced-banner.types.ts
+++ b/packages/ui/advanced-banner/src/advanced-banner.types.ts
@@ -4,6 +4,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 export interface AdvancedBannerBasePros
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the advanced banner.
+	 */
+	id?: string
 	/**
 	 * Sets the headline text
 	 */
diff --git a/packages/ui/alert-banner/src/alert-banner.tsx b/packages/ui/alert-banner/src/alert-banner.tsx
index 6b821bf29..347605717 100644
--- a/packages/ui/alert-banner/src/alert-banner.tsx
+++ b/packages/ui/alert-banner/src/alert-banner.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react"
+import React, { useId, useState, useCallback } from "react"
 import { _renderHTMLPropsSafely, generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { Button, ButtonProps } from "@wpmudev/sui-button"
 import Icons from "@wpmudev/sui-icons"
@@ -7,6 +7,7 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 import { AlertBannerProps } from "./alert-banner.types"
 
 const AlertBanner: React.FC<AlertBannerProps> = ({
+	id,
 	children,
 	variation = "informative",
 	actions,
@@ -18,6 +19,8 @@ const AlertBanner: React.FC<AlertBannerProps> = ({
 	_style = {},
 	_htmlProps,
 }) => {
+	const generatedId = useId()
+	const alertBannerId = id || `sui_alert_banner_${generatedId}`
 	// State to control the visibility of the alert banner
 	const [isVisible, setIsVisible] = useState(true)
 
@@ -85,6 +88,7 @@ const AlertBanner: React.FC<AlertBannerProps> = ({
 
 	return (
 		<div
+			id={alertBannerId}
 			className={classNames}
 			data-testid="alert-banner"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/alert-banner/src/alert-banner.types.ts b/packages/ui/alert-banner/src/alert-banner.types.ts
index fcce309c7..0d7c738e4 100644
--- a/packages/ui/alert-banner/src/alert-banner.types.ts
+++ b/packages/ui/alert-banner/src/alert-banner.types.ts
@@ -8,6 +8,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface AlertBannerProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the alert banner.
+	 */
+	id?: string
 	/**
 	 * Alert Banner content
 	 */
diff --git a/packages/ui/avatar/src/avatar.tsx b/packages/ui/avatar/src/avatar.tsx
index 834d96400..e6b01c14d 100644
--- a/packages/ui/avatar/src/avatar.tsx
+++ b/packages/ui/avatar/src/avatar.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 import {
 	_renderHTMLPropsSafely,
 	generateCN,
@@ -16,6 +16,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 
 // Build "avatar" component
 const Avatar: React.FC<AvatarProps> = ({
+	id,
 	image,
 	status = "none",
 	isSmall = false,
@@ -25,6 +26,9 @@ const Avatar: React.FC<AvatarProps> = ({
 	_style = {},
 	onClick,
 }) => {
+	const generatedId = useId()
+	const avatarId = id || `sui_avatar_${generatedId}`
+
 	// Define image object
 	const imageObj = Object.assign(
 		{
@@ -51,6 +55,7 @@ const Avatar: React.FC<AvatarProps> = ({
 	)
 
 	const attributes = {
+		id: avatarId,
 		className: classNames,
 		..._renderHTMLPropsSafely(_htmlProps),
 		"data-testid": "avatar",
diff --git a/packages/ui/avatar/src/avatar.types.ts b/packages/ui/avatar/src/avatar.types.ts
index 35ebba1aa..22b057fe7 100644
--- a/packages/ui/avatar/src/avatar.types.ts
+++ b/packages/ui/avatar/src/avatar.types.ts
@@ -9,6 +9,10 @@ import { IconsNamesType } from "@wpmudev/sui-icons"
 interface AvatarProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLSpanElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the avatar.
+	 */
+	id?: string
 	/**
 	 * The image source for the avatar.
 	 */
diff --git a/packages/ui/basic-box/src/basic-box.tsx b/packages/ui/basic-box/src/basic-box.tsx
index 3fca4f07a..7e57048bb 100644
--- a/packages/ui/basic-box/src/basic-box.tsx
+++ b/packages/ui/basic-box/src/basic-box.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import {
@@ -11,6 +11,7 @@ import { BasicBoxProps } from "./basic-box.types"
 
 // Build "basic-box" component
 const BasicBox: React.FC<BasicBoxProps> = ({
+	id,
 	title = "Box Title",
 	description,
 	headerActions,
@@ -24,6 +25,9 @@ const BasicBox: React.FC<BasicBoxProps> = ({
 	_htmlProps,
 	_style,
 }) => {
+	const generatedId = useId()
+	const basicBoxId = id || `sui_basic_box_${generatedId}`
+
 	// Interaction methods
 	const [isHovered, isFocused, methods] = useInteraction({})
 
@@ -47,22 +51,27 @@ const BasicBox: React.FC<BasicBoxProps> = ({
 
 	return (
 		<div
+			id={basicBoxId}
 			className={classNames}
 			{...methods}
 			data-testid="basic-box"
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
-			<div className="sui-basic-box__header">
-				<div className="sui-basic-box__header-info">
+			<div className="sui-basic-box__header" id={`${basicBoxId}_header`}>
+				<div
+					className="sui-basic-box__header-info"
+					id={`${basicBoxId}_header_info`}
+				>
 					{!!title && (
 						<h3
+							id={`${basicBoxId}_title`}
 							className="sui-basic-box__header-title sui-heading--h3"
 							data-testid="basic-box-title"
 						>
 							{title}
 						</h3>
 					)}
-					<div className="sui-basic-box__actions">
+					<div className="sui-basic-box__actions" id={`${basicBoxId}_actions`}>
 						{headerActions && headerActions}
 					</div>
 					{!!description && (
@@ -75,18 +84,28 @@ const BasicBox: React.FC<BasicBoxProps> = ({
 					)}
 				</div>
 			</div>
-			<div className="sui-basic-box__body" data-testid="basic-box-body">
+			<div
+				className="sui-basic-box__body"
+				id={`${basicBoxId}_body`}
+				data-testid="basic-box-body"
+			>
 				{children}
 			</div>
 			{!!footerActions && (
-				<div className="sui-basic-box__footer">
+				<div className="sui-basic-box__footer" id={`${basicBoxId}_footer`}>
 					{!!footerActions?.[0] && (
-						<div className="sui-basic-box__footer-left">
+						<div
+							className="sui-basic-box__footer-left"
+							id={`${basicBoxId}_footer_left`}
+						>
 							{footerActions?.[0]}
 						</div>
 					)}
 					{!!footerActions?.[1] && (
-						<div className="sui-basic-box__footer-right">
+						<div
+							className="sui-basic-box__footer-right"
+							id={`${basicBoxId}_footer_right`}
+						>
 							{footerActions?.[1]}
 						</div>
 					)}
diff --git a/packages/ui/basic-box/src/basic-box.types.ts b/packages/ui/basic-box/src/basic-box.types.ts
index 9ab489bb3..214addc2a 100644
--- a/packages/ui/basic-box/src/basic-box.types.ts
+++ b/packages/ui/basic-box/src/basic-box.types.ts
@@ -8,6 +8,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface BasicBoxProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * The unique identifier for the basic box (optional).
+	 */
+	id?: string
 	/**
 	 * The title of the BasicBox, which can contain React nodes.
 	 */
diff --git a/packages/ui/box/src/box-group.tsx b/packages/ui/box/src/box-group.tsx
index 88dddc7e4..4c4ac98b0 100644
--- a/packages/ui/box/src/box-group.tsx
+++ b/packages/ui/box/src/box-group.tsx
@@ -1,4 +1,4 @@
-import React, { Children, Fragment, ReactElement } from "react"
+import React, { Children, Fragment, ReactElement, useId } from "react"
 import {
 	_renderHTMLPropsSafely,
 	generateCN,
@@ -10,6 +10,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 
 // Create box group component
 const BoxGroup: React.FC<BoxGroupProps> = ({
+	id,
 	isInline = true,
 	children,
 	className = "",
@@ -19,16 +20,24 @@ const BoxGroup: React.FC<BoxGroupProps> = ({
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const boxGroupId = id || `sui_box_group_${generatedId}`
+
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	// Build content based in slots
 	const slots = Children.map(children, (child, index) => {
-		const { slot, children: content } = (child as ReactElement)?.props ?? {}
+		const {
+			slot,
+			children: content,
+			id: childId,
+		} = (child as ReactElement)?.props ?? {}
 
 		if (isObject(child) && ["left", "right"].includes(slot ?? "")) {
 			return (
 				<div
 					key={`sui-box-group--${index}`}
+					id={childId || `${boxGroupId}_slot_${slot}`}
 					className={`sui-box-group__slot sui-box-group__${slot}`}
 				>
 					{content}
@@ -53,6 +62,7 @@ const BoxGroup: React.FC<BoxGroupProps> = ({
 
 	return (
 		<div
+			id={boxGroupId}
 			className={classNames}
 			data-testid="box-group"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/box/src/box-group.types.ts b/packages/ui/box/src/box-group.types.ts
index 9d0a1324c..120ca5f2d 100644
--- a/packages/ui/box/src/box-group.types.ts
+++ b/packages/ui/box/src/box-group.types.ts
@@ -8,6 +8,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface BoxGroupProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * The unique identifier for the box group (optional).
+	 */
+	id?: string
 	/**
 	 * Indicates whether the boxes should be displayed inline or not.
 	 */
diff --git a/packages/ui/box/src/box.tsx b/packages/ui/box/src/box.tsx
index 7fbf50433..528d06ece 100644
--- a/packages/ui/box/src/box.tsx
+++ b/packages/ui/box/src/box.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 import {
 	_renderHTMLPropsSafely,
 	generateCN,
@@ -14,6 +14,7 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 
 // Create box component
 const Box: React.FC<BoxProps> = ({
+	id,
 	title,
 	description,
 	icon,
@@ -28,6 +29,9 @@ const Box: React.FC<BoxProps> = ({
 	_htmlProps = {},
 	_style,
 }) => {
+	const generatedId = useId()
+	const boxId = id || `sui_box_${generatedId}`
+
 	// Prop(s) validation
 	const hasTitle = !isUndefined(title) && !isEmpty(title)
 	const hasIcon = !isUndefined(icon) && !isEmpty(icon)
@@ -49,18 +53,20 @@ const Box: React.FC<BoxProps> = ({
 
 	return (
 		<div
+			id={boxId}
 			className={classNames}
 			style={style ?? {}}
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
 			{hasTitle && (
-				<BoxGroup isInline={true}>
-					<div slot="left">
-						<div className="sui-box__container">
+				<BoxGroup isInline={true} id={`${boxId}_header_group`}>
+					<div slot="left" id={`${boxId}_header_left`}>
+						<div className="sui-box__container" id={`${boxId}_container`}>
 							{hasTitle && (
-								<div className="sui-box__title">
+								<div className="sui-box__title" id={`${boxId}_title`}>
 									{hasIcon && IconTag && (
 										<span
+											id={`${boxId}_icon`}
 											className={generateCN(
 												"suicons",
 												{},
@@ -73,16 +79,22 @@ const Box: React.FC<BoxProps> = ({
 											<IconTag size="md" />
 										</span>
 									)}
-									<h2 className="sui-heading sui-heading--h3 sui-box-group__item">
+									<h2
+										className="sui-heading sui-heading--h3 sui-box-group__item"
+										id={`${boxId}_heading`}
+									>
 										{title}
 									</h2>
 									{hasLeft && headerLeft}
 								</div>
 							)}
-							{description && <p>{description}</p>}
+							{description && <p id={`${boxId}_description`}>{description}</p>}
 						</div>
 					</div>
-					<div {...(hasRight && { slot: "right" })}>
+					<div
+						{...(hasRight && { slot: "right" })}
+						id={`${boxId}_header_right`}
+					>
 						{hasRight && headerRight}
 					</div>
 				</BoxGroup>
diff --git a/packages/ui/box/src/box.types.ts b/packages/ui/box/src/box.types.ts
index 41f0d0ed5..b0c72f375 100644
--- a/packages/ui/box/src/box.types.ts
+++ b/packages/ui/box/src/box.types.ts
@@ -9,6 +9,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface BoxProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * The unique identifier for the box (optional).
+	 */
+	id?: string
 	/**
 	 * The title of the box.
 	 */
diff --git a/packages/ui/builder/src/builder-button.tsx b/packages/ui/builder/src/builder-button.tsx
index c0d23bdb5..c0280568e 100644
--- a/packages/ui/builder/src/builder-button.tsx
+++ b/packages/ui/builder/src/builder-button.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from "react"
+import React, { FC, useId, useCallback } from "react"
 
 import { generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { useInteraction, useStyles } from "@wpmudev/sui-hooks"
@@ -8,6 +8,7 @@ import { Button } from "@wpmudev/sui-button"
 import { BuilderButtonProps } from "./builder.types"
 
 const BuilderButton: FC<BuilderButtonProps> = ({
+	id,
 	icon = "Add",
 	title = "Insert new field",
 	className,
@@ -15,6 +16,8 @@ const BuilderButton: FC<BuilderButtonProps> = ({
 	onClick = () => {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const builderButtonId = id || `sui_builder_button_${generatedId}`
 	// `useInteraction` returns interaction state and methods.
 	const [isHovered, isFocused, methods] = useInteraction({})
 	const { suiInlineClassname } = useStyles(_style, className)
@@ -38,6 +41,7 @@ const BuilderButton: FC<BuilderButtonProps> = ({
 
 	return (
 		<Button
+			id={builderButtonId}
 			icon={icon}
 			className={classNames}
 			{...methods}
diff --git a/packages/ui/builder/src/builder-empty.tsx b/packages/ui/builder/src/builder-empty.tsx
index 0b2aa1f55..b708d89ff 100644
--- a/packages/ui/builder/src/builder-empty.tsx
+++ b/packages/ui/builder/src/builder-empty.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 
@@ -7,17 +7,21 @@ import { BuilderEmptyProps } from "./builder.types"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const BuilderEmpty: React.FC<BuilderEmptyProps> = ({
+	id,
 	title = "No fields added. Insert new field.",
 	className,
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const builderEmptyId = id || `sui_builder_empty_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 	// Class names based on interaction and disabled state.
 	const classNames = generateCN("sui-builder__empty", {}, suiInlineClassname)
 
 	return (
 		<div
+			id={builderEmptyId}
 			className={classNames}
 			data-testid="builder-empty"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/builder/src/builder-field.tsx b/packages/ui/builder/src/builder-field.tsx
index 165c4debc..b3f139b5a 100644
--- a/packages/ui/builder/src/builder-field.tsx
+++ b/packages/ui/builder/src/builder-field.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useState } from "react"
+import React, { Fragment, useId, useCallback, useState } from "react"
 import { _renderHTMLPropsSafely, generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { useInteraction, useStyles } from "@wpmudev/sui-hooks"
 import { Col } from "@wpmudev/sui-grid"
@@ -10,6 +10,7 @@ import Icons from "@wpmudev/sui-icons"
 import { BuilderFieldProps } from "./builder.types"
 
 const BuilderField: React.FC<BuilderFieldProps> = ({
+	id,
 	columnSize = 12,
 	icon,
 	title = "Field Title",
@@ -25,6 +26,8 @@ const BuilderField: React.FC<BuilderFieldProps> = ({
 	_htmlProps,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const builderFieldId = id || `sui_builder_field_${generatedId}`
 	// State to manage the expanded/collapsed state of the field
 	const [isExpanded, setIsExpanded] = useState<boolean>(false)
 
@@ -129,7 +132,11 @@ const BuilderField: React.FC<BuilderFieldProps> = ({
 
 	return (
 		<Col size={columnSize ?? 12} {...methods} _htmlProps={_htmlProps}>
-			<div className={classNames} data-testid="builder-field">
+			<div
+				id={builderFieldId}
+				className={classNames}
+				data-testid="builder-field"
+			>
 				<div className="sui-builder__field-header">
 					{allowDrag && (
 						<div
diff --git a/packages/ui/builder/src/builder-wrapper.tsx b/packages/ui/builder/src/builder-wrapper.tsx
index cdbb0dd6d..0023b726d 100644
--- a/packages/ui/builder/src/builder-wrapper.tsx
+++ b/packages/ui/builder/src/builder-wrapper.tsx
@@ -1,4 +1,4 @@
-import React, { Children, cloneElement } from "react"
+import React, { Children, cloneElement, useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import { Row } from "@wpmudev/sui-grid"
@@ -6,11 +6,14 @@ import { BuilderWrapperProps } from "./builder.types"
 import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 
 const BuilderWrapper: React.FC<BuilderWrapperProps> = ({
+	id,
 	className,
 	children,
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const builderWrapperId = id || `sui_builder_wrapper_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	// Class names based on interaction and disabled state.
@@ -21,6 +24,7 @@ const BuilderWrapper: React.FC<BuilderWrapperProps> = ({
 
 	return (
 		<Row
+			id={builderWrapperId}
 			className={classNames}
 			align={{ sm: "inline" }}
 			_htmlProps={{
diff --git a/packages/ui/builder/src/builder.tsx b/packages/ui/builder/src/builder.tsx
index fe96cdaf3..bb42cb128 100644
--- a/packages/ui/builder/src/builder.tsx
+++ b/packages/ui/builder/src/builder.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 
@@ -10,6 +10,7 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 
 // Build builder component
 const Builder: React.FC<BuilderProps> = ({
+	id,
 	className = "",
 	children,
 	allowAddFields = true,
@@ -18,6 +19,8 @@ const Builder: React.FC<BuilderProps> = ({
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const builderId = id || `sui_builder_${generatedId}`
 	// Default children content
 	children = useDefaultChildren(children)
 	const { suiInlineClassname } = useStyles(_style, `sui-layout ${className}`)
@@ -25,6 +28,7 @@ const Builder: React.FC<BuilderProps> = ({
 
 	return (
 		<div
+			id={builderId}
 			className={classNames}
 			data-testid="builder"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/builder/src/builder.types.ts b/packages/ui/builder/src/builder.types.ts
index 3188d9928..08eb20436 100644
--- a/packages/ui/builder/src/builder.types.ts
+++ b/packages/ui/builder/src/builder.types.ts
@@ -9,6 +9,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface BuilderProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the Builder.
+	 */
+	id?: string
 	/**
 	 * An optional class name to be applied to the Builder component.
 	 */
@@ -32,6 +36,10 @@ interface BuilderProps
 }
 
 interface BuilderButtonProps extends SuiStyleType {
+	/**
+	 * Unique identifier for the BuilderButton.
+	 */
+	id?: string
 	/**
 	 * An optional icon to be displayed within in button.
 	 */
@@ -59,6 +67,10 @@ interface BuilderButtonProps extends SuiStyleType {
 interface BuilderEmptyProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the BuilderEmpty.
+	 */
+	id?: string
 	/**
 	 * Optional title for the BuilderEmpty component.
 	 */
@@ -76,6 +88,10 @@ interface BuilderEmptyProps
 interface BuilderFieldProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the BuilderField.
+	 */
+	id?: string
 	/**
 	 * Optional number specifying the column size.
 	 */
@@ -148,6 +164,10 @@ interface BuilderFieldProps
 interface BuilderWrapperProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the BuilderWrapper.
+	 */
+	id?: string
 	/**
 	 * Optional CSS class name for styling the BuilderWrapper component.
 	 */
diff --git a/packages/ui/checkbox/src/checkbox-group.tsx b/packages/ui/checkbox/src/checkbox-group.tsx
index 0c29c0647..2081c8da5 100644
--- a/packages/ui/checkbox/src/checkbox-group.tsx
+++ b/packages/ui/checkbox/src/checkbox-group.tsx
@@ -44,7 +44,7 @@ const _CheckboxGroupInner = ({
 	const { suiInlineClassname } = useStyles(_style)
 
 	// Generate a unique ID for the checkbox group
-	const checkboxGroupId = id ?? `sui-checkbox-group-${uuid}`
+	const checkboxGroupId = id ?? `sui_checkbox_group_${uuid}`
 
 	// Define CSS class names for the checkbox group
 	const className = generateCN(
@@ -123,9 +123,7 @@ const _CheckboxGroupInner = ({
 
 					// Use initial id defined by user or generate a unique ID for the child checkbox
 					const checkboxId =
-						chekboxInitialId || `sui-checkbox-item-${uuid}-${index}`
-
-					// Find the current item based on ID and group
+						chekboxInitialId || `sui_checkbox_item_${uuid}_${index}` // Find the current item based on ID and group
 					const currItem = items.find(
 						(i) => i.id === checkboxId && i.groupId === checkboxGroupId,
 					)
diff --git a/packages/ui/checkbox/src/checkbox-wrapper.tsx b/packages/ui/checkbox/src/checkbox-wrapper.tsx
index c3fa2482f..d9189bb28 100644
--- a/packages/ui/checkbox/src/checkbox-wrapper.tsx
+++ b/packages/ui/checkbox/src/checkbox-wrapper.tsx
@@ -1,4 +1,4 @@
-import React, { Children, cloneElement, ReactElement } from "react"
+import React, { Children, cloneElement, ReactElement, useId } from "react"
 
 import { generateCN } from "@wpmudev/sui-utils"
 import { CheckboxProvider } from "./checkbox-context"
@@ -6,17 +6,20 @@ import { CheckboxGroupsProps } from "./checkbox.types"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const CheckBoxGroups: React.FC<CheckboxGroupsProps> = ({
+	id,
 	children,
 	commonCheckboxProps = {},
 	onChange = () => {},
 	_style,
 }) => {
+	const generatedId = useId()
+	const checkboxGroupsId = id || `sui_checkbox_groups_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 	const className = generateCN("sui-checkbox-wrapper", {}, suiInlineClassname)
 
 	return (
 		<CheckboxProvider onChange={onChange}>
-			<div className={className}>
+			<div id={checkboxGroupsId} className={className}>
 				{Children.map(children, (child, index) => {
 					return cloneElement(
 						child as any,
diff --git a/packages/ui/checkbox/src/checkbox.tsx b/packages/ui/checkbox/src/checkbox.tsx
index 62e87e7fd..0304d30e1 100644
--- a/packages/ui/checkbox/src/checkbox.tsx
+++ b/packages/ui/checkbox/src/checkbox.tsx
@@ -33,12 +33,8 @@ const Checkbox = ({
 	const { suiInlineClassname } = useStyles(_style)
 
 	// Generate a dynamic ID for the checkbox
-	let uuid = `sui-checkbox-${useId()}`
-
-	// use ID from props list if it exists
-	if (!!id) {
-		uuid = id
-	}
+	const generatedId = useId()
+	const uuid = id || `sui_checkbox_${generatedId}`
 
 	useEffect(() => {
 		// Add the checkbox details to the context list on component mount
@@ -69,7 +65,7 @@ const Checkbox = ({
 				propOnchange(e)
 			}
 		},
-		"aria-labelledby": `${uuid}-label`,
+		"aria-labelledby": `${uuid}_label`,
 		..._htmlProps,
 	}
 
@@ -109,7 +105,7 @@ const Checkbox = ({
 		// Checkbox label container
 		<label
 			{...containerProps}
-			id={`${uuid}-label`}
+			id={`${uuid}_label`}
 			htmlFor={uuid}
 			tabIndex={-1}
 			data-testid="checkbox"
@@ -128,9 +124,13 @@ const Checkbox = ({
 			)}
 			{/* Render label or hidden span based on isLabelHidden */}
 			{isLabelHidden ? (
-				<span className="sui-screen-reader-only">{label}</span>
+				<span className="sui-screen-reader-only" id={`${uuid}_label_text`}>
+					{label}
+				</span>
 			) : (
-				<span className="sui-checkbox__label">{label}</span>
+				<span className="sui-checkbox__label" id={`${uuid}_label_text`}>
+					{label}
+				</span>
 			)}
 		</label>
 	)
diff --git a/packages/ui/checkbox/src/checkbox.types.ts b/packages/ui/checkbox/src/checkbox.types.ts
index 8fe2a5be1..afaac201d 100644
--- a/packages/ui/checkbox/src/checkbox.types.ts
+++ b/packages/ui/checkbox/src/checkbox.types.ts
@@ -12,6 +12,10 @@ interface _CheckboxGroupInnerProps
  * Define the props for a CheckboxGroups component.
  */
 interface CheckboxGroupsProps extends SuiStyleType {
+	/**
+	 * Unique identifier for the CheckboxGroups.
+	 */
+	id?: string
 	/**
 	 * The children elements of the groups
 	 */
diff --git a/packages/ui/code-editor/src/code-editor.tsx b/packages/ui/code-editor/src/code-editor.tsx
index 076f28682..cd64ab990 100644
--- a/packages/ui/code-editor/src/code-editor.tsx
+++ b/packages/ui/code-editor/src/code-editor.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState, useEffect, useCallback } from "react"
+import React, { useId, useState, useEffect, useCallback } from "react"
 // @ts-ignore
 import ReactPrismEditor from "react-prism-editor"
 
@@ -19,6 +19,7 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
  * @return {JSX.Element} - JSX Element representing the CodeEditor component
  */
 const CodeEditor: React.FC<CodeEditorProps> = ({
+	id,
 	filename = "App.js",
 	language = "javascript",
 	allowCopy = true,
@@ -29,6 +30,8 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
 	_htmlProps,
 	_style,
 }) => {
+	const generatedId = useId()
+	const codeEditorId = id || `sui_code_editor_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className ?? "")
 
 	// Generate class names
@@ -60,6 +63,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
 
 	return (
 		<div
+			id={codeEditorId}
 			className={classNames}
 			data-testid="code-editor"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/code-editor/src/code-editor.types.ts b/packages/ui/code-editor/src/code-editor.types.ts
index b8f1131aa..ac6e38fb3 100644
--- a/packages/ui/code-editor/src/code-editor.types.ts
+++ b/packages/ui/code-editor/src/code-editor.types.ts
@@ -7,6 +7,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface CodeEditorProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the code editor.
+	 */
+	id?: string
 	/**
 	 * File name
 	 */
diff --git a/packages/ui/code-snippet/src/code-snippet.tsx b/packages/ui/code-snippet/src/code-snippet.tsx
index 69fc3ed4e..c3d428ae6 100644
--- a/packages/ui/code-snippet/src/code-snippet.tsx
+++ b/packages/ui/code-snippet/src/code-snippet.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react"
+import React, { useId, useState, useEffect, useCallback } from "react"
 import Prism from "prismjs"
 // import dedent from "dedent"
 
@@ -9,6 +9,7 @@ import { CodeSnippetProps } from "./code-snippet.types"
 import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 
 const CodeSnippet: React.FC<CodeSnippetProps> = ({
+	id,
 	language = "javascript",
 	copy = true,
 	className,
@@ -16,6 +17,8 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
 	_htmlProps,
 	_style,
 }) => {
+	const generatedId = useId()
+	const codeSnippetId = id || `sui_code_snippet_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className ?? "")
 	// generate class names
 	const classNames = generateCN("sui-code-snippet", {}, suiInlineClassname)
@@ -37,6 +40,7 @@ const CodeSnippet: React.FC<CodeSnippetProps> = ({
 
 	return (
 		<div
+			id={codeSnippetId}
 			className={classNames}
 			data-testid="code-snippet"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/code-snippet/src/code-snippet.types.ts b/packages/ui/code-snippet/src/code-snippet.types.ts
index 9c510ba37..ab105317d 100644
--- a/packages/ui/code-snippet/src/code-snippet.types.ts
+++ b/packages/ui/code-snippet/src/code-snippet.types.ts
@@ -7,6 +7,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface CodeSnippetProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the code snippet.
+	 */
+	id?: string
 	/**
 	 * The language of the code snippet.
 	 */
diff --git a/packages/ui/color-picker/src/color-picker.types.ts b/packages/ui/color-picker/src/color-picker.types.ts
index 739678ea5..f5a38e22a 100644
--- a/packages/ui/color-picker/src/color-picker.types.ts
+++ b/packages/ui/color-picker/src/color-picker.types.ts
@@ -62,10 +62,18 @@ interface ColorPickerProps
 }
 
 interface ColorPickerColorProps {
+	/**
+	 * Unique identifier for the ColorPickerColor.
+	 */
+	id?: string
 	colorCode: string
 }
 
 interface ColorPickerPickerProps {
+	/**
+	 * Unique identifier for the ColorPickerPicker.
+	 */
+	id?: string
 	color: ColorPickerProps["color"]
 	type: ColorPickerProps["type"]
 	disableAlpha: ColorPickerProps["disableAlpha"]
diff --git a/packages/ui/config-table/src/config-table-details.tsx b/packages/ui/config-table/src/config-table-details.tsx
index 1af77f544..85ffbf6d7 100644
--- a/packages/ui/config-table/src/config-table-details.tsx
+++ b/packages/ui/config-table/src/config-table-details.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { Table, TableBody, TableCell, TableRow } from "@wpmudev/sui-table"
 import { isEmpty } from "@wpmudev/sui-utils"
@@ -8,9 +8,12 @@ import { ConfigTableDetailsTypes } from "./config-table.types"
 
 // Render config options inside table content
 const ConfigTableDetails: React.FC<ConfigTableDetailsTypes> = ({
+	id,
 	config,
 	proItems,
 }) => {
+	const generatedId = useId()
+	const configTableDetailsId = id || `sui_config_table_details_${generatedId}`
 	let options: Array<any> = []
 
 	// Build options to render in the table
@@ -24,7 +27,7 @@ const ConfigTableDetails: React.FC<ConfigTableDetailsTypes> = ({
 	})
 
 	return (
-		<div className="sui-config-table__details">
+		<div id={configTableDetailsId} className="sui-config-table__details">
 			<div className="sui-config-table__details-header">
 				<h3 className="sui-heading--h5 sui-config-table__details--title">
 					{config?.name}
diff --git a/packages/ui/config-table/src/config-table.tsx b/packages/ui/config-table/src/config-table.tsx
index a7e8bc4e2..8d7de0804 100644
--- a/packages/ui/config-table/src/config-table.tsx
+++ b/packages/ui/config-table/src/config-table.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback } from "react"
+import React, { useId, Fragment, useCallback } from "react"
 
 import {
 	Table,
@@ -21,6 +21,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 
 // Render options to be displayed in a table.
 const ConfigTable: React.FC<ConfigTableTypes> = ({
+	id,
 	className = "",
 	configs,
 	onActionClick,
@@ -30,6 +31,8 @@ const ConfigTable: React.FC<ConfigTableTypes> = ({
 	_htmlProps,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const configTableId = id || `sui_config_table_${generatedId}`
 	/**
 	 * Handle an action click.
 	 *
@@ -51,7 +54,11 @@ const ConfigTable: React.FC<ConfigTableTypes> = ({
 	const classNames = generateCN("sui-config-table", {}, suiInlineClassname)
 
 	return (
-		<Table className={classNames} hasToolbar={false} _htmlProps={_htmlProps}>
+		<Table
+			className={classNames}
+			hasToolbar={false}
+			_htmlProps={{ ..._htmlProps, id: configTableId }}
+		>
 			<TableHead>
 				<TableRow actions={() => null}>
 					<TableCell isHeading={true} isPrimary={true}>
diff --git a/packages/ui/config-table/src/config-table.types.ts b/packages/ui/config-table/src/config-table.types.ts
index 3343f3cda..e36c19c62 100644
--- a/packages/ui/config-table/src/config-table.types.ts
+++ b/packages/ui/config-table/src/config-table.types.ts
@@ -14,6 +14,10 @@ type ConfigObj = Record<string, any>
 interface ConfigTableTypes
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the ConfigTable.
+	 */
+	id?: string
 	// Optional property to specify a custom CSS class for the component.
 	className?: string
 
@@ -35,6 +39,10 @@ interface ConfigTableTypes
 
 // Define the properties and methods config table details component
 interface ConfigTableDetailsTypes {
+	/**
+	 * Unique identifier for the ConfigTableDetails.
+	 */
+	id?: string
 	// Config object that can contain various properties.
 	config?: ConfigObj
 
diff --git a/packages/ui/dashboard-widget/src/dashboard-widget.tsx b/packages/ui/dashboard-widget/src/dashboard-widget.tsx
index 1c229688f..366f4dcdc 100644
--- a/packages/ui/dashboard-widget/src/dashboard-widget.tsx
+++ b/packages/ui/dashboard-widget/src/dashboard-widget.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback } from "react"
+import React, { useId, Fragment, useCallback } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import Icons from "@wpmudev/sui-icons"
@@ -15,6 +15,7 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
  * @param {DashboardWidgetProps} props - The component's props.
  */
 const DashboardWidget: React.FC<DashboardWidgetProps> = ({
+	id,
 	title = "Widget Title",
 	description = "Widget Description",
 	icon,
@@ -32,6 +33,8 @@ const DashboardWidget: React.FC<DashboardWidgetProps> = ({
 	_htmlProps,
 	_style = {},
 }: DashboardWidgetProps) => {
+	const generatedId = useId()
+	const dashboardWidgetId = id || `sui_dashboard_widget_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 
 	// Generate classnames for the dashboard widget
@@ -76,6 +79,7 @@ const DashboardWidget: React.FC<DashboardWidgetProps> = ({
 
 	return (
 		<div
+			id={dashboardWidgetId}
 			className={classNames}
 			data-testid="dashboard-widget"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/dashboard-widget/src/dashboard-widget.types.ts b/packages/ui/dashboard-widget/src/dashboard-widget.types.ts
index 186e7fd88..befcca767 100644
--- a/packages/ui/dashboard-widget/src/dashboard-widget.types.ts
+++ b/packages/ui/dashboard-widget/src/dashboard-widget.types.ts
@@ -12,6 +12,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface DashboardWidgetProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the dashboard widget.
+	 */
+	id?: string
 	/** The title of the widget */
 	title?: string
 
diff --git a/packages/ui/date-picker/src/date-picker.tsx b/packages/ui/date-picker/src/date-picker.tsx
index 4f7e2d784..a800f176b 100644
--- a/packages/ui/date-picker/src/date-picker.tsx
+++ b/packages/ui/date-picker/src/date-picker.tsx
@@ -34,7 +34,8 @@ const DatePicker: React.FC<DatePickerProps> = ({
 	_style,
 }) => {
 	// Generate a unique id for the input field using the useId hook
-	let uid = useId()
+	const generatedId = useId()
+	const uid = id || generatedId
 
 	const pickType: string = type ?? "single"
 	const { suiInlineClassname } = useStyles(_style, className ?? "")
@@ -49,10 +50,6 @@ const DatePicker: React.FC<DatePickerProps> = ({
 		suiInlineClassname,
 	)
 
-	if (!isEmpty(id)) {
-		uid = id
-	}
-
 	// Define aria attributes.
 	const datepickerProps = {
 		type,
diff --git a/packages/ui/drawer/src/drawer-body.tsx b/packages/ui/drawer/src/drawer-body.tsx
index ac8c20b70..9b9de3540 100644
--- a/packages/ui/drawer/src/drawer-body.tsx
+++ b/packages/ui/drawer/src/drawer-body.tsx
@@ -1,17 +1,24 @@
-import React from "react"
+import React, { useId } from "react"
 import { generateCN } from "@wpmudev/sui-utils"
 import { DrawerFooterTypes } from "./drawer.types"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const DrawerBody = ({
+	id,
 	className = "",
 	children,
 	_style,
 }: DrawerFooterTypes) => {
+	const generatedId = useId()
+	const drawerBodyId = id || `sui_drawer_body_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 	const classNames = generateCN("sui-drawer__body", {}, suiInlineClassname)
 
-	return <div className={classNames}>{children}</div>
+	return (
+		<div id={drawerBodyId} className={classNames}>
+			{children}
+		</div>
+	)
 }
 
 export { DrawerBody }
diff --git a/packages/ui/drawer/src/drawer-footer.tsx b/packages/ui/drawer/src/drawer-footer.tsx
index 324ec89d8..e1b339781 100644
--- a/packages/ui/drawer/src/drawer-footer.tsx
+++ b/packages/ui/drawer/src/drawer-footer.tsx
@@ -1,17 +1,24 @@
-import React from "react"
+import React, { useId } from "react"
 import { generateCN } from "@wpmudev/sui-utils"
 import { DrawerFooterTypes } from "./drawer.types"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const DrawerFooter = ({
+	id,
 	className = "",
 	children,
 	_style,
 }: DrawerFooterTypes) => {
+	const generatedId = useId()
+	const drawerFooterId = id || `sui_drawer_footer_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 	const classNames = generateCN("sui-drawer__footer", {}, suiInlineClassname)
 
-	return <div className={classNames}>{children}</div>
+	return (
+		<div id={drawerFooterId} className={classNames}>
+			{children}
+		</div>
+	)
 }
 
 export { DrawerFooter }
diff --git a/packages/ui/drawer/src/drawer-header.tsx b/packages/ui/drawer/src/drawer-header.tsx
index 78caa0cd2..ab8f8f6e3 100644
--- a/packages/ui/drawer/src/drawer-header.tsx
+++ b/packages/ui/drawer/src/drawer-header.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react"
+import React, { useCallback, useId } from "react"
 import { generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { Tooltip } from "@wpmudev/sui-tooltip"
 import { DrawerHeaderTypes } from "./drawer.types"
@@ -7,6 +7,7 @@ import { Button } from "@wpmudev/sui-button"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const DrawerHeader = ({
+	id,
 	className = "",
 	title = "",
 	hintText = "",
@@ -18,6 +19,8 @@ const DrawerHeader = ({
 	tooltipOptions = {},
 	_style,
 }: DrawerHeaderTypes) => {
+	const generatedId = useId()
+	const drawerHeaderId = id || `sui_drawer_header_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 	const classNames = generateCN("sui-drawer__header", {}, suiInlineClassname)
 
@@ -31,7 +34,7 @@ const DrawerHeader = ({
 	const { show, mobileOnly = false, action = () => {} } = back
 
 	return (
-		<div className={classNames}>
+		<div id={drawerHeaderId} className={classNames}>
 			<div className="sui-drawer__header-title">
 				{show && (
 					<div className={generateCN("sui-drawer__back", { md: mobileOnly })}>
diff --git a/packages/ui/drawer/src/drawer.tsx b/packages/ui/drawer/src/drawer.tsx
index a77663e40..7d1efcbeb 100644
--- a/packages/ui/drawer/src/drawer.tsx
+++ b/packages/ui/drawer/src/drawer.tsx
@@ -1,4 +1,5 @@
 import React, {
+	useId,
 	forwardRef,
 	useCallback,
 	useEffect,
@@ -18,6 +19,7 @@ import { DrawerProvider } from "./drawer-context"
 const Drawer = forwardRef<DrawerActions | null, DrawerTypes>(
 	(
 		{
+			id,
 			className = "",
 			children,
 			isOpen: propIsOpen = false,
@@ -33,6 +35,8 @@ const Drawer = forwardRef<DrawerActions | null, DrawerTypes>(
 		},
 		ref,
 	) => {
+		const generatedId = useId()
+		const drawerId = id || `sui_drawer_${generatedId}`
 		const [isVisible, setIsVisible] = useState<boolean>(false)
 		const [isOpen, setIsOpen] = useState<boolean>(propIsOpen ?? false)
 		const drawerRef = useRef<HTMLDivElement | null>(null)
@@ -102,6 +106,7 @@ const Drawer = forwardRef<DrawerActions | null, DrawerTypes>(
 		return (
 			<DrawerProvider value={{ isOpen, setIsOpen, toggle }}>
 				<div
+					id={drawerId}
 					className={classNames}
 					data-testid="drawer"
 					{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/drawer/src/drawer.types.ts b/packages/ui/drawer/src/drawer.types.ts
index c92863a74..aaf669103 100644
--- a/packages/ui/drawer/src/drawer.types.ts
+++ b/packages/ui/drawer/src/drawer.types.ts
@@ -12,6 +12,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 export interface DrawerTypes
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the drawer.
+	 */
+	id?: string
 	/**
 	 * Optional class name for styling
 	 */
@@ -67,6 +71,10 @@ export interface DrawerTypes
  * Define props for the DrawerHeader component
  */
 export interface DrawerHeaderTypes extends SuiStyleType {
+	/**
+	 * Unique identifier for the DrawerHeader.
+	 */
+	id?: string
 	/**
 	 * Title to be displayed in the DrawerHeader
 	 */
@@ -111,6 +119,10 @@ export interface DrawerHeaderTypes extends SuiStyleType {
  * Define props for the DrawerFooter component
  */
 export interface DrawerFooterTypes extends SuiStyleType {
+	/**
+	 * Unique identifier for the DrawerFooter.
+	 */
+	id?: string
 	/**
 	 * Optional class name for styling
 	 */
diff --git a/packages/ui/dropdown/src/dropdown-menu-item.tsx b/packages/ui/dropdown/src/dropdown-menu-item.tsx
index 7ecb147af..fcf7f69ac 100644
--- a/packages/ui/dropdown/src/dropdown-menu-item.tsx
+++ b/packages/ui/dropdown/src/dropdown-menu-item.tsx
@@ -15,6 +15,7 @@ import { Checkbox } from "@wpmudev/sui-checkbox"
 
 // Define the MenuItem component
 const DropdownMenuItem: FC<DropdownMenuItemProps> = ({
+	id,
 	icon,
 	href,
 	className = "",
@@ -34,9 +35,9 @@ const DropdownMenuItem: FC<DropdownMenuItemProps> = ({
 	const [isHovered, isFocused, methods] = useInteraction({})
 
 	// Generate a unique ID for the menu item and its related elements
-	const id = useId()
-	const menuId = `sui-dropdown-menu-item-${id}`
-	const menuTitleId = `${menuId}-title`
+	const generatedId = useId()
+	const menuId = id || `sui_dropdown_menu_item_${generatedId}`
+	const menuTitleId = `${menuId}_title`
 
 	// Determine the element tag name (either "li" or "a" based on the presence of href)
 	let TagName: string = "li"
@@ -122,6 +123,7 @@ const DropdownMenuItem: FC<DropdownMenuItemProps> = ({
 
 	// Prepare attributes for the menu item element
 	const attrs = {
+		id: menuId,
 		className: classNames,
 		href: !!href ? href : undefined,
 		tabIndex: isDisabled ? -1 : 0,
diff --git a/packages/ui/dropdown/src/dropdown-menu.tsx b/packages/ui/dropdown/src/dropdown-menu.tsx
index 34f1232c6..4bf61246b 100644
--- a/packages/ui/dropdown/src/dropdown-menu.tsx
+++ b/packages/ui/dropdown/src/dropdown-menu.tsx
@@ -1,20 +1,27 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { generateCN } from "@wpmudev/sui-utils"
 import { DropdownMenuProps } from "./dropdown.types"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 // Define the Menu component
-const DropdownMenu: React.FC<DropdownMenuProps> = ({
+const DropdownMenu: React.FC<DropdownMenuProps & { id?: string }> = ({
+	id,
 	className = "",
 	children,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const dropdownMenuId = id || `sui_dropdown_menu_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	const classNames = generateCN("sui-dropdown__menu", {}, suiInlineClassname)
 	// Render the Menu component with the provided children
-	return <div className={classNames}>{children}</div>
+	return (
+		<div id={dropdownMenuId} className={classNames}>
+			{children}
+		</div>
+	)
 }
 
 export { DropdownMenu }
diff --git a/packages/ui/dropdown/src/dropdown.tsx b/packages/ui/dropdown/src/dropdown.tsx
index 661cc545a..9ef0d872e 100644
--- a/packages/ui/dropdown/src/dropdown.tsx
+++ b/packages/ui/dropdown/src/dropdown.tsx
@@ -39,6 +39,7 @@ import { Spinner } from "@wpmudev/sui-spinner"
 const Dropdown = forwardRef<DropdownRefProps | null, DropdownProps>(
 	(
 		{
+			id,
 			type = "",
 			label,
 			className,
@@ -98,7 +99,8 @@ const Dropdown = forwardRef<DropdownRefProps | null, DropdownProps>(
 		const popoverRef = useRef<HTMLDivElement | null>(null)
 		const searchInputRef = useRef<HTMLInputElement | null>(null)
 		// Generate a unique identifier for the dropdown component.
-		const id = `sui-dropdown-${useId()}`
+		const generatedId = useId()
+		const dropdownId = id || `sui_dropdown_${generatedId}`
 
 		// Handle the closing of the dropdown when clicking outside the component.
 		useOuterClick(dropdownRef, () => {
@@ -441,16 +443,27 @@ const Dropdown = forwardRef<DropdownRefProps | null, DropdownProps>(
 					}}
 				>
 					{dropdownArrow && (
-						<div className="sui-dropdown__popover--arrow"></div>
+						<div
+							className="sui-dropdown__popover--arrow"
+							id={`${dropdownId}_arrow`}
+						></div>
 					)}
 					{renderContentOnTop && !!children && (
-						<div className="sui-dropdown__menu-content">{children}</div>
+						<div
+							className="sui-dropdown__menu-content"
+							id={`${dropdownId}_menu_content_top`}
+						>
+							{children}
+						</div>
 					)}
 					{/* Render the dropdown menu items */}
 					{(!!menu || isAsync) && (
 						<DropdownMenu>
 							{allowSearch && (
-								<div className="sui-dropdown__menu-nav-search">
+								<div
+									className="sui-dropdown__menu-nav-search"
+									id={`${dropdownId}_search`}
+								>
 									<Input
 										ref={searchInputRef}
 										icon="Search"
@@ -484,7 +497,12 @@ const Dropdown = forwardRef<DropdownRefProps | null, DropdownProps>(
 					)}
 					{/* Render additional children passed to the Dropdown component */}
 					{!!children && !renderContentOnTop && (
-						<div className="sui-dropdown__menu-content">{children}</div>
+						<div
+							className="sui-dropdown__menu-content"
+							id={`${dropdownId}_menu_content_bottom`}
+						>
+							{children}
+						</div>
 					)}
 				</div>
 			</div>
diff --git a/packages/ui/dropdown/src/dropdown.types.ts b/packages/ui/dropdown/src/dropdown.types.ts
index 611ff208a..06afa60c8 100644
--- a/packages/ui/dropdown/src/dropdown.types.ts
+++ b/packages/ui/dropdown/src/dropdown.types.ts
@@ -28,6 +28,10 @@ interface DropdownMenuProps extends SuiStyleType {
  */
 interface DropdownMenuItemProps extends SuiStyleType, SuiHTMLAttributes {
 	_type?: DropdownProps["type"]
+	/**
+	 * Optional custom ID for the dropdown menu item.
+	 */
+	id?: string
 	/**
 	 * URL to navigate to when the item is clicked (if the item is an anchor).
 	 */
@@ -99,6 +103,10 @@ interface DropdownMenuGroupProps
 			"className" | "title" | "href"
 		>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the DropdownMenuGroup.
+	 */
+	id?: string
 	/** Title of the MenuGroup. */
 	title: string
 	/** URL to navigate to when the MenuGroup is clicked. */
@@ -144,6 +152,10 @@ interface DropdownProps
 			"className"
 		>,
 		SuiStyleType {
+	/**
+	 * Optional custom ID for the dropdown.
+	 */
+	id?: string
 	/**
 	 * The type of dropdown.
 	 */
diff --git a/packages/ui/editor-toolbar/src/editor-toolbar-field.tsx b/packages/ui/editor-toolbar/src/editor-toolbar-field.tsx
index 3dc3103af..d79169862 100644
--- a/packages/ui/editor-toolbar/src/editor-toolbar-field.tsx
+++ b/packages/ui/editor-toolbar/src/editor-toolbar-field.tsx
@@ -1,15 +1,18 @@
-import React, { FC } from "react"
+import React, { FC, useId } from "react"
 import { Refresh, Spinner, CheckAlt } from "@wpmudev/sui-icons"
 import { generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { EditorToolbarFieldProps } from "./editor-toolbar.types"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const EditorToolbarField: FC<EditorToolbarFieldProps> = ({
+	id,
 	status = "saved",
 	statusText = "",
 	children,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const editorToolbarFieldId = id || `sui_editor_toolbar_field_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 	// Generate CSS class names for the editor toolbar component
 	const classNames = generateCN(
@@ -35,7 +38,7 @@ const EditorToolbarField: FC<EditorToolbarFieldProps> = ({
 
 	return (
 		// Render the editor-toolbar component
-		<div className={classNames}>
+		<div id={editorToolbarFieldId} className={classNames}>
 			{children}
 			<div className="sui-editor-toolbar__field--status">
 				{StatusTag}
diff --git a/packages/ui/editor-toolbar/src/editor-toolbar.tsx b/packages/ui/editor-toolbar/src/editor-toolbar.tsx
index 19ae8781b..daf86e5d4 100644
--- a/packages/ui/editor-toolbar/src/editor-toolbar.tsx
+++ b/packages/ui/editor-toolbar/src/editor-toolbar.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react"
+import React, { FC, useId } from "react"
 
 import { Button } from "@wpmudev/sui-button"
 import { generateCN, _renderHTMLPropsSafely } from "@wpmudev/sui-utils"
@@ -7,6 +7,7 @@ import { EditorToolbarProps } from "./editor-toolbar.types"
 import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 
 const EditorToolbar: FC<EditorToolbarProps> = ({
+	id,
 	title = "Toolbar Title",
 	actions,
 	disableSetting = false,
@@ -19,6 +20,8 @@ const EditorToolbar: FC<EditorToolbarProps> = ({
 	_htmlProps,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const editorToolbarId = id || `sui_editor_toolbar_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 	// Generate CSS class names for the editor toolbar component
 	const classNames = generateCN(
@@ -63,6 +66,7 @@ const EditorToolbar: FC<EditorToolbarProps> = ({
 	return (
 		// Render the editor-toolbar component
 		<div
+			id={editorToolbarId}
 			className={classNames}
 			data-testid="editor-toolbar"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/editor-toolbar/src/editor-toolbar.types.ts b/packages/ui/editor-toolbar/src/editor-toolbar.types.ts
index c4fa74598..b01585c56 100644
--- a/packages/ui/editor-toolbar/src/editor-toolbar.types.ts
+++ b/packages/ui/editor-toolbar/src/editor-toolbar.types.ts
@@ -8,6 +8,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface EditorToolbarProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the EditorToolbar.
+	 */
+	id?: string
 	/**
 	 * The title displayed in the editor toolbar.
 	 */
@@ -57,6 +61,10 @@ interface EditorToolbarProps
 
 // interface definition for the EditorToolbar
 interface EditorToolbarFieldProps extends SuiStyleType {
+	/**
+	 * Unique identifier for the EditorToolbarField.
+	 */
+	id?: string
 	/**
 	 * The title displayed in the editor toolbar.
 	 */
diff --git a/packages/ui/empty-state/src/empty-state.tsx b/packages/ui/empty-state/src/empty-state.tsx
index a720708a8..2670de05b 100644
--- a/packages/ui/empty-state/src/empty-state.tsx
+++ b/packages/ui/empty-state/src/empty-state.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import { EmptyStateProps } from "./empty-state.types"
@@ -11,12 +11,15 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
  * @return {JSX.Element} The rendered component.
  */
 const EmptyState: React.FC<EmptyStateProps> = ({
+	id,
 	logo,
 	className,
 	children,
 	_htmlProps = {},
 	_style = {},
 }: EmptyStateProps): JSX.Element => {
+	const generatedId = useId()
+	const emptyStateId = id || `sui_empty_state_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 	const classNames = generateCN("sui-empty-state", {}, suiInlineClassname)
 
@@ -27,7 +30,11 @@ const EmptyState: React.FC<EmptyStateProps> = ({
 	children = useDefaultChildren(children)
 
 	return (
-		<div className={classNames} {..._renderHTMLPropsSafely(_htmlProps)}>
+		<div
+			id={emptyStateId}
+			className={classNames}
+			{..._renderHTMLPropsSafely(_htmlProps)}
+		>
 			<div className="sui-empty-state__wrapper">
 				{/* Render the logo if provided. If it's an image URL, display it as an <img> element; otherwise, render it as is. */}
 				{!!logo && (
diff --git a/packages/ui/empty-state/src/empty-state.types.ts b/packages/ui/empty-state/src/empty-state.types.ts
index 9a8312c0f..e558324fc 100644
--- a/packages/ui/empty-state/src/empty-state.types.ts
+++ b/packages/ui/empty-state/src/empty-state.types.ts
@@ -10,6 +10,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface EmptyStateProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the empty state.
+	 */
+	id?: string
 	/**
 	 * The logo to be displayed in the empty state.
 	 * It can be a string representing the URL of an image or an HTML/SVG element.
diff --git a/packages/ui/field-list/src/field-list-item.tsx b/packages/ui/field-list/src/field-list-item.tsx
index ffaa32028..339beb683 100644
--- a/packages/ui/field-list/src/field-list-item.tsx
+++ b/packages/ui/field-list/src/field-list-item.tsx
@@ -22,7 +22,7 @@ const FieldListItem: React.FC<FieldListItemProps> = ({
 	const uniqueId = useId()
 
 	if (!id) {
-		id = `sui-field-list-${uniqueId}`
+		id = `sui_field_list_${uniqueId}`
 	}
 
 	// Default children content
@@ -56,9 +56,14 @@ const FieldListItem: React.FC<FieldListItemProps> = ({
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
 			{/* Display the item's content */}
-			<div className="sui-field-list__item-label">{children}</div>
+			<div className="sui-field-list__item-label" id={`${uniqueId}_label`}>
+				{children}
+			</div>
 			{hasToggle && (
-				<div className="sui-field-list__item-checkbox">
+				<div
+					className="sui-field-list__item-checkbox"
+					id={`${uniqueId}_checkbox`}
+				>
 					{/* Render the Toggle component with appropriate props */}
 					<Toggle
 						id={id}
@@ -71,7 +76,10 @@ const FieldListItem: React.FC<FieldListItemProps> = ({
 				</div>
 			)}
 			{!!actions && (
-				<div className="sui-field-list__item-actions">
+				<div
+					className="sui-field-list__item-actions"
+					id={`${uniqueId}_actions`}
+				>
 					{/* Render the actions here */}
 					{actions}
 				</div>
diff --git a/packages/ui/footer/src/footer.tsx b/packages/ui/footer/src/footer.tsx
index b8288d6da..cd73663ed 100644
--- a/packages/ui/footer/src/footer.tsx
+++ b/packages/ui/footer/src/footer.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { Facebook, Twitter, Instagram } from "@wpmudev/sui-icons"
 import { generateCN, _renderHTMLPropsSafely } from "@wpmudev/sui-utils"
@@ -21,6 +21,7 @@ const socialIcons = {
 
 // Build footer component
 const Footer: React.FC<FooterProps> = ({
+	id,
 	links,
 	logoImageLink,
 	logoHref,
@@ -32,6 +33,8 @@ const Footer: React.FC<FooterProps> = ({
 	_htmlProps,
 	_style,
 }) => {
+	const generatedId = useId()
+	const footerId = id || `sui_footer_${generatedId}`
 	let blocks: React.ReactNode[] = []
 
 	if (renderBlocks) {
@@ -50,6 +53,7 @@ const Footer: React.FC<FooterProps> = ({
 
 	return (
 		<div
+			id={footerId}
 			className={footerCN}
 			data-testid="footer"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/footer/src/footer.types.ts b/packages/ui/footer/src/footer.types.ts
index 2ac020e66..1f171f6aa 100644
--- a/packages/ui/footer/src/footer.types.ts
+++ b/packages/ui/footer/src/footer.types.ts
@@ -18,6 +18,10 @@ type FooterSocialLinkType = {
 interface FooterProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the footer.
+	 */
+	id?: string
 	/**
 	 * An optional function that can be used to render additional blocks within the footer.
 	 *
diff --git a/packages/ui/form-field/src/elements/error-message.tsx b/packages/ui/form-field/src/elements/error-message.tsx
index bf7401d85..b50e6ed45 100644
--- a/packages/ui/form-field/src/elements/error-message.tsx
+++ b/packages/ui/form-field/src/elements/error-message.tsx
@@ -10,7 +10,7 @@ const ErrorMessage: React.FC<FormFieldErrorProps> = ({
 	children,
 }) => (
 	<span
-		id={`${id}-error-message`}
+		id={`${id}_error_message`}
 		className="sui-form-field__helper sui-color-error--50"
 	>
 		{show && children}
diff --git a/packages/ui/form-field/src/elements/helper.tsx b/packages/ui/form-field/src/elements/helper.tsx
index 0b0ed43af..e45b2637d 100644
--- a/packages/ui/form-field/src/elements/helper.tsx
+++ b/packages/ui/form-field/src/elements/helper.tsx
@@ -17,7 +17,7 @@ const Helper: React.FC<FormFieldHelperProps> = ({ id, children, ...props }) => {
 	)
 
 	return (
-		<span id={`${id}-helper`} className={classNames}>
+		<span id={`${id}_helper`} className={classNames}>
 			{children}
 		</span>
 	)
diff --git a/packages/ui/form-field/src/elements/label.tsx b/packages/ui/form-field/src/elements/label.tsx
index b2a2aac07..eddee7eaf 100644
--- a/packages/ui/form-field/src/elements/label.tsx
+++ b/packages/ui/form-field/src/elements/label.tsx
@@ -35,7 +35,7 @@ const Label: React.FC<FormFieldLabelProps> = ({
 	return (
 		<label
 			htmlFor={id}
-			id={`${id}-label`}
+			id={`${id}_label`}
 			className={generateCN(classNames, {}, suiInlineClassname)}
 		>
 			{children}
diff --git a/packages/ui/form-field/src/form-field.tsx b/packages/ui/form-field/src/form-field.tsx
index 2a2718caf..21ff13070 100644
--- a/packages/ui/form-field/src/form-field.tsx
+++ b/packages/ui/form-field/src/form-field.tsx
@@ -58,10 +58,10 @@ const FormField: React.FC<FormFieldProps> = ({
 
 	// Define aria attributes.
 	const ariaAttrs = {
-		...(!isEmpty(label ?? "") && { "aria-labelledby": `${fieldId}-label` }),
-		...(!!helper && { "aria-describedby": `${fieldId}-helper` }),
+		...(!isEmpty(label ?? "") && { "aria-labelledby": `${fieldId}_label` }),
+		...(!!helper && { "aria-describedby": `${fieldId}_helper` }),
 		...(isErrored && {
-			"aria-errormessage": `${fieldId}-error-message`,
+			"aria-errormessage": `${fieldId}_error_message`,
 		}),
 	}
 
diff --git a/packages/ui/grid/src/elements/col.tsx b/packages/ui/grid/src/elements/col.tsx
index 9ee6ecb79..9a172dec1 100644
--- a/packages/ui/grid/src/elements/col.tsx
+++ b/packages/ui/grid/src/elements/col.tsx
@@ -1,16 +1,20 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import { ColProps } from "../grid.types"
 import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 
 const Col: React.FC<ColProps> = ({
+	id,
 	size,
 	children,
 	className,
 	_htmlProps = {},
 	_style,
 }) => {
+	const generatedId = useId()
+	const colId = id || `sui_col_${generatedId}`
+
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	// Convert the size object into responsive class names
@@ -42,7 +46,11 @@ const Col: React.FC<ColProps> = ({
 	children = useDefaultChildren(children, "{Column children content}")
 
 	return (
-		<div className={classNames} {..._renderHTMLPropsSafely(_htmlProps)}>
+		<div
+			id={colId}
+			className={classNames}
+			{..._renderHTMLPropsSafely(_htmlProps)}
+		>
 			{children}
 		</div>
 	)
diff --git a/packages/ui/grid/src/elements/row.tsx b/packages/ui/grid/src/elements/row.tsx
index 3d50a2460..b7afb66f0 100644
--- a/packages/ui/grid/src/elements/row.tsx
+++ b/packages/ui/grid/src/elements/row.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN, isEmpty } from "@wpmudev/sui-utils"
 
@@ -6,12 +6,16 @@ import { RowProps } from "../grid.types"
 import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 
 const Row: React.FC<RowProps> = ({
+	id,
 	align = { md: "inline" },
 	className,
 	children,
 	_htmlProps = {},
 	_style,
 }) => {
+	const generatedId = useId()
+	const rowId = id || `sui_row_${generatedId}`
+
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	const expectedAligns: Record<string, any> = {
@@ -48,6 +52,7 @@ const Row: React.FC<RowProps> = ({
 
 	return (
 		<div
+			id={rowId}
 			className={classNames}
 			data-testid="grid"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/grid/src/grid.types.ts b/packages/ui/grid/src/grid.types.ts
index 8590d7ed2..439312614 100644
--- a/packages/ui/grid/src/grid.types.ts
+++ b/packages/ui/grid/src/grid.types.ts
@@ -13,6 +13,10 @@ type RowAlignments = "xs" | "sm" | "md" | "lg" | "xl" | "default"
 interface ColProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the column.
+	 */
+	id?: string
 	/**
 	 * The size of the column.
 	 */
@@ -33,6 +37,10 @@ interface ColProps
 interface RowProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		Omit<SuiStyleType, "align" | "height"> {
+	/**
+	 * Unique identifier for the row.
+	 */
+	id?: string
 	/**
 	 * The alignment of the row
 	 */
diff --git a/packages/ui/icon/src/icon.tsx b/packages/ui/icon/src/icon.tsx
index 7a5e76735..efbd70b41 100644
--- a/packages/ui/icon/src/icon.tsx
+++ b/packages/ui/icon/src/icon.tsx
@@ -1,4 +1,5 @@
 import React, {
+	useId,
 	forwardRef,
 	Fragment,
 	Children,
@@ -33,6 +34,7 @@ const params = {
 const Icon = forwardRef<"svg", IconProps>(
 	(
 		{
+			id,
 			children,
 			className,
 			title, // use fallback values
@@ -48,6 +50,8 @@ const Icon = forwardRef<"svg", IconProps>(
 		},
 		ref,
 	) => {
+		const generatedId = useId()
+		const iconId = id || `sui_icon_${generatedId}`
 		const { suiInlineClassname } = useStyles(_style, className)
 
 		// Add variations to the classnames
@@ -62,6 +66,7 @@ const Icon = forwardRef<"svg", IconProps>(
 
 		// SVG props
 		const svgProps: Record<string, any> = {
+			id: iconId,
 			ref,
 			className,
 			title,
diff --git a/packages/ui/icon/src/icon.types.ts b/packages/ui/icon/src/icon.types.ts
index b5f426c24..53aefd0f5 100644
--- a/packages/ui/icon/src/icon.types.ts
+++ b/packages/ui/icon/src/icon.types.ts
@@ -8,6 +8,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface IconProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLOrSVGElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the icon.
+	 */
+	id?: string
 	/**
 	 * Custom element type to be used for rendering the icon.
 	 */
diff --git a/packages/ui/input/src/input.tsx b/packages/ui/input/src/input.tsx
index 1045e1b5a..86267b88c 100644
--- a/packages/ui/input/src/input.tsx
+++ b/packages/ui/input/src/input.tsx
@@ -280,12 +280,14 @@ const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
 		// Render component
 		return (
 			<div
+				id={`${id}_wrapper`}
 				className={classNames}
 				data-testid="input"
 				{...(customWidth && { style: { maxWidth: `${customWidth}px` } })}
 			>
 				{"start" === iconPosition && renderIcon()}
 				<div
+					id={`${id}_input_field`}
 					className={generateCN("sui-input__input-field", {
 						"has-hint": hasHintText,
 					})}
@@ -294,10 +296,20 @@ const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
 					{hasHintText && (
 						<Fragment>
 							{!isEmpty(value as string) && (
-								<div className="sui-input__input-field-text">{value}</div>
+								<div
+									className="sui-input__input-field-text"
+									id={`${id}_field_text`}
+								>
+									{value}
+								</div>
 							)}
 							{hasHintText && (
-								<div className="sui-input__input-field-hint">{hint}</div>
+								<div
+									className="sui-input__input-field-hint"
+									id={`${id}_field_hint`}
+								>
+									{hint}
+								</div>
 							)}
 						</Fragment>
 					)}
diff --git a/packages/ui/integration/src/integration.tsx b/packages/ui/integration/src/integration.tsx
index 4d1d914be..a16660a07 100644
--- a/packages/ui/integration/src/integration.tsx
+++ b/packages/ui/integration/src/integration.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState } from "react"
+import React, { useId, useState } from "react"
 
 import { Toggle } from "@wpmudev/sui-toggle"
 import { Tooltip } from "@wpmudev/sui-tooltip"
@@ -17,6 +17,7 @@ import {
 import { IntegrationProps } from "./integration.types"
 
 const Integration: React.FC<IntegrationProps> = ({
+	id,
 	title = "title",
 	description,
 	additionalInfo = "",
@@ -30,6 +31,8 @@ const Integration: React.FC<IntegrationProps> = ({
 	_htmlProps,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const integrationId = id || `sui_integration_${generatedId}`
 	// Define image object
 	const icon = Object.assign(
 		{
@@ -92,6 +95,7 @@ const Integration: React.FC<IntegrationProps> = ({
 
 	return (
 		<div
+			id={integrationId}
 			className={classNames}
 			data-testid="integration"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/integration/src/integration.types.ts b/packages/ui/integration/src/integration.types.ts
index 62767ab21..be45200dd 100644
--- a/packages/ui/integration/src/integration.types.ts
+++ b/packages/ui/integration/src/integration.types.ts
@@ -5,6 +5,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
  * This interface defines the props for the Integration component.
  */
 interface IntegrationProps extends SuiStyleType, SuiHTMLAttributes {
+	/**
+	 * Unique identifier for the integration.
+	 */
+	id?: string
 	/** The title of the integration. */
 	title?: string
 
diff --git a/packages/ui/link/src/link.tsx b/packages/ui/link/src/link.tsx
index d3760c60b..5d550bae5 100644
--- a/packages/ui/link/src/link.tsx
+++ b/packages/ui/link/src/link.tsx
@@ -1,4 +1,4 @@
-import React, { KeyboardEvent, MouseEvent } from "react"
+import React, { KeyboardEvent, MouseEvent, useId } from "react"
 
 import {
 	_renderHTMLPropsSafely,
@@ -18,6 +18,7 @@ import { LinkProps } from "./link.types"
 // Link component represents a clickable link element with optional features
 // like inline display, external link indication, and more.
 const Link: React.FC<LinkProps> = ({
+	id,
 	theme = "primary",
 	as = "a",
 	className = "",
@@ -31,6 +32,9 @@ const Link: React.FC<LinkProps> = ({
 	_style = {},
 	...props
 }) => {
+	const generatedId = useId()
+	const linkId = id || `sui_link_${generatedId}`
+
 	// Determine the HTML tag name to use
 	const TagName = as ?? "a"
 
@@ -58,6 +62,7 @@ const Link: React.FC<LinkProps> = ({
 	// Prepare the link props
 	const linkProps: Record<string, any> = {
 		...props,
+		id: linkId,
 		href,
 		className: classNames,
 		"data-testid": "link",
diff --git a/packages/ui/link/src/link.types.ts b/packages/ui/link/src/link.types.ts
index 574ed68d0..2d753d08a 100644
--- a/packages/ui/link/src/link.types.ts
+++ b/packages/ui/link/src/link.types.ts
@@ -10,6 +10,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface LinkProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLAnchorElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the link.
+	 */
+	id?: string
 	/**
 	 * Link location
 	 */
diff --git a/packages/ui/modal/src/modal-body.tsx b/packages/ui/modal/src/modal-body.tsx
index 787f9ee12..0a96f74b7 100644
--- a/packages/ui/modal/src/modal-body.tsx
+++ b/packages/ui/modal/src/modal-body.tsx
@@ -1,13 +1,16 @@
-import React from "react"
+import React, { useId } from "react"
 import { ModalBodyProps } from "./modal.types"
 import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 
 const ModalBody: React.FC<ModalBodyProps> = ({
+	id,
 	children,
 	_style,
 	_htmlProps,
 }) => {
+	const generatedId = useId()
+	const modalBodyId = id || `sui_modal_body_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 
 	// Default children content
@@ -15,6 +18,7 @@ const ModalBody: React.FC<ModalBodyProps> = ({
 
 	return (
 		<div
+			id={modalBodyId}
 			className={generateCN("sui-modal__body", {}, suiInlineClassname)}
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
diff --git a/packages/ui/modal/src/modal-footer.tsx b/packages/ui/modal/src/modal-footer.tsx
index 93b618df9..cd0db510d 100644
--- a/packages/ui/modal/src/modal-footer.tsx
+++ b/packages/ui/modal/src/modal-footer.tsx
@@ -1,14 +1,17 @@
-import React from "react"
+import React, { useId } from "react"
 import { ModalFooterProps } from "./modal.types"
 import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 
 const ModalFooter: React.FC<ModalFooterProps> = ({
+	id,
 	children,
 	isSpaced = false,
 	_style,
 	_htmlProps,
 }) => {
+	const generatedId = useId()
+	const modalFooterId = id || `sui_modal_footer_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 
 	// Default children content
@@ -16,6 +19,7 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
 
 	return (
 		<footer
+			id={modalFooterId}
 			className={generateCN(
 				"sui-modal__footer",
 				{
diff --git a/packages/ui/modal/src/modal-header.tsx b/packages/ui/modal/src/modal-header.tsx
index 5287bf14c..01becbebe 100644
--- a/packages/ui/modal/src/modal-header.tsx
+++ b/packages/ui/modal/src/modal-header.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext, useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { Button } from "@wpmudev/sui-button"
@@ -9,6 +9,7 @@ import { ModalContext } from "./modal"
 import { ModalHeaderProps } from "./modal.types"
 
 const ModalHeader: React.FC<ModalHeaderProps> = ({
+	id,
 	title = "header title",
 	children,
 	icon,
@@ -18,6 +19,8 @@ const ModalHeader: React.FC<ModalHeaderProps> = ({
 	_htmlProps,
 	_style,
 }) => {
+	const generatedId = useId()
+	const modalHeaderId = id || `sui_modal_header_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 	const ctx = useContext(ModalContext)
 	const { closeModal, variant } = ctx!
@@ -34,6 +37,7 @@ const ModalHeader: React.FC<ModalHeaderProps> = ({
 
 	return (
 		<header
+			id={modalHeaderId}
 			className={generateCN("sui-modal__header", {}, suiInlineClassname)}
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
diff --git a/packages/ui/modal/src/modal.tsx b/packages/ui/modal/src/modal.tsx
index 3bad24545..7e0609be6 100644
--- a/packages/ui/modal/src/modal.tsx
+++ b/packages/ui/modal/src/modal.tsx
@@ -114,6 +114,7 @@ const Modal = forwardRef<ModalActionsProps, ModalProps>(
 					{..._renderHTMLPropsSafely(_htmlProps)}
 				>
 					<div
+						id={`${uniqueId}_container`}
 						className={generateCN("sui-modal__container", {})}
 						role="dialog"
 						aria-modal="true"
@@ -122,7 +123,11 @@ const Modal = forwardRef<ModalActionsProps, ModalProps>(
 						{children}
 					</div>
 				</section>
-				<div className="sui-modal__overlay" role="presentation" />
+				<div
+					className="sui-modal__overlay"
+					id={`${uniqueId}_overlay`}
+					role="presentation"
+				/>
 			</ModalContext.Provider>,
 		)
 	},
diff --git a/packages/ui/modal/src/modal.types.ts b/packages/ui/modal/src/modal.types.ts
index 520173672..36c39aaf4 100644
--- a/packages/ui/modal/src/modal.types.ts
+++ b/packages/ui/modal/src/modal.types.ts
@@ -28,6 +28,7 @@ interface ModalContextProps
 interface ModalHeaderProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	id?: string
 	title?: string
 	children?: React.ReactNode
 	icon?: IconsNamesType
@@ -45,6 +46,7 @@ interface ModalHeaderProps
 interface ModalBodyProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	id?: string
 	children?: React.ReactNode
 }
 
@@ -52,6 +54,7 @@ interface ModalBodyProps
 interface ModalFooterProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	id?: string
 	isSpaced?: boolean
 	// ModalFooter content
 	children?: React.ReactNode
diff --git a/packages/ui/navigation-wpmudev/src/navigation-wpmudev.types.ts b/packages/ui/navigation-wpmudev/src/navigation-wpmudev.types.ts
index 8ab01e8bf..fea44f4c7 100644
--- a/packages/ui/navigation-wpmudev/src/navigation-wpmudev.types.ts
+++ b/packages/ui/navigation-wpmudev/src/navigation-wpmudev.types.ts
@@ -49,6 +49,10 @@ type Resources = {
  * Represents the properties for a WPMUDEV button props.
  */
 interface WPMUDEVButtonProps extends DropdownProps, SuiStyleType {
+	/**
+	 * Unique identifier for the WPMUDEVButton.
+	 */
+	id?: string
 	title?: string
 	plugins?: Plugin[]
 	upsell?: {
@@ -64,6 +68,10 @@ interface WPMUDEVButtonProps extends DropdownProps, SuiStyleType {
  * Represents the properties for a WPMUDEV help.
  */
 interface WPMUDEVHelpProps extends DropdownProps, SuiStyleType {
+	/**
+	 * Unique identifier for the WPMUDEVHelp.
+	 */
+	id?: string
 	label?: string
 	title?: string
 	titleLink?: LinkProps
@@ -86,6 +94,10 @@ interface WPMUDEVHelpProps extends DropdownProps, SuiStyleType {
  * Represents the properties for a WPMUDEV notification.
  */
 interface WPMUDEVNotificationProps extends DropdownProps, SuiStyleType {
+	/**
+	 * Unique identifier for the WPMUDEVNotification.
+	 */
+	id?: string
 	title?: string
 	label?: string
 	notifications: Notifications
@@ -96,6 +108,10 @@ interface WPMUDEVNotificationProps extends DropdownProps, SuiStyleType {
  * Represents the properties for a WPMUDEV notification.
  */
 interface WPMUDEVDrawerProps extends DrawerTypes, SuiStyleType {
+	/**
+	 * Unique identifier for the WPMUDEVDrawer.
+	 */
+	id?: string
 	title?: string
 	type?: "helper" | "hamburger" | "default"
 	toggleRef: RefObject<DrawerActions | null>
@@ -110,6 +126,10 @@ interface WPMUDEVDrawerProps extends DrawerTypes, SuiStyleType {
  * Represents the properties for a WPMUDEV user.
  */
 interface WPMUDEVUserProps extends SuiStyleType {
+	/**
+	 * Unique identifier for the WPMUDEVUser.
+	 */
+	id?: string
 	title: string
 	description?: string
 	avatarProps?: AvatarProps
@@ -125,6 +145,10 @@ interface WPMUDEVUserProps extends SuiStyleType {
  * Represents the properties for a Navigation Wrapper.
  */
 interface NavigationWrapperProps extends SuiHTMLAttributes, SuiStyleType {
+	/**
+	 * Unique identifier for the NavigationWrapper.
+	 */
+	id?: string
 	children: ReactNode
 }
 
diff --git a/packages/ui/navigation/src/navigation.tsx b/packages/ui/navigation/src/navigation.tsx
index 7c1425032..8a07bf8e0 100644
--- a/packages/ui/navigation/src/navigation.tsx
+++ b/packages/ui/navigation/src/navigation.tsx
@@ -1,4 +1,4 @@
-import React, { Children } from "react"
+import React, { useId, Children } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import { NavigationProps } from "./navigation.types"
@@ -8,6 +8,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 
 // Navigation component
 const Navigation: React.FC<NavigationProps> = ({
+	id,
 	children,
 	brand = { title: "title", description: "" },
 	user,
@@ -15,6 +16,8 @@ const Navigation: React.FC<NavigationProps> = ({
 	_htmlProps,
 	_style,
 }) => {
+	const generatedId = useId()
+	const navigationId = id || `sui_navigation_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 	// Generate CSS class names for the navigation component
 	const classNames = generateCN("sui-navigation", {}, suiInlineClassname)
@@ -23,6 +26,7 @@ const Navigation: React.FC<NavigationProps> = ({
 		// Render the navigation component
 
 		<nav
+			id={navigationId}
 			className={classNames}
 			data-testid="navigation"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/navigation/src/navigation.types.ts b/packages/ui/navigation/src/navigation.types.ts
index 2f8125aba..0a754003b 100644
--- a/packages/ui/navigation/src/navigation.types.ts
+++ b/packages/ui/navigation/src/navigation.types.ts
@@ -48,6 +48,10 @@ interface NavigationUserMenuGroupProps extends NavigationUserMenuBaseProps {
 }
 
 interface NavigationBrandProps extends SuiStyleType, SuiHTMLAttributes {
+	/**
+	 * Unique identifier for the NavigationBrand.
+	 */
+	id?: string
 	/*
 	 * Optional: Plugin information for the brand.
 	 */
@@ -80,6 +84,10 @@ type NavigationUserType = {
 }
 
 interface NavigationUserProps extends SuiHTMLAttributes, SuiStyleType {
+	/**
+	 * Unique identifier for the NavigationUser.
+	 */
+	id?: string
 	/*
 	 * User information.
 	 */
@@ -112,6 +120,10 @@ interface NavigationUserProps extends SuiHTMLAttributes, SuiStyleType {
 interface NavigationProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the Navigation.
+	 */
+	id?: string
 	/*
 	 * Brand information.
 	 */
diff --git a/packages/ui/notification/src/notification-renderer.tsx b/packages/ui/notification/src/notification-renderer.tsx
index c1831486d..137c38adc 100644
--- a/packages/ui/notification/src/notification-renderer.tsx
+++ b/packages/ui/notification/src/notification-renderer.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 import { useNotifications } from "./use-notification"
 import { Notification } from "./notification"
 import { useStyles } from "@wpmudev/sui-hooks"
@@ -6,9 +6,13 @@ import { generateCN } from "@wpmudev/sui-utils"
 import { NotificationRendererProps } from "./notification.types"
 
 const NotificationRenderer: React.FC<NotificationRendererProps> = ({
+	id,
 	className = "",
 	_style,
 }) => {
+	const generatedId = useId()
+	const notificationRendererId =
+		id || `sui_notification_renderer_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 	const { queue } = useNotifications()
 
@@ -18,6 +22,7 @@ const NotificationRenderer: React.FC<NotificationRendererProps> = ({
 
 	return (
 		<div
+			id={notificationRendererId}
 			className={generateCN(
 				"sui-notification__renderer",
 				{},
diff --git a/packages/ui/notification/src/notification.tsx b/packages/ui/notification/src/notification.tsx
index b1c4b98e1..651af360c 100644
--- a/packages/ui/notification/src/notification.tsx
+++ b/packages/ui/notification/src/notification.tsx
@@ -32,7 +32,7 @@ const Notification: React.FC<NotificationProps> = ({
 	if (!id) {
 		id = uniqueId
 	}
-	const notificationId = `sui-notification-${uniqueId}`
+	const notificationId = `sui_notification_${uniqueId}`
 
 	useEffect(() => {
 		if (!isInline && !isDismissible) {
@@ -86,8 +86,8 @@ const Notification: React.FC<NotificationProps> = ({
 			id={notificationId}
 			className={classNames}
 			role="alert"
-			aria-labelledby={`${notificationId}-title`}
-			aria-describedby={`${notificationId}-message`}
+			aria-labelledby={`${notificationId}_title`}
+			aria-describedby={`${notificationId}_message`}
 			data-testid="notification"
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
@@ -96,7 +96,7 @@ const Notification: React.FC<NotificationProps> = ({
 				{!!title && (
 					<span
 						className="sui-notification__title"
-						id={`${notificationId}-title`}
+						id={`${notificationId}_title`}
 					>
 						{title}
 					</span>
@@ -104,7 +104,7 @@ const Notification: React.FC<NotificationProps> = ({
 				{!!message && (
 					<span
 						className="sui-notification__message"
-						id={`${notificationId}-message`}
+						id={`${notificationId}_message`}
 					>
 						{message}
 					</span>
diff --git a/packages/ui/notification/src/notification.types.ts b/packages/ui/notification/src/notification.types.ts
index 0225f31e5..e2aae9e16 100644
--- a/packages/ui/notification/src/notification.types.ts
+++ b/packages/ui/notification/src/notification.types.ts
@@ -27,6 +27,10 @@ interface NotificationProps
 
 // NotificationRendererProps
 interface NotificationRendererProps extends SuiStyleType {
+	/**
+	 * Unique identifier for the NotificationRenderer.
+	 */
+	id?: string
 	className?: string // class name
 }
 
diff --git a/packages/ui/page-header/src/page-header.tsx b/packages/ui/page-header/src/page-header.tsx
index ed28f42c7..8a3f61039 100644
--- a/packages/ui/page-header/src/page-header.tsx
+++ b/packages/ui/page-header/src/page-header.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import { useStyles } from "@wpmudev/sui-hooks"
@@ -7,18 +7,21 @@ import { PageHeaderProps } from "./page-header.types"
 // Link component represents a clickable link element with optional features
 // like inline display, external link indication, and more.
 const PageHeader: React.FC<PageHeaderProps> = ({
+	id,
 	title = "Page Title",
 	actions = [],
 	className,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const pageHeaderId = id || `sui_page_header_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	// Generate CSS class names for the link
 	const classNames = generateCN("sui-page-header", {}, suiInlineClassname)
 
 	return (
-		<div className={classNames}>
+		<div id={pageHeaderId} className={classNames}>
 			<h1 className="sui-page-header__title">{title}</h1>
 			{actions.length > 0 && (
 				<div className="sui-page-header__actions">{actions}</div>
diff --git a/packages/ui/page-header/src/page-header.types.ts b/packages/ui/page-header/src/page-header.types.ts
index 5f939a3c9..cb678be8b 100644
--- a/packages/ui/page-header/src/page-header.types.ts
+++ b/packages/ui/page-header/src/page-header.types.ts
@@ -9,6 +9,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface PageHeaderProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the page header.
+	 */
+	id?: string
 	/**
 	 * The page title
 	 */
diff --git a/packages/ui/pagination/src/pagination.tsx b/packages/ui/pagination/src/pagination.tsx
index 5c01b918d..ff510c09e 100644
--- a/packages/ui/pagination/src/pagination.tsx
+++ b/packages/ui/pagination/src/pagination.tsx
@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useCallback } from "react"
+import React, { useId, useState, useEffect, useCallback } from "react"
 
 // import required module(s)
 import { PaginationProps } from "./pagination.types"
 import { PaginationNav } from "./pagination-nav"
 
 const Pagination: React.FC<PaginationProps> = ({
+	id,
 	limit = 5,
 	skip = false,
 	previousLabel = "Previous label",
@@ -16,6 +17,8 @@ const Pagination: React.FC<PaginationProps> = ({
 	_style,
 	_htmlProps,
 }) => {
+	const generatedId = useId()
+	const paginationId = id || `sui_pagination_${generatedId}`
 	// Number of Items should not be 0
 	if (numberOfItems === 0) {
 		throw new Error(
@@ -156,6 +159,7 @@ const Pagination: React.FC<PaginationProps> = ({
 
 	// Properties to pass to PaginationNav component
 	const properties = {
+		id: paginationId,
 		elementsStartIndex,
 		elementsEndIndex,
 		handlePageClick,
diff --git a/packages/ui/pagination/src/pagination.types.ts b/packages/ui/pagination/src/pagination.types.ts
index d204dca64..f31407bf9 100644
--- a/packages/ui/pagination/src/pagination.types.ts
+++ b/packages/ui/pagination/src/pagination.types.ts
@@ -27,6 +27,10 @@ interface PaginationCommonProps
  * Represents the properties for pagination component
  */
 interface PaginationProps extends PaginationCommonProps {
+	/**
+	 * Unique identifier for the pagination.
+	 */
+	id?: string
 	/**
 	 * The screen reader text for the previous button
 	 */
@@ -67,6 +71,10 @@ interface PaginationProps extends PaginationCommonProps {
  * Represents the properties for pagination navigation component
  */
 interface PaginationNavProps extends PaginationCommonProps {
+	/**
+	 * Unique identifier for the PaginationNav.
+	 */
+	id?: string
 	/**
 	 * Array of page numbers
 	 */
diff --git a/packages/ui/popover/src/popover.tsx b/packages/ui/popover/src/popover.tsx
index 027b940f1..0cb679b04 100644
--- a/packages/ui/popover/src/popover.tsx
+++ b/packages/ui/popover/src/popover.tsx
@@ -1,4 +1,5 @@
 import React, {
+	useId,
 	useCallback,
 	useState,
 	useRef,
@@ -28,6 +29,7 @@ import { PopoverProps } from "./popover.types"
 
 // Popover component
 const Popover: React.FC<PopoverProps> = ({
+	id,
 	isOpen = false,
 	image,
 	trigger = "Open Popup",
@@ -40,6 +42,8 @@ const Popover: React.FC<PopoverProps> = ({
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const popoverId = id || `sui_popover_${generatedId}`
 	const [isPopupOpen, setIsPopupOpen] = useState<boolean>(isOpen ?? false)
 	const [popupPositions, setPopupPositions] = useState<Record<string, any>>({
 		top: 0,
@@ -199,6 +203,7 @@ const Popover: React.FC<PopoverProps> = ({
 
 	return (
 		<div
+			id={popoverId}
 			ref={ref as LegacyRef<HTMLDivElement>}
 			className={!!classNames ? classNames : undefined}
 			data-testid="popover"
diff --git a/packages/ui/popover/src/popover.types.ts b/packages/ui/popover/src/popover.types.ts
index 6df9b2bf1..feca972e7 100644
--- a/packages/ui/popover/src/popover.types.ts
+++ b/packages/ui/popover/src/popover.types.ts
@@ -11,6 +11,10 @@ interface PopoverBaseProps
 			HTMLProps<HTMLButtonElement | HTMLSpanElement | HTMLAnchorElement>
 		>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the popover.
+	 */
+	id?: string
 	/**
 	 * Open popup on initial load
 	 */
diff --git a/packages/ui/progress-bar/src/progress-bar.tsx b/packages/ui/progress-bar/src/progress-bar.tsx
index aab514544..279d94532 100644
--- a/packages/ui/progress-bar/src/progress-bar.tsx
+++ b/packages/ui/progress-bar/src/progress-bar.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from "react"
+import React, { useId } from "react"
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import { Button } from "@wpmudev/sui-button"
 
@@ -11,6 +11,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 
 // Build "progress bar" component
 const ProgressBar: React.FC<ProgressBarProps> = ({
+	id,
 	label,
 	value,
 	size = "md",
@@ -24,6 +25,8 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
 	_htmlProps,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const progressBarId = id || `sui_progress_bar_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	// animation speed
@@ -52,6 +55,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
 
 	return (
 		<div
+			id={progressBarId}
 			className={classNames}
 			data-testid="progress-bar"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/progress-bar/src/progress-bar.types.ts b/packages/ui/progress-bar/src/progress-bar.types.ts
index da97df283..c8d5add49 100644
--- a/packages/ui/progress-bar/src/progress-bar.types.ts
+++ b/packages/ui/progress-bar/src/progress-bar.types.ts
@@ -7,6 +7,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface ProgressBarProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the progress bar.
+	 */
+	id?: string
 	/**
 	 * Label for the progress bar.
 	 */
diff --git a/packages/ui/radio/src/radio-group.tsx b/packages/ui/radio/src/radio-group.tsx
index 7237ec950..11620de30 100644
--- a/packages/ui/radio/src/radio-group.tsx
+++ b/packages/ui/radio/src/radio-group.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 
@@ -7,6 +7,7 @@ import { RadioGroupProps, RadioValueType } from "./radio.types"
 import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 
 const RadioGroup = ({
+	id,
 	isInline = true,
 	children,
 	name = "",
@@ -22,6 +23,8 @@ const RadioGroup = ({
 	_htmlProps = {},
 	_style,
 }: RadioGroupProps) => {
+	const generatedId = useId()
+	const radioGroupId = id || `sui_radio_group_${generatedId}`
 	const [current, setCurrent] = useState<RadioValueType>(defaultValue)
 
 	// update state when default value get changed
@@ -61,6 +64,7 @@ const RadioGroup = ({
 			}}
 		>
 			<div
+				id={radioGroupId}
 				className={radioClassNames}
 				role="radiogroup"
 				data-testid="radio-group"
diff --git a/packages/ui/radio/src/radio.tsx b/packages/ui/radio/src/radio.tsx
index f53f8c8a9..e855ab326 100644
--- a/packages/ui/radio/src/radio.tsx
+++ b/packages/ui/radio/src/radio.tsx
@@ -24,13 +24,12 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
 		// const [checked, setChecked] = useState(isChecked)
 		const [isHovered, isFocused, methods] = useInteraction({})
 
-		const uniqueId = useId()
-
-		let uuid = `sui-radio-${uniqueId}`
+		const generatedId = useId()
+		const uuid = id || `sui_radio_${generatedId}`
 
 		// If value not provided add a unique one
 		if (!value) {
-			value = `value-${uniqueId}`
+			value = `value-${generatedId}`
 		}
 
 		const {
@@ -42,11 +41,6 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
 			isSmall,
 		} = useRadio()
 
-		// use ID from props list if exists
-		if (!!id) {
-			uuid = id
-		}
-
 		// Handle on change
 		const handleOnChange = useCallback(() => {
 			onChange(value)
@@ -68,8 +62,8 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
 			disabled: isRadioDisabled,
 			"aria-label": label || "radio input",
 			onChange: handleOnChange,
-			"aria-labelledby": `${uuid}-label`,
-			...(description && { "aria-describedby": `${uuid}-description` }),
+			"aria-labelledby": `${uuid}_label`,
+			...(description && { "aria-describedby": `${uuid}_description` }),
 			..._renderHTMLPropsSafely(_htmlProps),
 		}
 
@@ -106,10 +100,10 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
 				{...methods}
 			>
 				<input {...inputProps} data-testid="radio-input" />
-				<span {...boxProps} tabIndex={-1}>
-					{checked && <span className="sui-radio__icon" />}
+				<span {...boxProps} id={`${uuid}_box`} tabIndex={-1}>
+					{checked && <span className="sui-radio__icon" id={`${uuid}_icon`} />}
 				</span>
-				<span id={`${uuid}-label`} className="sui-radio__label">
+				<span id={`${uuid}_label`} className="sui-radio__label">
 					{label}
 					{tag && (
 						<Tag
@@ -123,7 +117,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
 					)}
 				</span>
 				{description && (
-					<span id={`${uuid}-description`} className="sui-radio__description">
+					<span id={`${uuid}_description`} className="sui-radio__description">
 						{description}
 					</span>
 				)}
diff --git a/packages/ui/radio/src/radio.types.ts b/packages/ui/radio/src/radio.types.ts
index 560a848f1..cab9fdd90 100644
--- a/packages/ui/radio/src/radio.types.ts
+++ b/packages/ui/radio/src/radio.types.ts
@@ -12,6 +12,10 @@ interface RadioGroupProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType,
 		validationPropsType {
+	/**
+	 * Unique identifier for the RadioGroup.
+	 */
+	id?: string
 	/**
 	 * The name of the radio group.
 	 */
diff --git a/packages/ui/recipient/src/recipient-button.tsx b/packages/ui/recipient/src/recipient-button.tsx
index b3f1afb18..b4a1b655f 100644
--- a/packages/ui/recipient/src/recipient-button.tsx
+++ b/packages/ui/recipient/src/recipient-button.tsx
@@ -1,20 +1,24 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { isString } from "@wpmudev/sui-utils"
 import { Tooltip, TooltipProps } from "@wpmudev/sui-tooltip"
 
 interface RecipientButtonProps extends TooltipProps {
+	id?: string
 	className?: string
 	children?: React.ReactNode
 }
 
 // Build "Button" component.
 const RecipientButton: React.FC<RecipientButtonProps> = ({
+	id,
 	className,
 	children,
 	customWidth,
 	buttonProps,
 }) => {
+	const generatedId = useId()
+	const recipientButtonId = id || `sui_recipient_button_${generatedId}`
 	if (!!children && !isString(children)) {
 		throw new Error(
 			`Incorrect parameter type. More details below:\n\n⬇️ ⬇️ ⬇️\n\n📦 Shared UI - Components: Recipient\n\nThe parameter "children" used in the button element is not a string type.\n\n`,
@@ -23,6 +27,7 @@ const RecipientButton: React.FC<RecipientButtonProps> = ({
 
 	return (
 		<Tooltip
+			id={recipientButtonId}
 			buttonProps={{
 				type: "tertiary",
 				colorScheme: "black",
diff --git a/packages/ui/recipient/src/recipient-email.tsx b/packages/ui/recipient/src/recipient-email.tsx
index e1c8df656..3a49ef0f7 100644
--- a/packages/ui/recipient/src/recipient-email.tsx
+++ b/packages/ui/recipient/src/recipient-email.tsx
@@ -1,15 +1,19 @@
-import React, { Fragment } from "react"
+import React, { Fragment, useId } from "react"
 import { generateCN, isString, SuiStyleType } from "@wpmudev/sui-utils"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 interface RecipientEmailProps extends SuiStyleType {
+	id?: string
 	children?: React.ReactNode
 }
 
 const RecipientEmail: React.FC<RecipientEmailProps> = ({
+	id,
 	children,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const recipientEmailId = id || `sui_recipient_email_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 
 	if (!!children && !isString(children)) {
@@ -22,6 +26,7 @@ const RecipientEmail: React.FC<RecipientEmailProps> = ({
 		<Fragment>
 			{children && (
 				<span
+					id={recipientEmailId}
 					className={generateCN("sui-recipient__email", {}, suiInlineClassname)}
 				>
 					{children}
diff --git a/packages/ui/recipient/src/recipient-name.tsx b/packages/ui/recipient/src/recipient-name.tsx
index 3b57c1bb3..845bf8e73 100644
--- a/packages/ui/recipient/src/recipient-name.tsx
+++ b/packages/ui/recipient/src/recipient-name.tsx
@@ -1,15 +1,19 @@
-import React, { Fragment } from "react"
+import React, { Fragment, useId } from "react"
 import { generateCN, isString, SuiStyleType } from "@wpmudev/sui-utils"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 interface RecipientNameProps extends SuiStyleType {
+	id?: string
 	children?: React.ReactNode
 }
 
 const RecipientName: React.FC<RecipientNameProps> = ({
+	id,
 	children,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const recipientNameId = id || `sui_recipient_name_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 
 	if (!!children && !isString(children)) {
@@ -22,6 +26,7 @@ const RecipientName: React.FC<RecipientNameProps> = ({
 		<Fragment>
 			{children && (
 				<span
+					id={recipientNameId}
 					className={generateCN("sui-recipient__name", {}, suiInlineClassname)}
 				>
 					{children}
diff --git a/packages/ui/recipient/src/recipient.tsx b/packages/ui/recipient/src/recipient.tsx
index 55f333716..dea5e3934 100644
--- a/packages/ui/recipient/src/recipient.tsx
+++ b/packages/ui/recipient/src/recipient.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react"
+import React, { useId, Fragment } from "react"
 import { isEmpty, generateCN, _renderHTMLPropsSafely } from "@wpmudev/sui-utils"
 
 import { Avatar } from "@wpmudev/sui-avatar"
@@ -12,6 +12,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 
 // Build "recipient" component
 const Recipient: React.FC<RecipientProps> = ({
+	id,
 	userName = "name",
 	userEmail = "",
 	userImage,
@@ -21,6 +22,8 @@ const Recipient: React.FC<RecipientProps> = ({
 	_htmlProps,
 	_style,
 }) => {
+	const generatedId = useId()
+	const recipientId = id || `sui_recipient_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 
 	// Define recipient class.
@@ -35,6 +38,7 @@ const Recipient: React.FC<RecipientProps> = ({
 
 	return (
 		<div
+			id={recipientId}
 			className={className}
 			data-testid="recipients"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/recipient/src/recipient.type.ts b/packages/ui/recipient/src/recipient.type.ts
index 0002df8de..75464a7a6 100644
--- a/packages/ui/recipient/src/recipient.type.ts
+++ b/packages/ui/recipient/src/recipient.type.ts
@@ -8,6 +8,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface RecipientProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the recipient.
+	 */
+	id?: string
 	/**
 	 * Name of the receipient
 	 */
diff --git a/packages/ui/rich-text-editor/src/rich-text-editor.tsx b/packages/ui/rich-text-editor/src/rich-text-editor.tsx
index 474e327e4..5656367f8 100644
--- a/packages/ui/rich-text-editor/src/rich-text-editor.tsx
+++ b/packages/ui/rich-text-editor/src/rich-text-editor.tsx
@@ -31,7 +31,7 @@ declare const tinymce: Record<string, any>
  * @return {JSX.Element} - JSX Element representing the RichTextEditor component
  */
 const RichTextEditor: React.FC<RichTextEditorProps> = ({
-	id = "",
+	id,
 	actions = null,
 	tinyMCEOptions,
 	className = "",
@@ -47,8 +47,12 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
 	const [editor, setEditor] = useState<Record<string, any> | null>(null)
 	const [ref, setRef] = useState<HTMLElement>()
 
+	// Generate unique id if not provided
+	const generatedId = useId()
+	const uniqueId = id || generatedId
+
 	const attrs = {
-		id,
+		id: uniqueId,
 		...ariaAttrs,
 	}
 
@@ -166,7 +170,7 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
 			data-testid="rich-text-editor"
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
-			<div className="sui-rich-text-editor__header">
+			<div className="sui-rich-text-editor__header" id={`${uniqueId}_header`}>
 				<SegmentedControl
 					name="type"
 					defaultValue={editorType as string}
@@ -184,7 +188,7 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
 				</SegmentedControl>
 				{!!actions && actions}
 			</div>
-			<div className="sui-rich-text-editor__content">
+			<div className="sui-rich-text-editor__content" id={`${uniqueId}_content`}>
 				<div
 					className={generateCN("sui-rich-text-editor__textarea", {
 						hidden: "visual" !== editorType,
diff --git a/packages/ui/score/src/score.tsx b/packages/ui/score/src/score.tsx
index 88ec94e00..d51f96682 100644
--- a/packages/ui/score/src/score.tsx
+++ b/packages/ui/score/src/score.tsx
@@ -1,10 +1,11 @@
-import React from "react"
+import React, { useId } from "react"
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 
 import { ScoreProps } from "./score.types"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const Score: React.FC<ScoreProps> = ({
+	id,
 	bar = 50,
 	value = 50,
 	description,
@@ -15,6 +16,8 @@ const Score: React.FC<ScoreProps> = ({
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const scoreId = id || `sui_score_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	const classNames = generateCN(
@@ -33,6 +36,7 @@ const Score: React.FC<ScoreProps> = ({
 
 	return (
 		<div
+			id={scoreId}
 			className={classNames}
 			{..._renderHTMLPropsSafely(_htmlProps)}
 			data-testid="score"
diff --git a/packages/ui/score/src/score.types.ts b/packages/ui/score/src/score.types.ts
index 3e72d138b..6d39df7d0 100644
--- a/packages/ui/score/src/score.types.ts
+++ b/packages/ui/score/src/score.types.ts
@@ -9,6 +9,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface ScoreProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the score.
+	 */
+	id?: string
 	/** The length of the score bar to be displayed. */
 	bar: number
 	/** The value to be displayed in the score component. */
diff --git a/packages/ui/search/src/search-option-item.tsx b/packages/ui/search/src/search-option-item.tsx
index abdf6e4db..65a76ef9e 100644
--- a/packages/ui/search/src/search-option-item.tsx
+++ b/packages/ui/search/src/search-option-item.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react"
+import React, { useCallback, useId } from "react"
 
 import { generateCN, handleOnKeyDown } from "@wpmudev/sui-utils"
 import { useInteraction, useStyles } from "@wpmudev/sui-hooks"
@@ -6,11 +6,14 @@ import { useInteraction, useStyles } from "@wpmudev/sui-hooks"
 import { SearchOptionItemProps } from "./search.types"
 
 const SearchOptionItem: React.FC<SearchOptionItemProps> = ({
+	id,
 	children,
 	option,
 	onClick,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const searchOptionItemId = id || `sui_search_option_item_${generatedId}`
 	const [isHovered, isFocused, methods] = useInteraction({})
 
 	const { suiInlineClassname } = useStyles(_style)
@@ -33,6 +36,7 @@ const SearchOptionItem: React.FC<SearchOptionItemProps> = ({
 
 	return (
 		<button
+			id={searchOptionItemId}
 			role="menuitem"
 			className={className}
 			onClick={handleOnClick}
diff --git a/packages/ui/search/src/search-options.tsx b/packages/ui/search/src/search-options.tsx
index 6ddf8e730..197de1850 100644
--- a/packages/ui/search/src/search-options.tsx
+++ b/packages/ui/search/src/search-options.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react"
+import React, { useCallback, useId } from "react"
 
 import { generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { SearchOptionItem } from "./search-option-item"
@@ -6,12 +6,15 @@ import { SearchOptionsProps } from "./search.types"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const SearchOptions: React.FC<SearchOptionsProps> = ({
+	id,
 	options,
 	value,
 	setValue,
 	setIsPopoverVisible,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const searchOptionsId = id || `sui_search_options_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 	const className = generateCN("sui-search__options", {}, suiInlineClassname)
 
@@ -34,7 +37,7 @@ const SearchOptions: React.FC<SearchOptionsProps> = ({
 	}
 
 	return (
-		<div role="menu" className={className}>
+		<div id={searchOptionsId} role="menu" className={className}>
 			{options?.map((option, index) => (
 				<SearchOptionItem key={index} option={option} onClick={onOptionClick}>
 					{!isEmpty(value) && <span>{value}</span>}
diff --git a/packages/ui/search/src/search.tsx b/packages/ui/search/src/search.tsx
index efb5de824..2175bf566 100644
--- a/packages/ui/search/src/search.tsx
+++ b/packages/ui/search/src/search.tsx
@@ -33,7 +33,7 @@ const Search: React.FC<SearchProps> = ({
 
 	// Random search ID
 	let inputId = useId()
-	inputId = id ?? `sui-search-${inputId}`
+	inputId = id ?? `sui_search_${inputId}`
 
 	// Search wrapper ref
 	const searchRef = useRef<HTMLDivElement | null>(null)
diff --git a/packages/ui/search/src/search.types.ts b/packages/ui/search/src/search.types.ts
index 2fa573060..33a3535ed 100644
--- a/packages/ui/search/src/search.types.ts
+++ b/packages/ui/search/src/search.types.ts
@@ -71,12 +71,20 @@ type SearchBasicType = {
 type SearchProps = SearchSmartType | SearchBasicType
 
 interface SearchOptionItemProps extends SuiStyleType {
+	/**
+	 * Unique identifier for the SearchOptionItem.
+	 */
+	id?: string
 	children?: React.ReactNode
 	option: SearchOptionType
 	onClick(option: SearchOptionType): void
 }
 
 interface SearchOptionsProps extends SuiStyleType {
+	/**
+	 * Unique identifier for the SearchOptions.
+	 */
+	id?: string
 	options: SearchOptionType[]
 	value: string
 	setValue(label: string): void
diff --git a/packages/ui/segmented-control/src/segmented-control-button.tsx b/packages/ui/segmented-control/src/segmented-control-button.tsx
index e5a082a0f..36fab0c68 100644
--- a/packages/ui/segmented-control/src/segmented-control-button.tsx
+++ b/packages/ui/segmented-control/src/segmented-control-button.tsx
@@ -17,6 +17,7 @@ import { useSegmentedControl } from "./segmented-control-context"
 
 // Build segmented button
 const SegmentedControlButton: React.FC<SegmentedControlButtonProps> = ({
+	id,
 	value,
 	icon,
 	children,
@@ -27,11 +28,11 @@ const SegmentedControlButton: React.FC<SegmentedControlButtonProps> = ({
 	_style = {},
 }) => {
 	// Generate a unique ID for the radio button and set its ID attribute.
-	const uniqueId = useId()
-	const buttonId = `sui-radio-${uniqueId}`
+	const generatedId = useId()
+	const buttonId = id || `sui_radio_${generatedId}`
 
 	if (!value) {
-		value = `example-value-${uniqueId}`
+		value = `example-value-${generatedId}`
 	}
 
 	if (!children && !icon) {
diff --git a/packages/ui/segmented-control/src/segmented-control.types.ts b/packages/ui/segmented-control/src/segmented-control.types.ts
index 41f7cb15e..a0dc80f74 100644
--- a/packages/ui/segmented-control/src/segmented-control.types.ts
+++ b/packages/ui/segmented-control/src/segmented-control.types.ts
@@ -30,6 +30,8 @@ interface SegmentedControlProps
 interface SegmentedControlButtonProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLSpanElement>> {
+	// Optional custom ID for the button.
+	id?: string
 	// The value associated with the button.
 	value?: string | number
 	// A boolean indicating whether the button is disabled (optional).
diff --git a/packages/ui/select/src/select.types.ts b/packages/ui/select/src/select.types.ts
index 0f84eee41..ad55f8d63 100644
--- a/packages/ui/select/src/select.types.ts
+++ b/packages/ui/select/src/select.types.ts
@@ -151,6 +151,10 @@ interface SelectSearchInputProps
 }
 
 interface SelectDropdownProps extends useStylesTypes, SuiHTMLAttributes {
+	/**
+	 * Unique identifier for the SelectDropdown.
+	 */
+	id?: string
 	options: SelectBaseProps["options"]
 	onEvent?: (option: SelectOptionType) => void
 	selectAll?: () => void
@@ -171,6 +175,10 @@ interface SelectDropdownProps extends useStylesTypes, SuiHTMLAttributes {
 }
 
 interface SelectDropdownOptionProps {
+	/**
+	 * Unique identifier for the SelectDropdownOption.
+	 */
+	id?: string
 	option: SelectOptionType
 	children: JSX.Element
 	[props: string]: any
diff --git a/packages/ui/selector/src/selector.tsx b/packages/ui/selector/src/selector.tsx
index b1983e876..51b3c7918 100644
--- a/packages/ui/selector/src/selector.tsx
+++ b/packages/ui/selector/src/selector.tsx
@@ -12,6 +12,7 @@ const Selector: React.FC<SelectorProps> = forwardRef<
 >(
 	(
 		{
+			id,
 			label,
 			name = "",
 			value = "",
@@ -36,7 +37,8 @@ const Selector: React.FC<SelectorProps> = forwardRef<
 		ref,
 	) => {
 		// Generate a dynamic ID for the checkbox
-		const id = useId()
+		const generatedId = useId()
+		const uniqueId = id || generatedId
 
 		// Interaction methods for handling hover and focus
 		const [isHovered, isFocused, interactionMethods] = useInteraction({})
@@ -53,7 +55,7 @@ const Selector: React.FC<SelectorProps> = forwardRef<
 
 		return (
 			<label
-				htmlFor={id}
+				htmlFor={uniqueId}
 				tabIndex={isDisabled ? -1 : 0}
 				data-testid="selector"
 				className={generateCN(
@@ -75,7 +77,7 @@ const Selector: React.FC<SelectorProps> = forwardRef<
 				{/* Hidden radio input */}
 				<input
 					ref={ref}
-					id={id}
+					id={uniqueId}
 					name={name}
 					type="radio"
 					tabIndex={isDisabled ? -1 : 0}
@@ -100,7 +102,11 @@ const Selector: React.FC<SelectorProps> = forwardRef<
 					variation={variation ?? "default"}
 					isPro={isPro}
 				/>
-				{label && <span className="sui-screen-reader-only">{label}</span>}
+				{label && (
+					<span className="sui-screen-reader-only" id={`${uniqueId}_label`}>
+						{label}
+					</span>
+				)}
 			</label>
 		)
 	},
diff --git a/packages/ui/selector/src/selector.types.ts b/packages/ui/selector/src/selector.types.ts
index 3f44621ef..f512f3e9b 100644
--- a/packages/ui/selector/src/selector.types.ts
+++ b/packages/ui/selector/src/selector.types.ts
@@ -22,6 +22,8 @@ interface SelectorProps
 		>,
 		SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLLabelElement>> {
+	/** Optional custom ID for the selector */
+	id?: string
 	/** The label text for the radio input */
 	label?: string
 	/** The name attribute for the radio input */
@@ -61,6 +63,10 @@ interface SelectorProps
 }
 
 interface SelectorOptionProps extends SuiStyleType {
+	/**
+	 * Unique identifier for the SelectorOption.
+	 */
+	id?: string
 	iconOrBrandUrl: SelectorProps["iconOrBrandUrl"]
 	title: SelectorProps["title"]
 	description: SelectorProps["description"]
diff --git a/packages/ui/setting-block/src/setting-block.tsx b/packages/ui/setting-block/src/setting-block.tsx
index 5bd9f86e2..92594f9ef 100644
--- a/packages/ui/setting-block/src/setting-block.tsx
+++ b/packages/ui/setting-block/src/setting-block.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { Tag } from "@wpmudev/sui-tag"
 
@@ -9,6 +9,7 @@ import { SettingBlockProps } from "./setting-block.types"
 
 // Build "setting-block" component
 const SettingBlock: React.FC<SettingBlockProps> = ({
+	id,
 	title,
 	description,
 	className,
@@ -20,6 +21,8 @@ const SettingBlock: React.FC<SettingBlockProps> = ({
 	_htmlProps,
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const settingBlockId = id || `sui_setting_block_${generatedId}`
 	// Interaction methods
 	const [isHovered, isFocused, methods] = useInteraction({})
 
@@ -40,6 +43,7 @@ const SettingBlock: React.FC<SettingBlockProps> = ({
 
 	return (
 		<div
+			id={settingBlockId}
 			className={classNames}
 			{...methods}
 			data-testid="setting-block"
diff --git a/packages/ui/setting-block/src/setting-block.types.ts b/packages/ui/setting-block/src/setting-block.types.ts
index 79e41889e..e080a8d92 100644
--- a/packages/ui/setting-block/src/setting-block.types.ts
+++ b/packages/ui/setting-block/src/setting-block.types.ts
@@ -7,6 +7,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface SettingBlockOptionProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the SettingBlockOption.
+	 */
+	id?: string
 	/**
 	 * The title of the setting block option.
 	 * This prop is required and should be a string.
@@ -42,6 +46,10 @@ interface SettingBlockOptionProps
 interface SettingBlockProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the setting block.
+	 */
+	id?: string
 	/**
 	 * The title of the setting block.
 	 * This prop is required and should be a string.
diff --git a/packages/ui/setup-banner/src/setup-banner.tsx b/packages/ui/setup-banner/src/setup-banner.tsx
index 614949559..e8da8c8cf 100644
--- a/packages/ui/setup-banner/src/setup-banner.tsx
+++ b/packages/ui/setup-banner/src/setup-banner.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import {
 	_renderHTMLPropsSafely,
@@ -24,6 +24,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
  * @return {JSX.Element} - The rendered SetupBanner component.
  */
 const SetupBanner: React.FC<SetupBannerProps> = ({
+	id,
 	type = "smush",
 	title = "title",
 	className,
@@ -31,6 +32,8 @@ const SetupBanner: React.FC<SetupBannerProps> = ({
 	_htmlProps = {},
 	_style = {},
 }: SetupBannerProps): JSX.Element => {
+	const generatedId = useId()
+	const setupBannerId = id || `sui_setup_banner_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	const classNames = generateCN(
@@ -51,6 +54,7 @@ const SetupBanner: React.FC<SetupBannerProps> = ({
 
 	return (
 		<div
+			id={setupBannerId}
 			className={classNames}
 			data-testid="setup-banner"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/setup-banner/src/setup-banner.types.ts b/packages/ui/setup-banner/src/setup-banner.types.ts
index 9783ffc09..64904798b 100644
--- a/packages/ui/setup-banner/src/setup-banner.types.ts
+++ b/packages/ui/setup-banner/src/setup-banner.types.ts
@@ -11,6 +11,10 @@ import { useStylesTypes } from "@wpmudev/sui-hooks"
  * SetupBannerProps interface defines the props accepted by the SetupBanner component.
  */
 interface SetupBannerProps extends SuiStyleType, SuiHTMLAttributes {
+	/**
+	 * Unique identifier for the setup banner.
+	 */
+	id?: string
 	/**
 	 * The title to be displayed in the empty state (optional).
 	 */
diff --git a/packages/ui/sidebar/src/sidebar-dropdown.tsx b/packages/ui/sidebar/src/sidebar-dropdown.tsx
index 32809601b..4a7ddb45f 100644
--- a/packages/ui/sidebar/src/sidebar-dropdown.tsx
+++ b/packages/ui/sidebar/src/sidebar-dropdown.tsx
@@ -30,7 +30,7 @@ const SidebarDropdown: React.FC<SidebarProps> = forwardRef(
 		const dropdownRef = useRef<HTMLDivElement | null>(null)
 
 		// Generate a unique identifier for the dropdown component.
-		const id = `sui-dropdown-${useId()}`
+		const id = `sui_dropdown_${useId()}`
 
 		// State to manage the dropdown's open/closed status.
 		const [isOpen, setIsOpen] = useState<boolean>(false)
diff --git a/packages/ui/sidebar/src/sidebar-item.tsx b/packages/ui/sidebar/src/sidebar-item.tsx
index bc7b45336..744bf45cf 100644
--- a/packages/ui/sidebar/src/sidebar-item.tsx
+++ b/packages/ui/sidebar/src/sidebar-item.tsx
@@ -1,4 +1,4 @@
-import React, { KeyboardEvent, useCallback } from "react"
+import React, { KeyboardEvent, useCallback, useId } from "react"
 
 import {
 	_renderHTMLPropsSafely,
@@ -15,6 +15,7 @@ import { SidebarItemProps } from "./sidebar.types"
 // SidebarItem component using the SidebarItemProps interface.
 // This component represents an item within a sidebar navigation.
 const SidebarItem: React.FC<SidebarItemProps> = ({
+	id,
 	url = "#",
 	icon,
 	title = "Sidebar Item",
@@ -26,6 +27,9 @@ const SidebarItem: React.FC<SidebarItemProps> = ({
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const sidebarItemId = id || `sui_sidebar_item_${generatedId}`
+
 	// `useInteraction` returns interaction state and methods.
 	const [isHovered, isFocused, methods] = useInteraction({})
 	const { suiInlineClassname } = useStyles(_style, className)
@@ -62,6 +66,7 @@ const SidebarItem: React.FC<SidebarItemProps> = ({
 	// Return JSX structure representing the SidebarItem.
 	return (
 		<a
+			id={sidebarItemId}
 			className={classNames}
 			href={url}
 			tabIndex={isDisabled ? -1 : 0}
diff --git a/packages/ui/sidebar/src/sidebar.types.ts b/packages/ui/sidebar/src/sidebar.types.ts
index 3ef45eeb5..d5b8dd0f8 100644
--- a/packages/ui/sidebar/src/sidebar.types.ts
+++ b/packages/ui/sidebar/src/sidebar.types.ts
@@ -37,6 +37,10 @@ interface SidebarProps
 interface SidebarItemProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLAnchorElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the sidebar item.
+	 */
+	id?: string
 	/**
 	 * The URL associated with the SidebarItem.
 	 */
diff --git a/packages/ui/skeleton/src/skeleton-base.tsx b/packages/ui/skeleton/src/skeleton-base.tsx
index bb1cffdd5..c50a27734 100644
--- a/packages/ui/skeleton/src/skeleton-base.tsx
+++ b/packages/ui/skeleton/src/skeleton-base.tsx
@@ -1,9 +1,10 @@
-import React from "react"
+import React, { useId } from "react"
 import { useStyles } from "@wpmudev/sui-hooks"
 import { generateCN, _renderHTMLPropsSafely } from "@wpmudev/sui-utils"
 
 import type { SkeletonBaseProps } from "./skeleton.types"
 const Skeleton: React.FC<SkeletonBaseProps> = ({
+	id,
 	type = "block",
 	className = "",
 	children,
@@ -17,6 +18,8 @@ const Skeleton: React.FC<SkeletonBaseProps> = ({
 	_style = {},
 	_htmlProps = {},
 }) => {
+	const generatedId = useId()
+	const skeletonId = id || `sui_skeleton_${generatedId}`
 	const classes = `sui-skeleton__${type} ${className}`
 	const { width, height } = size
 	const _calculateStyles = {
@@ -46,7 +49,11 @@ const Skeleton: React.FC<SkeletonBaseProps> = ({
 	)
 
 	return (
-		<div className={classNames} {..._renderHTMLPropsSafely(_htmlProps)}></div>
+		<div
+			id={skeletonId}
+			className={classNames}
+			{..._renderHTMLPropsSafely(_htmlProps)}
+		></div>
 	)
 }
 
diff --git a/packages/ui/skeleton/src/skeleton.types.ts b/packages/ui/skeleton/src/skeleton.types.ts
index 3facb2b09..de8789f7c 100644
--- a/packages/ui/skeleton/src/skeleton.types.ts
+++ b/packages/ui/skeleton/src/skeleton.types.ts
@@ -1,6 +1,7 @@
 import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 
 interface SkeletonProps extends SuiStyleType, SuiHTMLAttributes {
+	id?: string
 	className?: string
 	children?: JSX.Element
 	isLoaded?: boolean
@@ -13,6 +14,7 @@ interface SkeletonProps extends SuiStyleType, SuiHTMLAttributes {
 // Skeleton base props.
 interface SkeletonBaseProps extends SkeletonProps {
 	key?: number
+	id?: string
 	type?: string
 	isInline?: boolean
 	isGrayScale?: boolean
@@ -20,6 +22,7 @@ interface SkeletonBaseProps extends SkeletonProps {
 
 // Skeleton text props.
 interface SkeletonTextProps extends SkeletonProps {
+	id?: string
 	lines?: number
 	gap?: number
 	endLineWidth?: string
diff --git a/packages/ui/spinner/src/spinner-hook.tsx b/packages/ui/spinner/src/spinner-hook.tsx
index 73ee73016..fde6921ef 100644
--- a/packages/ui/spinner/src/spinner-hook.tsx
+++ b/packages/ui/spinner/src/spinner-hook.tsx
@@ -13,7 +13,7 @@ const useSpinner = (
 
 	// Generate a unique ID for the spinner
 	const id = useId()
-	const spinnerId = `sui-spinner-${id}`
+	const spinnerId = `sui_spinner_${id}`
 
 	useEffect(() => {
 		const currentTargetRef = targetRef?.current
diff --git a/packages/ui/spinner/src/spinner.tsx b/packages/ui/spinner/src/spinner.tsx
index afe445b24..30b0b9e64 100644
--- a/packages/ui/spinner/src/spinner.tsx
+++ b/packages/ui/spinner/src/spinner.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN, isEmpty } from "@wpmudev/sui-utils"
 
@@ -8,6 +8,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 
 // Spinner component
 const Spinner: React.FC<SpinnerProps> = ({
+	id,
 	loaderSize = "lg",
 	colorScheme = "primary",
 	isContained = false,
@@ -16,6 +17,8 @@ const Spinner: React.FC<SpinnerProps> = ({
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const spinnerId = id || `sui_spinner_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 
 	// Generate class names for the spinner container
@@ -33,6 +36,7 @@ const Spinner: React.FC<SpinnerProps> = ({
 
 	return (
 		<div
+			id={spinnerId}
 			className={classNames}
 			data-testid="spinner"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/spinner/src/spinner.types.ts b/packages/ui/spinner/src/spinner.types.ts
index aafc76a1c..dca08d2c4 100644
--- a/packages/ui/spinner/src/spinner.types.ts
+++ b/packages/ui/spinner/src/spinner.types.ts
@@ -7,6 +7,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface SpinnerProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the spinner.
+	 */
+	id?: string
 	/**
 	 * Size of the spinner
 	 */
@@ -34,6 +38,10 @@ interface SpinnerProps
  * using a subset of SpinnerProps (size and color).
  */
 interface SpinnerLoaderProps extends SuiStyleType {
+	/**
+	 * Unique identifier for the SpinnerLoader.
+	 */
+	id?: string
 	loaderSize: SpinnerProps["loaderSize"]
 	colorScheme: SpinnerProps["colorScheme"]
 	isSpinning: SpinnerProps["isSpinning"]
diff --git a/packages/ui/summary-box/src/summary-box-body.tsx b/packages/ui/summary-box/src/summary-box-body.tsx
index dee5708f0..f328dc7e8 100644
--- a/packages/ui/summary-box/src/summary-box-body.tsx
+++ b/packages/ui/summary-box/src/summary-box-body.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { generateCN } from "@wpmudev/sui-utils"
 import { Col, Row } from "@wpmudev/sui-grid"
@@ -23,6 +23,7 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
  * @return {JSX.Element} The SummaryBoxBody component.
  */
 const SummaryBoxBody: React.FC<SummaryBoxBodyProps> = ({
+	id,
 	className,
 	children,
 	summaryItems = [],
@@ -30,6 +31,8 @@ const SummaryBoxBody: React.FC<SummaryBoxBodyProps> = ({
 	_htmlProps = {},
 	_style = {},
 }): JSX.Element => {
+	const generatedId = useId()
+	const summaryBoxBodyId = id || `sui_summary_box_body_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 	const classNames = generateCN("sui-summary-box__body", {}, suiInlineClassname)
 
@@ -57,7 +60,7 @@ const SummaryBoxBody: React.FC<SummaryBoxBodyProps> = ({
 		<BoxGroup
 			isInline={true}
 			className="sui-summary-box__info"
-			_htmlProps={_htmlProps}
+			_htmlProps={{ id: summaryBoxBodyId, ..._htmlProps }}
 		>
 			<Row align={{ md: "inline" }} className={classNames}>
 				{cols.map((col) => col)}
diff --git a/packages/ui/summary-box/src/summary-box-content.tsx b/packages/ui/summary-box/src/summary-box-content.tsx
index e8f0a63aa..3305a1745 100644
--- a/packages/ui/summary-box/src/summary-box-content.tsx
+++ b/packages/ui/summary-box/src/summary-box-content.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 
@@ -20,6 +20,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
  * @return {JSX.Element} The SummaryBoxContent component.
  */
 export const SummaryBoxContent: React.FC<SummaryBoxContentProps> = ({
+	id,
 	className,
 	children,
 	span = "half",
@@ -27,6 +28,8 @@ export const SummaryBoxContent: React.FC<SummaryBoxContentProps> = ({
 	_style,
 	_htmlProps,
 }) => {
+	const generatedId = useId()
+	const summaryBoxContentId = id || `sui_summary_box_content_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	const classNames = generateCN(
@@ -39,7 +42,7 @@ export const SummaryBoxContent: React.FC<SummaryBoxContentProps> = ({
 	)
 
 	return (
-		<div className={classNames} {..._htmlProps}>
+		<div id={summaryBoxContentId} className={classNames} {..._htmlProps}>
 			{children}
 		</div>
 	)
diff --git a/packages/ui/summary-box/src/summary-box-footer.tsx b/packages/ui/summary-box/src/summary-box-footer.tsx
index a9530f555..7e7f69d5d 100644
--- a/packages/ui/summary-box/src/summary-box-footer.tsx
+++ b/packages/ui/summary-box/src/summary-box-footer.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { generateCN } from "@wpmudev/sui-utils"
 
@@ -17,11 +17,14 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
  * @return {JSX.Element} The SummaryFooterBody component.
  */
 const SummaryFooterBody: React.FC<SummaryFooterBodyProps> = ({
+	id,
 	className,
 	children,
 	_style = {},
 	...props
 }) => {
+	const generatedId = useId()
+	const summaryFooterBodyId = id || `sui_summary_footer_body_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 	const classNames = generateCN(
 		"sui-summary-box__footer",
@@ -33,7 +36,11 @@ const SummaryFooterBody: React.FC<SummaryFooterBodyProps> = ({
 	children = useDefaultChildren(children, "{summary footer body}")
 	// Render the SummaryFooterBody component with a div element, applying the specified CSS classes.
 	return (
-		<div className={classNames} data-testid="summary-box-footer">
+		<div
+			id={summaryFooterBodyId}
+			className={classNames}
+			data-testid="summary-box-footer"
+		>
 			{children}
 		</div>
 	)
diff --git a/packages/ui/summary-box/src/summary-box-item.tsx b/packages/ui/summary-box/src/summary-box-item.tsx
index 00480d843..b50a3b191 100644
--- a/packages/ui/summary-box/src/summary-box-item.tsx
+++ b/packages/ui/summary-box/src/summary-box-item.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { useInteraction, useStyles } from "@wpmudev/sui-hooks"
@@ -32,6 +32,7 @@ import { SummaryBoxItemProps } from "./summary-box.types"
  * @return {JSX.Element} The SummaryBoxItem component.
  */
 const SummaryBoxItem: React.FC<SummaryBoxItemProps> = ({
+	id,
 	title = "",
 	titleUrl = "",
 	description = "",
@@ -45,6 +46,8 @@ const SummaryBoxItem: React.FC<SummaryBoxItemProps> = ({
 	_htmlProps = {},
 	_style = {},
 }: SummaryBoxItemProps): JSX.Element => {
+	const generatedId = useId()
+	const summaryBoxItemId = id || `sui_summary_box_item_${generatedId}`
 	// Hook for handling interaction state (hover, focus).
 	const [isHovered, isFocused, methods] = useInteraction({})
 	const { suiInlineClassname } = useStyles(_style, className)
@@ -69,7 +72,11 @@ const SummaryBoxItem: React.FC<SummaryBoxItemProps> = ({
 		<Row
 			className={classNames}
 			{...methods}
-			_htmlProps={{ "data-testid": "summary-box-item", ..._htmlProps }}
+			_htmlProps={{
+				id: summaryBoxItemId,
+				"data-testid": "summary-box-item",
+				..._htmlProps,
+			}}
 		>
 			<div className="sui-summary-box__list-item-info">
 				{!isEmpty(titleUrl) ? (
diff --git a/packages/ui/summary-box/src/summary-box-row.tsx b/packages/ui/summary-box/src/summary-box-row.tsx
index a59c46cb1..959129d10 100644
--- a/packages/ui/summary-box/src/summary-box-row.tsx
+++ b/packages/ui/summary-box/src/summary-box-row.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import { SummaryBoxRowProps } from "./summary-box.types"
@@ -17,17 +17,20 @@ import { useStyles } from "@wpmudev/sui-hooks"
  * @return {JSX.Element} The SummaryBoxRow component.
  */
 export const SummaryBoxRow: React.FC<SummaryBoxRowProps> = ({
+	id,
 	className,
 	children,
 	_style,
 	_htmlProps,
 }) => {
+	const generatedId = useId()
+	const summaryBoxRowId = id || `sui_summary_box_row_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	const classNames = generateCN("sui-summary-box__row", {}, suiInlineClassname)
 
 	return (
-		<div className={classNames} {..._htmlProps}>
+		<div id={summaryBoxRowId} className={classNames} {..._htmlProps}>
 			{children}
 		</div>
 	)
diff --git a/packages/ui/summary-box/src/summary-box.tsx b/packages/ui/summary-box/src/summary-box.tsx
index e27176e9b..df8f1cfad 100644
--- a/packages/ui/summary-box/src/summary-box.tsx
+++ b/packages/ui/summary-box/src/summary-box.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import { Box } from "@wpmudev/sui-box"
@@ -26,6 +26,7 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
  * @return {JSX.Element} The SummaryBox component.
  */
 const SummaryBox: React.FC<SummaryBoxProps> = ({
+	id,
 	title = "title",
 	icon,
 	hideMobileIcon = true,
@@ -36,11 +37,14 @@ const SummaryBox: React.FC<SummaryBoxProps> = ({
 	_htmlProps = {},
 	_style = {},
 }: SummaryBoxProps): JSX.Element => {
+	const generatedId = useId()
+	const summaryBoxId = id || `sui_summary_box_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 	const classNames = generateCN("sui-summary-box", {}, suiInlineClassname)
 
 	// Define the attributes for the Box component that will be used to display the summary box.
 	const attrs = {
+		id: summaryBoxId,
 		title,
 		className: classNames,
 		icon, // The icon will be set later based on the provided icon prop or a default value.
diff --git a/packages/ui/summary-box/src/summary-box.types.ts b/packages/ui/summary-box/src/summary-box.types.ts
index 6e61438d5..a846cc035 100644
--- a/packages/ui/summary-box/src/summary-box.types.ts
+++ b/packages/ui/summary-box/src/summary-box.types.ts
@@ -13,6 +13,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface SummaryBoxProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the summary box.
+	 */
+	id?: string
 	/**
 	 * The title of the summary box (required).
 	 */
@@ -53,6 +57,10 @@ interface SummaryBoxProps
 interface SummaryBoxBodyProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the summary box body.
+	 */
+	id?: string
 	/**
 	 * Additional CSS class names for the summary box body element (optional).
 	 */
@@ -79,6 +87,10 @@ interface SummaryBoxBodyProps
 interface SummaryBoxItemProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the summary box item.
+	 */
+	id?: string
 	/**
 	 * The title of the summary item (optional).
 	 */
@@ -130,6 +142,10 @@ interface SummaryBoxItemProps
 interface SummaryFooterBodyProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the summary footer body.
+	 */
+	id?: string
 	/**
 	 * Additional CSS class names for the summary box footer element (optional).
 	 */
@@ -148,6 +164,10 @@ interface SummaryFooterBodyProps
 interface SummaryBoxContentProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the summary box content.
+	 */
+	id?: string
 	/**
 	 * Additional CSS class names for the summary box content
 	 */
@@ -174,6 +194,10 @@ interface SummaryBoxContentProps
 interface SummaryBoxRowProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the summary box row.
+	 */
+	id?: string
 	/**
 	 * Additional CSS class names for the summary box row
 	 */
diff --git a/packages/ui/table/src/table-row.tsx b/packages/ui/table/src/table-row.tsx
index 846d16d03..b6d81ccde 100644
--- a/packages/ui/table/src/table-row.tsx
+++ b/packages/ui/table/src/table-row.tsx
@@ -62,8 +62,8 @@ const TableRow: React.FC<TableRowProps> = ({
 
 	// Generate unique IDs for accessibility
 	const uniqueID = useId()
-	const rowId = `sui-table-row-${uniqueID}${!!id ? `-${id}` : ``}`
-	const rowContentId = `${rowId}-content`
+	const rowId = `sui_table_row_${uniqueID}${!!id ? `_${id}` : ``}`
+	const rowContentId = `${rowId}_content`
 
 	// Handle row checkbox toggle
 	const onCheckToggle = useCallback(
@@ -252,7 +252,7 @@ const TableRow: React.FC<TableRowProps> = ({
 					>
 						<Checkbox
 							name={rowId}
-							id={`${rowId}-checkbox`}
+							id={`${rowId}_checkbox`}
 							isDisabled={disableCheck}
 							onChange={onCheckToggle}
 							isChecked={isChecked}
diff --git a/packages/ui/table/src/table-toolbar.tsx b/packages/ui/table/src/table-toolbar.tsx
index d3a352289..45b6f8094 100644
--- a/packages/ui/table/src/table-toolbar.tsx
+++ b/packages/ui/table/src/table-toolbar.tsx
@@ -36,9 +36,9 @@ const TableToolbar: React.FC<TableSectionProps> = ({
 
 	// Generate unique IDs for accessibility
 	const uniqueId = useId()
-	const filterBtnId = `sui-table-toolbar-filter-${uniqueId}`
-	const bodyId = `sui-table-toolbar-body-${uniqueId}`
-	const bulkDropdown = `sui-table-toolbar-bulk-${uniqueId}`
+	const filterBtnId = `sui_table_toolbar_filter_${uniqueId}`
+	const bodyId = `sui_table_toolbar_body_${uniqueId}`
+	const bulkDropdown = `sui_table_toolbar_bulk_${uniqueId}`
 
 	const { suiInlineClassname } = useStyles(_style)
 	const ctx = useContext(TableContext)
@@ -119,7 +119,7 @@ const TableToolbar: React.FC<TableSectionProps> = ({
 						</div>
 					)}
 					<Input
-						id="input-id-4"
+						id={`${uniqueId}_search`}
 						className="sui-table__toolbar-search"
 						placeholder="Search"
 						onChange={onSearch}
diff --git a/packages/ui/table/src/table.types.ts b/packages/ui/table/src/table.types.ts
index 95d98e23e..5e8ce5c05 100644
--- a/packages/ui/table/src/table.types.ts
+++ b/packages/ui/table/src/table.types.ts
@@ -514,6 +514,10 @@ interface TableToolbarContentProps
 }
 
 interface TableFieldsProps extends SuiStyleType {
+	/**
+	 * Unique identifier for the TableFields.
+	 */
+	id?: string
 	children: React.ReactNode
 }
 
diff --git a/packages/ui/tabs/src/tabs.tsx b/packages/ui/tabs/src/tabs.tsx
index d3d3ad50f..c0f2805a0 100644
--- a/packages/ui/tabs/src/tabs.tsx
+++ b/packages/ui/tabs/src/tabs.tsx
@@ -1,5 +1,5 @@
 // Import necessary modules and types
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 
@@ -9,12 +9,15 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 
 // Define the Accordion component as a functional component (React.FC)
 const Tabs: React.FC<TabsProps> = ({
+	id,
 	className,
 	children,
 	_htmlProps,
 	_style = {},
 	...props
 }) => {
+	const generatedId = useId()
+	const tabsId = id || `sui_tabs_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 	// Generate CSS class names for the Accordion component
 	const classNames = generateCN("sui-tab", {}, suiInlineClassname)
@@ -29,6 +32,7 @@ const Tabs: React.FC<TabsProps> = ({
 			activeIndex={props?.activeIndex}
 		>
 			<div
+				id={tabsId}
 				className={classNames}
 				{..._renderHTMLPropsSafely(_htmlProps)}
 				data-testid="tabs"
diff --git a/packages/ui/tabs/src/tabs.types.ts b/packages/ui/tabs/src/tabs.types.ts
index 4038d5833..862fd4536 100644
--- a/packages/ui/tabs/src/tabs.types.ts
+++ b/packages/ui/tabs/src/tabs.types.ts
@@ -12,6 +12,7 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface TabsProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	id?: string // Unique identifier for the tabs component.
 	className?: string // Additional CSS class names for the `Tabs` component.
 	children?: React.ReactNode // The children components rendered inside the `Tabs` component.
 	activeIndex?: number
@@ -38,6 +39,7 @@ interface TabContextProps {
 interface TabNavProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	id?: string // Unique identifier for the tab navigation.
 	children?: React.ReactNode // Content of the tab navigation (can be any valid React node).
 	isNarrow?: boolean
 }
diff --git a/packages/ui/tag/src/tag.tsx b/packages/ui/tag/src/tag.tsx
index dfe40dbe8..1ff072718 100644
--- a/packages/ui/tag/src/tag.tsx
+++ b/packages/ui/tag/src/tag.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 import {
 	_renderHTMLPropsSafely,
 	generateCN,
@@ -10,6 +10,7 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 import { Close } from "@wpmudev/sui-icons"
 
 const Tag: React.FC<TagProps> = ({
+	id,
 	design,
 	colorScheme,
 	contentWrap = "default",
@@ -23,6 +24,9 @@ const Tag: React.FC<TagProps> = ({
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const tagId = id || `sui_tag_${generatedId}`
+
 	const hasDesign = "outlined" === design
 	const hasColor = !isUndefined(colorScheme) && !isEmpty(colorScheme)
 	const hasStyle = ["multiline", "truncated"].includes(contentWrap)
@@ -50,6 +54,7 @@ const Tag: React.FC<TagProps> = ({
 
 	return (
 		<span
+			id={tagId}
 			className={classNames}
 			{..._renderHTMLPropsSafely(_htmlProps)}
 			data-testid="tag"
diff --git a/packages/ui/tag/src/tag.types.ts b/packages/ui/tag/src/tag.types.ts
index 813a6b119..838efba8f 100644
--- a/packages/ui/tag/src/tag.types.ts
+++ b/packages/ui/tag/src/tag.types.ts
@@ -19,6 +19,10 @@ interface TagProps
 			"className" | "color"
 		>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the tag.
+	 */
+	id?: string
 	/**
 	 * Design of the tag.
 	 */
diff --git a/packages/ui/toggle/src/toggle.tsx b/packages/ui/toggle/src/toggle.tsx
index ca787388f..16b7f581c 100644
--- a/packages/ui/toggle/src/toggle.tsx
+++ b/packages/ui/toggle/src/toggle.tsx
@@ -18,6 +18,7 @@ import { ToggleProps } from "./toggle.types"
 
 // Build "Toggle" component
 const Toggle: React.FC<ToggleProps> = ({
+	id,
 	label,
 	description,
 	defaultValue = false,
@@ -29,7 +30,8 @@ const Toggle: React.FC<ToggleProps> = ({
 	...props
 }) => {
 	// use id
-	const id = `sui-toggle-${useId()}`
+	const generatedId = useId()
+	const toggleId = id || `sui_toggle_${generatedId}`
 
 	const [state, setState] = useState<boolean>(defaultValue as boolean)
 	const [isHovered, isFocused, methods] = useInteraction({
@@ -90,26 +92,37 @@ const Toggle: React.FC<ToggleProps> = ({
 	}
 
 	return (
-		<div className="sui-toggle__container">
-			<label {...containerProps} htmlFor={id} data-testid="toggle">
+		<div className="sui-toggle__container" id={`${toggleId}_container`}>
+			<label {...containerProps} htmlFor={toggleId} data-testid="toggle">
 				<input
 					{...(inputProps as HTMLProps<HTMLInputElement>)}
-					id={id}
+					id={toggleId}
 					onChange={handleOnChange}
 					{..._renderHTMLPropsSafely(_htmlProps)}
 				/>
-				<span tabIndex={-1} className="sui-toggle__switch" />
+				<span
+					tabIndex={-1}
+					className="sui-toggle__switch"
+					id={`${toggleId}_switch`}
+				/>
 				{isLabelHidden && (
-					<span className="sui-screen-reader-only">{label}</span>
+					<span className="sui-screen-reader-only" id={`${toggleId}_label`}>
+						{label}
+					</span>
 				)}
 				{!isLabelHidden && (
-					<span className="sui-toggle__label" data-testid="toggle-label">
+					<span
+						className="sui-toggle__label"
+						id={`${toggleId}_label`}
+						data-testid="toggle-label"
+					>
 						{label}
 					</span>
 				)}
 			</label>
 			{description && (
 				<div
+					id={`${toggleId}_description`}
 					className="sui-toggle__description"
 					data-testid="toggle-description"
 				>
diff --git a/packages/ui/tooltip/src/tooltip.tsx b/packages/ui/tooltip/src/tooltip.tsx
index 4a0fb4a54..e756b153e 100644
--- a/packages/ui/tooltip/src/tooltip.tsx
+++ b/packages/ui/tooltip/src/tooltip.tsx
@@ -26,6 +26,7 @@ import { TooltipProps } from "./tooltip.types"
 
 // Build "Tooltip" component.
 const Tooltip: React.FC<TooltipProps> = ({
+	id,
 	label,
 	type = "button",
 	className,
@@ -46,7 +47,8 @@ const Tooltip: React.FC<TooltipProps> = ({
 }) => {
 	// detect RTL
 	const isRTL = useDetectRTL()
-	const uniqueId = useId()
+	const generatedId = useId()
+	const uniqueId = id || `sui_tooltip_${generatedId}`
 
 	const [isVisible, setIsVisible] = useState(false)
 	const [pos, setPos] = useState({ top: 0, left: 0 })
@@ -60,7 +62,7 @@ const Tooltip: React.FC<TooltipProps> = ({
 		if (tooltipRef.current) {
 			const parentRect = tooltipRef?.current?.getBoundingClientRect()
 			const trigger = triggerRef?.current?.getBoundingClientRect()
-			const popupEl = document.getElementById(`sui-tooltip-${uniqueId}`)
+			const popupEl = document.getElementById(uniqueId)
 			const tooltipHeight = popupEl?.clientHeight || 0
 			const tooltipWidth = popupEl?.clientWidth || 0
 			const alignName = isRTL ? "right" : "left"
@@ -331,7 +333,7 @@ const Tooltip: React.FC<TooltipProps> = ({
 			{!!children &&
 				render(
 					<div
-						id={`sui-tooltip-${uniqueId}`}
+						id={`sui_tooltip_${uniqueId}`}
 						className={generateCN("sui-tooltip__popup", {
 							show: isVisible,
 							focus: isFocused,
diff --git a/packages/ui/tooltip/src/tooltip.types.ts b/packages/ui/tooltip/src/tooltip.types.ts
index fb395b0bd..8bf2771e5 100644
--- a/packages/ui/tooltip/src/tooltip.types.ts
+++ b/packages/ui/tooltip/src/tooltip.types.ts
@@ -15,6 +15,10 @@ interface TooltipBaseProps
 		>,
 		SuiStyleType,
 		InteractionTypes {
+	/**
+	 * Optional custom ID for the tooltip.
+	 */
+	id?: string
 	/**
 	 * Button link
 	 */
diff --git a/packages/ui/tree-view/src/tree-view-info.tsx b/packages/ui/tree-view/src/tree-view-info.tsx
index db8d9c6c3..d430c9716 100644
--- a/packages/ui/tree-view/src/tree-view-info.tsx
+++ b/packages/ui/tree-view/src/tree-view-info.tsx
@@ -115,7 +115,7 @@ const TreeViewInfo: React.FC<TreeViewInfoProps> = ({
 	return (
 		<div
 			className={classNames}
-			id={`info-${id}`}
+			id={`info_${id}`}
 			data-testid={_isGroup ? "" : "tree-view-item-info"}
 			{...(!ctx?.allowCheck && {
 				tabIndex: isDisabled ? -1 : 0,
@@ -152,7 +152,7 @@ const TreeViewInfo: React.FC<TreeViewInfoProps> = ({
 					<ItemIcon size="sm" className="sui-tree-view__info-icon" />
 				)}
 				{/* Render the item's title */}
-				<span id={`${id}-title`}>{children}</span>
+				<span id={`${id}_title`}>{children}</span>
 			</div>
 		</div>
 	)
diff --git a/packages/ui/tree-view/src/tree-view-item.tsx b/packages/ui/tree-view/src/tree-view-item.tsx
index 4ce5c09fc..9c355e65c 100644
--- a/packages/ui/tree-view/src/tree-view-item.tsx
+++ b/packages/ui/tree-view/src/tree-view-item.tsx
@@ -77,7 +77,7 @@ const TreeViewItem: React.FC<TreeViewItemProps> = ({
 			className={classNames}
 			role="treeitem"
 			aria-labelledby={id}
-			aria-describedby={`${id} ${itemId}-info-title`}
+			aria-describedby={`${id} ${itemId}_info_title`}
 			aria-expanded={isExpanded}
 			aria-selected={false}
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/uploader/src/uploader-button.tsx b/packages/ui/uploader/src/uploader-button.tsx
index 772a90326..89644ccfc 100644
--- a/packages/ui/uploader/src/uploader-button.tsx
+++ b/packages/ui/uploader/src/uploader-button.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useRef } from "react"
+import React, { useId, useRef } from "react"
 
 import { Button } from "@wpmudev/sui-button"
 import { generateCN, handleOnKeyDown, isEmpty } from "@wpmudev/sui-utils"
@@ -19,12 +19,15 @@ import { UploaderButtonProps } from "./uploader.types"
  * @return {JSX.Element} The JSX representation of the UploaderButton component.
  */
 const UploaderButton: React.FC<UploaderButtonProps> = ({
+	id,
 	btnTitle = "",
 	allowDragAndDrop = false,
 	onClick = () => {},
 	onDrag = () => {},
 	_style = {},
 }: UploaderButtonProps): JSX.Element => {
+	const generatedId = useId()
+	const uploaderButtonId = id || `sui_uploader_button_${generatedId}`
 	// Ref for the div used to handle drag-and-drop
 	const dragRef = useRef<HTMLDivElement | null>(null)
 
@@ -52,6 +55,7 @@ const UploaderButton: React.FC<UploaderButtonProps> = ({
 	if (allowDragAndDrop) {
 		return (
 			<div
+				id={uploaderButtonId}
 				tabIndex={0}
 				role="button"
 				ref={dragRef}
@@ -72,6 +76,7 @@ const UploaderButton: React.FC<UploaderButtonProps> = ({
 
 	return (
 		<Button
+			id={uploaderButtonId}
 			className={generateCN("sui-uploader__button", {}, suiInlineClassname)}
 			type="primary"
 			colorScheme="blue"
diff --git a/packages/ui/uploader/src/uploader.tsx b/packages/ui/uploader/src/uploader.tsx
index 263ed8c37..1d2cb04c2 100644
--- a/packages/ui/uploader/src/uploader.tsx
+++ b/packages/ui/uploader/src/uploader.tsx
@@ -27,6 +27,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 
 // The Uploader component displays a file uploader with drag-and-drop support and file previews.
 const Uploader: React.FC<UploaderProps> = ({
+	id,
 	btnTitle = "Upload File",
 	multiple = true,
 	accept = "",
@@ -48,8 +49,8 @@ const Uploader: React.FC<UploaderProps> = ({
 	const [files, setFiles] = useState<Record<string, any>[]>([])
 
 	// Generate a unique ID for the uploader component
-	const uniqueID = useId()
-	const uploaderId = `sui-uploader-${uniqueID}`
+	const generatedId = useId()
+	const uploaderId = id || `sui_uploader_${generatedId}`
 
 	// load default files
 	useEffect(() => {
@@ -181,6 +182,7 @@ const Uploader: React.FC<UploaderProps> = ({
 		<Fragment>
 			<NotificationRenderer />
 			<div
+				id={uploaderId}
 				className={generateCN("sui-uploader", {}, suiInlineClassname)}
 				data-testid="uploader"
 				{..._renderHTMLPropsSafely(_htmlProps)}
@@ -189,7 +191,7 @@ const Uploader: React.FC<UploaderProps> = ({
 				{!onClick && (
 					<input
 						type="file"
-						id={uploaderId}
+						id={`${uploaderId}_input`}
 						ref={ref}
 						onChange={onSelectFile}
 						className="sui-uploader__input"
@@ -204,6 +206,7 @@ const Uploader: React.FC<UploaderProps> = ({
 				{/* Render the uploader button when multiple selection is allowed or no files are selected */}
 				{(multiple || (!multiple && files.length <= 0)) && (
 					<UploaderButton
+						id={`${uploaderId}_button`}
 						btnTitle={btnTitle ?? ""}
 						multiple={multiple ?? false}
 						allowDragAndDrop={allowDragAndDrop ?? false}
@@ -213,12 +216,12 @@ const Uploader: React.FC<UploaderProps> = ({
 				)}
 				{/* Render the file previews when there are selected files */}
 				{!!files && files.length > 0 && (
-					<div className="sui-uploader__preview">
-						<div className="sui-uploader__files">
+					<div className="sui-uploader__preview" id={`${uploaderId}_preview`}>
+						<div className="sui-uploader__files" id={`${uploaderId}_files`}>
 							{files?.map((file: File, index: number) => (
 								<UploaderFile
 									key={index}
-									id={index}
+									id={`${uploaderId}_file_${index}`}
 									onRemove={onRemoveFile}
 									file={file}
 								/>
diff --git a/packages/ui/uploader/src/uploader.types.ts b/packages/ui/uploader/src/uploader.types.ts
index da8a43590..ef1bba60a 100644
--- a/packages/ui/uploader/src/uploader.types.ts
+++ b/packages/ui/uploader/src/uploader.types.ts
@@ -10,6 +10,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface UploaderProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLInputElement>>,
 		SuiStyleType {
+	/**
+	 * Optional custom ID for the uploader.
+	 */
+	id?: string
 	/**
 	 * Upload button title
 	 */
diff --git a/packages/ui/upsell-notice/src/upsell-notice.tsx b/packages/ui/upsell-notice/src/upsell-notice.tsx
index 4e5207a6f..0df47b6c7 100644
--- a/packages/ui/upsell-notice/src/upsell-notice.tsx
+++ b/packages/ui/upsell-notice/src/upsell-notice.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN, isEmpty } from "@wpmudev/sui-utils"
 
@@ -8,6 +8,7 @@ import { Tag } from "@wpmudev/sui-tag"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const UpsellNotice: React.FC<UpsellNoticeProps> = ({
+	id,
 	title = "Title of Upsell",
 	tagTitle = "",
 	description = "",
@@ -17,6 +18,8 @@ const UpsellNotice: React.FC<UpsellNoticeProps> = ({
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const upsellNoticeId = id || `sui_upsell_notice_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 
 	// Generate classnames for the upsell
@@ -30,6 +33,7 @@ const UpsellNotice: React.FC<UpsellNoticeProps> = ({
 
 	return (
 		<div
+			id={upsellNoticeId}
 			className={classNames}
 			data-testid="upsell-notice"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/upsell-notice/src/upsell-notice.types.ts b/packages/ui/upsell-notice/src/upsell-notice.types.ts
index 5b3ff17d8..910b59e6f 100644
--- a/packages/ui/upsell-notice/src/upsell-notice.types.ts
+++ b/packages/ui/upsell-notice/src/upsell-notice.types.ts
@@ -5,6 +5,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface UpsellNoticeProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the upsell notice.
+	 */
+	id?: string
 	// Optional title of the upsell, can be a string
 	title?: string
 
diff --git a/packages/ui/upsell/src/upsell.tsx b/packages/ui/upsell/src/upsell.tsx
index 459e6d78c..a38cf065e 100644
--- a/packages/ui/upsell/src/upsell.tsx
+++ b/packages/ui/upsell/src/upsell.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { UpsellProps } from "./upsell.types"
@@ -7,6 +7,7 @@ import { variationsList } from "./helpers"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const Upsell: React.FC<UpsellProps> = ({
+	id,
 	title,
 	description = "",
 	size,
@@ -18,6 +19,8 @@ const Upsell: React.FC<UpsellProps> = ({
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const upsellId = id || `sui_upsell_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 
 	// Generate classnames for the upsell
@@ -41,6 +44,7 @@ const Upsell: React.FC<UpsellProps> = ({
 
 	return (
 		<div
+			id={upsellId}
 			className={classNames}
 			data-testid="upsell"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/upsell/src/upsell.types.ts b/packages/ui/upsell/src/upsell.types.ts
index a61bf1f0b..015a17a91 100644
--- a/packages/ui/upsell/src/upsell.types.ts
+++ b/packages/ui/upsell/src/upsell.types.ts
@@ -6,6 +6,10 @@ import { IconsNamesType } from "@wpmudev/sui-icons"
 interface UpsellProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * Unique identifier for the upsell.
+	 */
+	id?: string
 	// Optional title of the upsell, can be a string
 	title?: string
 

From f9cdc982157f895d714c1f81e08cfe1919fdcc53 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 16 Dec 2025 14:31:49 +0530
Subject: [PATCH 02/10] docs: added changelog

---
 .changeset/eighty-peaches-reply.md | 62 ++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 .changeset/eighty-peaches-reply.md

diff --git a/.changeset/eighty-peaches-reply.md b/.changeset/eighty-peaches-reply.md
new file mode 100644
index 000000000..92330d748
--- /dev/null
+++ b/.changeset/eighty-peaches-reply.md
@@ -0,0 +1,62 @@
+---
+"@wpmudev/sui-navigation-wpmudev": major
+"@wpmudev/sui-segmented-control": major
+"@wpmudev/sui-dashboard-widget": major
+"@wpmudev/sui-rich-text-editor": major
+"@wpmudev/sui-advanced-banner": major
+"@wpmudev/sui-editor-toolbar": major
+"@wpmudev/sui-setting-block": major
+"@wpmudev/sui-upsell-notice": major
+"@wpmudev/sui-alert-banner": major
+"@wpmudev/sui-code-snippet": major
+"@wpmudev/sui-color-picker": major
+"@wpmudev/sui-config-table": major
+"@wpmudev/sui-notification": major
+"@wpmudev/sui-progress-bar": major
+"@wpmudev/sui-setup-banner": major
+"@wpmudev/sui-code-editor": major
+"@wpmudev/sui-date-picker": major
+"@wpmudev/sui-empty-state": major
+"@wpmudev/sui-integration": major
+"@wpmudev/sui-page-header": major
+"@wpmudev/sui-summary-box": major
+"@wpmudev/sui-field-list": major
+"@wpmudev/sui-form-field": major
+"@wpmudev/sui-navigation": major
+"@wpmudev/sui-pagination": major
+"@wpmudev/sui-accordion": major
+"@wpmudev/sui-basic-box": major
+"@wpmudev/sui-recipient": major
+"@wpmudev/sui-tree-view": major
+"@wpmudev/sui-checkbox": major
+"@wpmudev/sui-dropdown": major
+"@wpmudev/sui-selector": major
+"@wpmudev/sui-skeleton": major
+"@wpmudev/sui-uploader": major
+"@wpmudev/sui-css": major
+"@wpmudev/sui-builder": major
+"@wpmudev/sui-popover": major
+"@wpmudev/sui-sidebar": major
+"@wpmudev/sui-spinner": major
+"@wpmudev/sui-tooltip": major
+"@wpmudev/sui-avatar": major
+"@wpmudev/sui-drawer": major
+"@wpmudev/sui-footer": major
+"@wpmudev/sui-search": major
+"@wpmudev/sui-select": major
+"@wpmudev/sui-toggle": major
+"@wpmudev/sui-upsell": major
+"@wpmudev/sui-input": major
+"@wpmudev/sui-modal": major
+"@wpmudev/sui-radio": major
+"@wpmudev/sui-score": major
+"@wpmudev/sui-table": major
+"@wpmudev/sui-grid": major
+"@wpmudev/sui-icon": major
+"@wpmudev/sui-link": major
+"@wpmudev/sui-tabs": major
+"@wpmudev/sui-box": major
+"@wpmudev/sui-tag": major
+---
+
+Added missing ids to components

From 3b339d825bd4afc88fab52b8c8ac87a803b669c0 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 16 Dec 2025 14:56:00 +0530
Subject: [PATCH 03/10] fix: add missing ids to components

---
 packages/assets/css/src/scss/_utils/_tokens.scss |  2 +-
 packages/ui/accordion/src/accordion-item.tsx     |  1 +
 packages/ui/accordion/src/accordion.tsx          | 11 +++++++++--
 packages/ui/dropdown/src/dropdown-menu.tsx       |  2 +-
 packages/ui/dropdown/src/dropdown.tsx            |  1 +
 packages/ui/dropdown/src/dropdown.types.ts       |  4 ++++
 packages/ui/field-list/src/field-list.tsx        | 13 +++++++++++--
 packages/ui/pagination/src/pagination-nav.tsx    |  6 ++++--
 packages/ui/sidebar/src/sidebar-dropdown.tsx     | 13 ++++++++-----
 packages/ui/sidebar/src/sidebar.tsx              |  6 +++++-
 packages/ui/sidebar/src/sidebar.types.ts         |  4 ++++
 packages/ui/tooltip/src/tooltip.tsx              |  2 ++
 packages/ui/tree-view/src/tree-view.tsx          | 10 ++++++++--
 packages/ui/uploader/src/uploader-file.tsx       | 15 ++++++++++++---
 14 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/packages/assets/css/src/scss/_utils/_tokens.scss b/packages/assets/css/src/scss/_utils/_tokens.scss
index e6315dc3e..0aefddb4b 100644
--- a/packages/assets/css/src/scss/_utils/_tokens.scss
+++ b/packages/assets/css/src/scss/_utils/_tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 16 Dec 2025 08:02:53 GMT
+// Generated on Tue, 16 Dec 2025 09:01:18 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);
diff --git a/packages/ui/accordion/src/accordion-item.tsx b/packages/ui/accordion/src/accordion-item.tsx
index da6a0902b..e579b0e06 100644
--- a/packages/ui/accordion/src/accordion-item.tsx
+++ b/packages/ui/accordion/src/accordion-item.tsx
@@ -102,6 +102,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 	// Render the AccordionItem component with proper accessibility attributes.
 	return (
 		<div
+			id={uniqueId}
 			className={generateCN(
 				"sui-accordion__item",
 				{
diff --git a/packages/ui/accordion/src/accordion.tsx b/packages/ui/accordion/src/accordion.tsx
index 21d876b10..3a834c119 100644
--- a/packages/ui/accordion/src/accordion.tsx
+++ b/packages/ui/accordion/src/accordion.tsx
@@ -1,5 +1,5 @@
 // Import necessary modules and types
-import React, { useState } from "react"
+import React, { useState, useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { AccordionProps } from "./accordion.types"
@@ -8,6 +8,7 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 
 // Define the Accordion component as a functional component (React.FC)
 const Accordion: React.FC<AccordionProps> = ({
+	id,
 	className,
 	state = "default",
 	noBorderRadius = false,
@@ -19,6 +20,8 @@ const Accordion: React.FC<AccordionProps> = ({
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const accordionId = id || `sui_accordion_${generatedId}`
 	const [expandState, setExpandState] = useState<Record<string, boolean>>({})
 
 	// Default children content
@@ -48,7 +51,11 @@ const Accordion: React.FC<AccordionProps> = ({
 				isFlushed,
 			}}
 		>
-			<div className={classNames} {..._renderHTMLPropsSafely(_htmlProps)}>
+			<div
+				id={accordionId}
+				className={classNames}
+				{..._renderHTMLPropsSafely(_htmlProps)}
+			>
 				{children}
 			</div>
 		</AccordionProvider>
diff --git a/packages/ui/dropdown/src/dropdown-menu.tsx b/packages/ui/dropdown/src/dropdown-menu.tsx
index 4bf61246b..9fb98c7e5 100644
--- a/packages/ui/dropdown/src/dropdown-menu.tsx
+++ b/packages/ui/dropdown/src/dropdown-menu.tsx
@@ -5,7 +5,7 @@ import { DropdownMenuProps } from "./dropdown.types"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 // Define the Menu component
-const DropdownMenu: React.FC<DropdownMenuProps & { id?: string }> = ({
+const DropdownMenu: React.FC<DropdownMenuProps> = ({
 	id,
 	className = "",
 	children,
diff --git a/packages/ui/dropdown/src/dropdown.tsx b/packages/ui/dropdown/src/dropdown.tsx
index 9ef0d872e..e71d75d82 100644
--- a/packages/ui/dropdown/src/dropdown.tsx
+++ b/packages/ui/dropdown/src/dropdown.tsx
@@ -398,6 +398,7 @@ const Dropdown = forwardRef<DropdownRefProps | null, DropdownProps>(
 
 		return (
 			<div
+				id={dropdownId}
 				ref={dropdownRef}
 				className={wrapperClasses}
 				data-testid="dropdown"
diff --git a/packages/ui/dropdown/src/dropdown.types.ts b/packages/ui/dropdown/src/dropdown.types.ts
index 06afa60c8..0f945c08a 100644
--- a/packages/ui/dropdown/src/dropdown.types.ts
+++ b/packages/ui/dropdown/src/dropdown.types.ts
@@ -17,6 +17,10 @@ import { CheckboxProps } from "@wpmudev/sui-checkbox"
  * Props for Menu component.
  */
 interface DropdownMenuProps extends SuiStyleType {
+	/**
+	 * Unique identifier for the DropdownMenu.
+	 */
+	id?: string
 	/** Additional class name(s) to be applied to the Menu. */
 	className?: string
 	/** Children elements to be rendered inside the Menu. */
diff --git a/packages/ui/field-list/src/field-list.tsx b/packages/ui/field-list/src/field-list.tsx
index e474d22a2..f55a0b03c 100644
--- a/packages/ui/field-list/src/field-list.tsx
+++ b/packages/ui/field-list/src/field-list.tsx
@@ -4,9 +4,11 @@ import React, { Children, cloneElement, ReactElement, useCallback } from "react"
 import { FieldListItemProps, FieldListProps } from "./field-list.types"
 import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
+import { useId } from "react"
 
 // Build "field list" component
 const FieldList: React.FC<FieldListProps> = ({
+	id,
 	label,
 	helper,
 	children,
@@ -16,6 +18,8 @@ const FieldList: React.FC<FieldListProps> = ({
 	_htmlProps,
 	_style,
 }) => {
+	const generatedId = useId()
+	const fieldListId = id || `sui_field_list_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style)
 
 	// Callback function to handle item toggling
@@ -44,6 +48,7 @@ const FieldList: React.FC<FieldListProps> = ({
 	return (
 		// Render the FieldList component
 		<div
+			id={fieldListId}
 			className={generateCN(
 				"sui-field-list",
 				{ "no-border-radius": noBorderRadius },
@@ -54,7 +59,11 @@ const FieldList: React.FC<FieldListProps> = ({
 		>
 			{/* Render the label and helper elements if they are provided */}
 			{(label || helper) && (
-				<div className="sui-field-list__row" style={styles}>
+				<div
+					id={`${fieldListId}_header`}
+					className="sui-field-list__row"
+					style={styles}
+				>
 					{/* Render the label element if provided */}
 					{label && (
 						<h3 className="sui-heading sui-heading--h4 sui-field-list__title">
@@ -66,7 +75,7 @@ const FieldList: React.FC<FieldListProps> = ({
 				</div>
 			)}
 			{/* Render the list of FieldListItem components */}
-			<div className="sui-field-list__items">
+			<div id={`${fieldListId}_items`} className="sui-field-list__items">
 				{/* Map over and clone each child component with the onChangeItem callback */}
 				{Children.map(
 					children as ReactElement,
diff --git a/packages/ui/pagination/src/pagination-nav.tsx b/packages/ui/pagination/src/pagination-nav.tsx
index 1b990742e..b7a4fa286 100644
--- a/packages/ui/pagination/src/pagination-nav.tsx
+++ b/packages/ui/pagination/src/pagination-nav.tsx
@@ -7,6 +7,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 
 export const PaginationNav: React.FC<PaginationNavProps> = ({
+	id,
 	pagesArray,
 	elements,
 	selectedPage,
@@ -35,12 +36,13 @@ export const PaginationNav: React.FC<PaginationNavProps> = ({
 
 	return (
 		<div
+			id={id}
 			className={generateCN("sui-pagination", {}, suiInlineClassname)}
 			data-testid="pagination"
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
-			<ul className="sui-pagination__nav">
-				<li className="sui-pagination__item">
+			<ul id={`${id}_nav`} className="sui-pagination__nav">
+				<li id={`${id}_prev_item`} className="sui-pagination__item">
 					<Tooltip
 						buttonProps={{
 							type: "tertiary",
diff --git a/packages/ui/sidebar/src/sidebar-dropdown.tsx b/packages/ui/sidebar/src/sidebar-dropdown.tsx
index 4a7ddb45f..834ff60fd 100644
--- a/packages/ui/sidebar/src/sidebar-dropdown.tsx
+++ b/packages/ui/sidebar/src/sidebar-dropdown.tsx
@@ -17,6 +17,7 @@ import { SidebarProps } from "./sidebar.types"
 const SidebarDropdown: React.FC<SidebarProps> = forwardRef(
 	(
 		{
+			id,
 			className,
 			selectedItemName = "",
 			children,
@@ -30,7 +31,8 @@ const SidebarDropdown: React.FC<SidebarProps> = forwardRef(
 		const dropdownRef = useRef<HTMLDivElement | null>(null)
 
 		// Generate a unique identifier for the dropdown component.
-		const id = `sui_dropdown_${useId()}`
+		const generatedId = useId()
+		const sidebarDropdownId = id || `sui_sidebar_dropdown_${generatedId}`
 
 		// State to manage the dropdown's open/closed status.
 		const [isOpen, setIsOpen] = useState<boolean>(false)
@@ -75,15 +77,16 @@ const SidebarDropdown: React.FC<SidebarProps> = forwardRef(
 
 		return (
 			<div
+				id={sidebarDropdownId}
 				ref={dropdownRef}
 				className={classNames}
 				{..._renderHTMLPropsSafely(_htmlProps)}
 			>
 				<div>
 					<Button
-						id={`${id}__label`}
+						id={`${sidebarDropdownId}_label`}
 						className="sui-sidebar__dropdown--button"
-						// aria-activedescendant={isOpen ? `${id}-${current}` : ""}
+						// aria-activedescendant={isOpen ? `${sidebarDropdownId}-${current}` : ""}
 						onClick={() => setIsOpen(!isOpen)}
 						endIcon="Hamburger"
 						isFullWidth={true}
@@ -94,11 +97,11 @@ const SidebarDropdown: React.FC<SidebarProps> = forwardRef(
 				</div>
 				{isOpen && (
 					<div
-						id={id}
+						id={`${sidebarDropdownId}_list`}
 						tabIndex={-1}
 						role="listbox"
 						className="sui-sidebar__dropdown--list"
-						aria-labelledby={`${id}__label`}
+						aria-labelledby={`${sidebarDropdownId}_label`}
 					>
 						{childrenWithProps}
 					</div>
diff --git a/packages/ui/sidebar/src/sidebar.tsx b/packages/ui/sidebar/src/sidebar.tsx
index 4d0304d65..bd1edd8de 100644
--- a/packages/ui/sidebar/src/sidebar.tsx
+++ b/packages/ui/sidebar/src/sidebar.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 
@@ -8,11 +8,14 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 
 // Build sidebar component
 const Sidebar: React.FC<Omit<SidebarProps, "selectedItemName">> = ({
+	id,
 	className,
 	children,
 	_htmlProps = {},
 	_style = {},
 }) => {
+	const generatedId = useId()
+	const sidebarId = id || `sui_sidebar_${generatedId}`
 	const { suiInlineClassname } = useStyles(_style, className)
 	const classNames = generateCN("sui-sidebar", {}, suiInlineClassname)
 
@@ -21,6 +24,7 @@ const Sidebar: React.FC<Omit<SidebarProps, "selectedItemName">> = ({
 
 	return (
 		<div
+			id={sidebarId}
 			className={classNames}
 			data-testid="sidebar"
 			{..._renderHTMLPropsSafely(_htmlProps)}
diff --git a/packages/ui/sidebar/src/sidebar.types.ts b/packages/ui/sidebar/src/sidebar.types.ts
index d5b8dd0f8..81e53fbcf 100644
--- a/packages/ui/sidebar/src/sidebar.types.ts
+++ b/packages/ui/sidebar/src/sidebar.types.ts
@@ -9,6 +9,10 @@ import { ButtonProps } from "@wpmudev/sui-button"
 interface SidebarProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the Sidebar.
+	 */
+	id?: string
 	/**
 	 * An optional class name to be applied to the Sidebar component.
 	 */
diff --git a/packages/ui/tooltip/src/tooltip.tsx b/packages/ui/tooltip/src/tooltip.tsx
index e756b153e..55f4540a2 100644
--- a/packages/ui/tooltip/src/tooltip.tsx
+++ b/packages/ui/tooltip/src/tooltip.tsx
@@ -318,6 +318,7 @@ const Tooltip: React.FC<TooltipProps> = ({
 
 	return (
 		<div
+			id={uniqueId}
 			{...methods}
 			className={classNames}
 			data-testid="tooltip"
@@ -325,6 +326,7 @@ const Tooltip: React.FC<TooltipProps> = ({
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
 			<div
+				id={`${uniqueId}_trigger`}
 				className="sui-tooltip__trigger"
 				ref={triggerRef as LegacyRef<HTMLDivElement>}
 			>
diff --git a/packages/ui/tree-view/src/tree-view.tsx b/packages/ui/tree-view/src/tree-view.tsx
index 9023a6d3d..07dda6d9d 100644
--- a/packages/ui/tree-view/src/tree-view.tsx
+++ b/packages/ui/tree-view/src/tree-view.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useId } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 
@@ -23,6 +23,7 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
  * @return {JSX.Element} - JSX Element representing the TreeView component
  */
 const TreeView: React.FC<TreeViewProps> = ({
+	id,
 	className = "",
 	children,
 	allowCheck = false,
@@ -31,6 +32,8 @@ const TreeView: React.FC<TreeViewProps> = ({
 	_htmlProps = {},
 	_style = {},
 }: TreeViewProps): JSX.Element => {
+	const generatedId = useId()
+	const treeViewId = id || `sui_tree_view_${generatedId}`
 	const [items, setItems] = useState<TreeViewCheckType[]>([])
 
 	// Default children content
@@ -52,11 +55,14 @@ const TreeView: React.FC<TreeViewProps> = ({
 		<TreeViewProvider value={{ allowCheck, showIcons, items, setItems }}>
 			{/* TreeView component renders a tree structure with a list */}
 			<nav
+				id={treeViewId}
 				className={generateCN("sui-tree-view", {}, suiInlineClassname)}
 				data-testid="tree-view"
 				{..._renderHTMLPropsSafely(_htmlProps)}
 			>
-				<ul role="tree">{children}</ul>
+				<ul id={`${treeViewId}_list`} role="tree">
+					{children}
+				</ul>
 			</nav>
 		</TreeViewProvider>
 	)
diff --git a/packages/ui/uploader/src/uploader-file.tsx b/packages/ui/uploader/src/uploader-file.tsx
index f5f3c18cf..014d3e621 100644
--- a/packages/ui/uploader/src/uploader-file.tsx
+++ b/packages/ui/uploader/src/uploader-file.tsx
@@ -37,13 +37,15 @@ const UploaderFile: React.FC<UploaderFileProps> = React.memo(
 		// @todo: add error variation support
 		return (
 			<div
+				id={id}
 				className={generateCN("sui-uploader__file", {}, suiInlineClassname)}
 				data-testid="uploader-file"
 			>
-				<div className="sui-uploader__file--preview">
+				<div id={`${id}_preview`} className="sui-uploader__file--preview">
 					{/* Render image preview if the file is an image, otherwise render a generic file icon */}
 					{isImageFile(file?.type) ? (
 						<span
+							id={`${id}_image`}
 							role="img"
 							className="sui-uploader__file--image"
 							style={{
@@ -51,13 +53,20 @@ const UploaderFile: React.FC<UploaderFileProps> = React.memo(
 							}}
 						/>
 					) : (
-						<FileCheck size="sm" className="sui-uploader__file--icon" />
+						<FileCheck
+							id={`${id}_icon`}
+							size="sm"
+							className="sui-uploader__file--icon"
+						/>
 					)}
 				</div>
 				{/* Display the file name */}
-				<span className="sui-uploader__file--name">{file?.name}</span>
+				<span id={`${id}_name`} className="sui-uploader__file--name">
+					{file?.name}
+				</span>
 				{/* Button to remove the file */}
 				<Button
+					id={`${id}_remove`}
 					className="sui-uploader__file--remove"
 					iconOnly={true}
 					icon="Close"

From 34355bd19adb078d166a493ee30456711934d716 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 16 Dec 2025 15:03:00 +0530
Subject: [PATCH 04/10] fix: add missing types

---
 packages/assets/css/src/scss/_utils/_tokens.scss | 2 +-
 packages/ui/accordion/src/accordion.types.ts     | 1 +
 packages/ui/field-list/src/field-list.types.ts   | 4 ++++
 packages/ui/tree-view/src/tree-view.types.ts     | 1 +
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/assets/css/src/scss/_utils/_tokens.scss b/packages/assets/css/src/scss/_utils/_tokens.scss
index 0aefddb4b..091cd85c6 100644
--- a/packages/assets/css/src/scss/_utils/_tokens.scss
+++ b/packages/assets/css/src/scss/_utils/_tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 16 Dec 2025 09:01:18 GMT
+// Generated on Tue, 16 Dec 2025 09:32:11 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);
diff --git a/packages/ui/accordion/src/accordion.types.ts b/packages/ui/accordion/src/accordion.types.ts
index 42522ad7e..71e7d211a 100644
--- a/packages/ui/accordion/src/accordion.types.ts
+++ b/packages/ui/accordion/src/accordion.types.ts
@@ -8,6 +8,7 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface AccordionProps
 	extends SuiHTMLAttributes<HTMLProps<HTMLDivElement>>,
 		SuiStyleType {
+	id?: string // Optional custom ID for the accordion item.
 	/** Additional CSS class name for styling the accordion component. */
 	className?: string
 	/** Remove border-radius when true */
diff --git a/packages/ui/field-list/src/field-list.types.ts b/packages/ui/field-list/src/field-list.types.ts
index 478610a7a..f20c73ff7 100644
--- a/packages/ui/field-list/src/field-list.types.ts
+++ b/packages/ui/field-list/src/field-list.types.ts
@@ -10,6 +10,10 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface FieldListProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * The ID for the field list item.
+	 */
+	id?: string
 	/**
 	 * The label for the field list.
 	 */
diff --git a/packages/ui/tree-view/src/tree-view.types.ts b/packages/ui/tree-view/src/tree-view.types.ts
index d9dea0c37..50a752bb6 100644
--- a/packages/ui/tree-view/src/tree-view.types.ts
+++ b/packages/ui/tree-view/src/tree-view.types.ts
@@ -9,6 +9,7 @@ import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 interface TreeViewProps
 	extends SuiStyleType,
 		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	id?: string // Unique ID for the tree view item
 	title?: string // Title for the tree view
 	className?: string // CSS class name for the tree view
 	children?: React.ReactNode // Content of the tree view

From 8c68c83f6c969e21e7f91f4c280ce9b70d5ccea3 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 23 Dec 2025 10:01:09 +0530
Subject: [PATCH 05/10] fix: add missing type for navigation component

---
 .../ui/navigation/src/navigation-brand.tsx    | 30 +++++++++++++++---
 .../ui/navigation/src/navigation-user.tsx     | 31 ++++++++++++++++---
 packages/ui/navigation/src/navigation.tsx     | 23 ++++++++++----
 .../ui/navigation/src/navigation.types.ts     |  4 +++
 4 files changed, 72 insertions(+), 16 deletions(-)

diff --git a/packages/ui/navigation/src/navigation-brand.tsx b/packages/ui/navigation/src/navigation-brand.tsx
index e17696e03..163766869 100644
--- a/packages/ui/navigation/src/navigation-brand.tsx
+++ b/packages/ui/navigation/src/navigation-brand.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 
 import {
 	_renderHTMLPropsSafely,
@@ -12,10 +12,18 @@ import Icons, { IconsNamesType } from "@wpmudev/sui-icons"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const NavigationBrand: React.FC<NavigationBrandProps> = ({
+	id,
 	plugin,
 	title = "",
 	description = "",
+	className,
+	_style,
+	_htmlProps = {},
 }) => {
+	const generatedId = useId()
+	const brandId = id || `sui_navigation_brand_${generatedId}`
+	const { suiInlineClassname } = useStyles(_style, className)
+
 	// Icon for the specified plugin or use a default "Plugin" icon.
 	const PluginIcon: PluginIconTypes = plugin
 		? PluginsIcons?.[plugin]
@@ -28,16 +36,28 @@ const NavigationBrand: React.FC<NavigationBrandProps> = ({
 	}
 
 	return (
-		<div className={"sui-navigation__brand"}>
+		<div
+			id={brandId}
+			className={generateCN("sui-navigation__brand", {}, suiInlineClassname)}
+			{..._renderHTMLPropsSafely(_htmlProps)}
+		>
 			<div
+				id={`${brandId}_icon`}
 				className="sui-navigation__icon"
 				style={{ backgroundColor: PluginIcon?.bg }}
 			>
 				{!!IconTag && <IconTag fill={PluginIcon?.color} />}
 			</div>
-			<div className="sui-navigation__info">
-				<h3 className="sui-heading--h4">{title}</h3>
-				<span className="sui-navigation__info--desc">{description}</span>
+			<div id={`${brandId}_info`} className="sui-navigation__info">
+				<h3 id={`${brandId}_title`} className="sui-heading--h4">
+					{title}
+				</h3>
+				<span
+					id={`${brandId}_description`}
+					className="sui-navigation__info--desc"
+				>
+					{description}
+				</span>
 			</div>
 		</div>
 	)
diff --git a/packages/ui/navigation/src/navigation-user.tsx b/packages/ui/navigation/src/navigation-user.tsx
index 119d993dc..25596b597 100644
--- a/packages/ui/navigation/src/navigation-user.tsx
+++ b/packages/ui/navigation/src/navigation-user.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react"
+import React, { useRef, useId } from "react"
 
 import { Dropdown, DropdownRefProps } from "@wpmudev/sui-dropdown"
 import { Avatar } from "@wpmudev/sui-avatar"
@@ -8,6 +8,7 @@ import { _renderHTMLPropsSafely, generateCN, isEmpty } from "@wpmudev/sui-utils"
 import { useStyles } from "@wpmudev/sui-hooks"
 
 const NavigationUser: React.FC<NavigationUserProps> = ({
+	id,
 	user,
 	menu,
 	splitLastItem = false,
@@ -19,6 +20,8 @@ const NavigationUser: React.FC<NavigationUserProps> = ({
 	_style = {},
 	_htmlProps = {},
 }) => {
+	const generatedId = useId()
+	const navigationUserId = id || `sui_navigation_user_${generatedId}`
 	// Create a ref for the user dropdown button
 	const userBtnRef = useRef<DropdownRefProps | null>(null)
 
@@ -59,20 +62,38 @@ const NavigationUser: React.FC<NavigationUserProps> = ({
 
 		// Render otherwise
 		return (
-			<div className="sui-navigation__user">
+			<div
+				id={`${navigationUserId}_user_info`}
+				className="sui-navigation__user"
+			>
 				{!isEmpty(user?.name ?? "") && (
-					<div className="sui-navigation__user--name">{user?.name}</div>
+					<div
+						id={`${navigationUserId}_user_name`}
+						className="sui-navigation__user--name"
+					>
+						{user?.name}
+					</div>
 				)}
 				{!isEmpty(user?.email ?? "") && (
-					<div className="sui-navigation__user--email">{user?.email}</div>
+					<div
+						id={`${navigationUserId}_user_email`}
+						className="sui-navigation__user--email"
+					>
+						{user?.email}
+					</div>
 				)}
 			</div>
 		)
 	}
 
 	return (
-		<div className={classNames} {..._renderHTMLPropsSafely(_htmlProps)}>
+		<div
+			id={navigationUserId}
+			className={classNames}
+			{..._renderHTMLPropsSafely(_htmlProps)}
+		>
 			<Dropdown
+				id={`${navigationUserId}_dropdown`}
 				ref={userBtnRef}
 				label="Menu Button"
 				placement="left"
diff --git a/packages/ui/navigation/src/navigation.tsx b/packages/ui/navigation/src/navigation.tsx
index 8a07bf8e0..910b922b3 100644
--- a/packages/ui/navigation/src/navigation.tsx
+++ b/packages/ui/navigation/src/navigation.tsx
@@ -32,21 +32,32 @@ const Navigation: React.FC<NavigationProps> = ({
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
 			{/* Render the navigation brand component */}
-			<NavigationBrand {...brand} />
-			<ul className="sui-navigation__nav">
+			<NavigationBrand {...brand} id={brand?.id || `${navigationId}_brand`} />
+			<ul id={`${navigationId}_nav`} className="sui-navigation__nav">
 				{/* Map over children components and render each one as a list item */}
 				{Children.map(children, (child, index) => (
-					<li className="sui-navigation__nav-item" key={index}>
+					<li
+						id={`${navigationId}_nav_item_${index}`}
+						className="sui-navigation__nav-item"
+						key={index}
+					>
 						{child}
 					</li>
 				))}
 			</ul>
 			{(actions.length > 0 || user) && (
-				<div className="sui-navigation__actions">
+				<div id={`${navigationId}_actions`} className="sui-navigation__actions">
 					{/* Show actions  */}
-					{actions.length > 0 && actions.map((action, index) => action)}
+					{actions.length > 0 &&
+						actions.map((action, index) => (
+							<div id={`${navigationId}_action_${index}`} key={index}>
+								{action}
+							</div>
+						))}
 					{/* Render the navigation user component */}
-					{user && <NavigationUser {...user} />}
+					{user && (
+						<NavigationUser {...user} id={user?.id || `${navigationId}_user`} />
+					)}
 				</div>
 			)}
 		</nav>
diff --git a/packages/ui/navigation/src/navigation.types.ts b/packages/ui/navigation/src/navigation.types.ts
index 0a754003b..33cae0e37 100644
--- a/packages/ui/navigation/src/navigation.types.ts
+++ b/packages/ui/navigation/src/navigation.types.ts
@@ -64,6 +64,10 @@ interface NavigationBrandProps extends SuiStyleType, SuiHTMLAttributes {
 	 * Optional: Description for the brand.
 	 */
 	description?: string
+	/*
+	 * Optional: Additional CSS class name.
+	 */
+	className?: string
 }
 
 type NavigationUserType = {

From b5bb3fa74a81f33aac4ce4675fe682ed8ddc78d8 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 23 Dec 2025 10:25:53 +0530
Subject: [PATCH 06/10] fix: add missing type for avatar and navigation

---
 packages/ui/avatar/src/avatar.tsx                  | 14 +++++++++++---
 packages/ui/avatar/src/elements/icon-avatar.tsx    |  4 ++--
 packages/ui/avatar/src/elements/image-avatar.tsx   |  9 +++++++--
 .../ui/avatar/src/elements/image-avatar.types.ts   |  5 +++++
 packages/ui/avatar/src/elements/status.tsx         |  3 ++-
 packages/ui/avatar/src/elements/status.types.ts    |  5 +++++
 packages/ui/navigation/src/navigation-user.tsx     |  1 +
 7 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/packages/ui/avatar/src/avatar.tsx b/packages/ui/avatar/src/avatar.tsx
index e6b01c14d..d082ad90e 100644
--- a/packages/ui/avatar/src/avatar.tsx
+++ b/packages/ui/avatar/src/avatar.tsx
@@ -64,9 +64,17 @@ const Avatar: React.FC<AvatarProps> = ({
 
 	return (
 		<span {...attributes}>
-			{hasImage && <Image source={imageObj.src} text={imageObj.alt} />}
-			{!hasImage && <Icon iconName={icon} />}
-			{hasStatus && status !== "none" && <Status status={status} />}
+			{hasImage && (
+				<Image
+					id={`${avatarId}_image`}
+					source={imageObj.src}
+					text={imageObj.alt}
+				/>
+			)}
+			{!hasImage && <Icon id={`${avatarId}_icon`} iconName={icon} />}
+			{hasStatus && status !== "none" && (
+				<Status id={`${avatarId}_status`} status={status} />
+			)}
 		</span>
 	)
 }
diff --git a/packages/ui/avatar/src/elements/icon-avatar.tsx b/packages/ui/avatar/src/elements/icon-avatar.tsx
index 755c23bf2..32fe98fc0 100644
--- a/packages/ui/avatar/src/elements/icon-avatar.tsx
+++ b/packages/ui/avatar/src/elements/icon-avatar.tsx
@@ -1,10 +1,10 @@
 import React, { Fragment } from "react"
 import Icons, { IconsNamesType, User, UserAlt } from "@wpmudev/sui-icons"
 // Build "icon avatar" element
-const Icon = ({ iconName }: { iconName: IconsNamesType }) => {
+const Icon = ({ id, iconName }: { id?: string; iconName: IconsNamesType }) => {
 	const IconTag = Icons?.[iconName as IconsNamesType]
 	return (
-		<span className="sui-avatar__icon" aria-hidden="true">
+		<span id={id} className="sui-avatar__icon" aria-hidden="true">
 			<IconTag data-testid="avatar-icon" />
 		</span>
 	)
diff --git a/packages/ui/avatar/src/elements/image-avatar.tsx b/packages/ui/avatar/src/elements/image-avatar.tsx
index 06c745953..3126b2028 100644
--- a/packages/ui/avatar/src/elements/image-avatar.tsx
+++ b/packages/ui/avatar/src/elements/image-avatar.tsx
@@ -4,7 +4,7 @@ import { isEmpty, isUndefined } from "@wpmudev/sui-utils"
 import { ImageAvatarProps } from "./image-avatar.types"
 
 // Build "image avatar" element
-const Image: React.FC<ImageAvatarProps> = ({ source, text }) => {
+const Image: React.FC<ImageAvatarProps> = ({ id, source, text }) => {
 	// Props validation
 	const hasSrc = !isUndefined(source) && !isEmpty(source)
 	const hasAlt = !isUndefined(text) && !isEmpty(text)
@@ -19,12 +19,17 @@ const Image: React.FC<ImageAvatarProps> = ({ source, text }) => {
 	return (
 		<Fragment>
 			<span
+				id={id}
 				className="sui-avatar__image"
 				style={{ backgroundImage: `url(${source})` }}
 				tabIndex={-1}
 				data-testid="avatar-image"
 			/>
-			<span className="sui-screen-reader-only" data-testid="avatar-image-alt">
+			<span
+				id={id ? `${id}_alt` : undefined}
+				className="sui-screen-reader-only"
+				data-testid="avatar-image-alt"
+			>
 				{hasAlt ? text : "Logged in user avatar"}
 			</span>
 		</Fragment>
diff --git a/packages/ui/avatar/src/elements/image-avatar.types.ts b/packages/ui/avatar/src/elements/image-avatar.types.ts
index 697336cc0..0f4565c54 100644
--- a/packages/ui/avatar/src/elements/image-avatar.types.ts
+++ b/packages/ui/avatar/src/elements/image-avatar.types.ts
@@ -2,6 +2,11 @@
  * Interface representing the properties of an image avatar.
  */
 interface ImageAvatarProps {
+	/**
+	 * Optional unique identifier for the image avatar.
+	 */
+	id?: string
+
 	/**
 	 * Source URL of the image for the avatar.
 	 */
diff --git a/packages/ui/avatar/src/elements/status.tsx b/packages/ui/avatar/src/elements/status.tsx
index da48e3dd6..ca6b14702 100644
--- a/packages/ui/avatar/src/elements/status.tsx
+++ b/packages/ui/avatar/src/elements/status.tsx
@@ -4,7 +4,7 @@ import { Clock, CheckAlt, Warning } from "@wpmudev/sui-icons"
 import { StatusProps } from "./status.types"
 
 // Build "status" element
-const Status: React.FC<StatusProps> = ({ status }) => {
+const Status: React.FC<StatusProps> = ({ id, status }) => {
 	// Determine the IconTag based on the provided icon value
 	let IconName,
 		classes = "sui-avatar__status-icon"
@@ -38,6 +38,7 @@ const Status: React.FC<StatusProps> = ({ status }) => {
 	// Return element
 	return (
 		<span
+			id={id}
 			className="sui-avatar__status"
 			data-testid="avatar-status"
 			aria-hidden="true"
diff --git a/packages/ui/avatar/src/elements/status.types.ts b/packages/ui/avatar/src/elements/status.types.ts
index 9cd6ff8bd..b0fbbe245 100644
--- a/packages/ui/avatar/src/elements/status.types.ts
+++ b/packages/ui/avatar/src/elements/status.types.ts
@@ -2,6 +2,11 @@
  * Interface representing the properties of a status component.
  */
 interface StatusProps {
+	/**
+	 * Optional unique identifier for the status.
+	 */
+	id?: string
+
 	/**
 	 * Status text or value.
 	 */
diff --git a/packages/ui/navigation/src/navigation-user.tsx b/packages/ui/navigation/src/navigation-user.tsx
index 25596b597..b7fb47ad0 100644
--- a/packages/ui/navigation/src/navigation-user.tsx
+++ b/packages/ui/navigation/src/navigation-user.tsx
@@ -36,6 +36,7 @@ const NavigationUser: React.FC<NavigationUserProps> = ({
 	// Define the user's avatar button component
 	const userAvatarBtn = (
 		<Avatar
+			id={`${navigationUserId}_avatar`}
 			status={status}
 			image={{
 				src: user?.image ?? "",

From 8dec2e7629977e142e6054ef8ddda390290d8dc6 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 23 Dec 2025 10:40:33 +0530
Subject: [PATCH 07/10] fix: add missing ids for table component

---
 packages/ui/table/src/table-toolbar.tsx | 29 ++++++++++++++++++-------
 packages/ui/table/src/table.tsx         | 17 +++++++++++----
 packages/ui/table/src/table.types.ts    |  9 ++++++++
 3 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/ui/table/src/table-toolbar.tsx b/packages/ui/table/src/table-toolbar.tsx
index 45b6f8094..a4a6f8249 100644
--- a/packages/ui/table/src/table-toolbar.tsx
+++ b/packages/ui/table/src/table-toolbar.tsx
@@ -27,6 +27,7 @@ import { Toggle } from "@wpmudev/sui-toggle"
  * @return {JSX.Element} The JSX representation of the TableToolbar component.
  */
 const TableToolbar: React.FC<TableSectionProps> = ({
+	id,
 	_htmlProps,
 	_style = {},
 }: TableSectionProps): JSX.Element => {
@@ -36,9 +37,10 @@ const TableToolbar: React.FC<TableSectionProps> = ({
 
 	// Generate unique IDs for accessibility
 	const uniqueId = useId()
-	const filterBtnId = `sui_table_toolbar_filter_${uniqueId}`
-	const bodyId = `sui_table_toolbar_body_${uniqueId}`
-	const bulkDropdown = `sui_table_toolbar_bulk_${uniqueId}`
+	const toolbarId = id || `sui_table_toolbar_${uniqueId}`
+	const filterBtnId = `${toolbarId}_filter_btn`
+	const bodyId = `${toolbarId}_body`
+	const bulkDropdown = `${toolbarId}_bulk_dropdown`
 
 	const { suiInlineClassname } = useStyles(_style)
 	const ctx = useContext(TableContext)
@@ -75,11 +77,15 @@ const TableToolbar: React.FC<TableSectionProps> = ({
 
 	return (
 		<div
+			id={toolbarId}
 			className={generateCN("sui-table__toolbar", {}, suiInlineClassname)}
 			{..._htmlProps}
 		>
-			<div className="sui-table__toolbar-header">
-				<div className="sui-table__toolbar-header-bulk">
+			<div id={`${toolbarId}_header`} className="sui-table__toolbar-header">
+				<div
+					id={`${toolbarId}_bulk`}
+					className="sui-table__toolbar-header-bulk"
+				>
 					{!!ctx?.bulkActions && (
 						<Fragment>
 							<Select
@@ -103,10 +109,17 @@ const TableToolbar: React.FC<TableSectionProps> = ({
 					)}
 				</div>
 
-				<div className="sui-table__toolbar-header-actions">
+				<div
+					id={`${toolbarId}_actions`}
+					className="sui-table__toolbar-header-actions"
+				>
 					{ctx?.showToggleBtn && (
-						<div className="sui-table__toolbar-toggle">
+						<div
+							id={`${toolbarId}_toggle`}
+							className="sui-table__toolbar-toggle"
+						>
 							<Toggle
+								id={`${toolbarId}_toggle_input`}
 								{...ctx?.toggleBtnProps}
 								onClick={(e) => {
 									// Deselected all selected rows
@@ -119,7 +132,7 @@ const TableToolbar: React.FC<TableSectionProps> = ({
 						</div>
 					)}
 					<Input
-						id={`${uniqueId}_search`}
+						id={`${toolbarId}_search`}
 						className="sui-table__toolbar-search"
 						placeholder="Search"
 						onChange={onSearch}
diff --git a/packages/ui/table/src/table.tsx b/packages/ui/table/src/table.tsx
index a11b0016c..1577c14db 100644
--- a/packages/ui/table/src/table.tsx
+++ b/packages/ui/table/src/table.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, Children as RChild } from "react"
+import React, { useRef, Children as RChild, useId } from "react"
 
 import { isEmpty, generateCN, _renderHTMLPropsSafely } from "@wpmudev/sui-utils"
 
@@ -9,6 +9,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 
 // Table component to display a table with optional toolbar and context
 const Table: React.FC<TableProps> = ({
+	id,
 	children,
 	hasToolbar = true,
 	ariaLabel = "",
@@ -34,6 +35,9 @@ const Table: React.FC<TableProps> = ({
 	const ref = useRef<HTMLTableElement | null>(null)
 	const wrapperRef = useRef<HTMLDivElement | null>(null)
 
+	const generatedId = useId()
+	const tableId = id || `sui_table_${generatedId}`
+
 	const { suiInlineClassname } = useStyles(_style, className)
 
 	// Define tag design
@@ -79,11 +83,16 @@ const Table: React.FC<TableProps> = ({
 				toggleBtnProps,
 			}}
 		>
-			<div className={classNames} data-testid="table">
+			<div id={tableId} className={classNames} data-testid="table">
 				{/* Render the TableToolbar component if hasToolbar is true */}
-				{hasToolbar && <TableToolbar />}
-				<div className="sui-table__wrapper" ref={wrapperRef}>
+				{hasToolbar && <TableToolbar id={`${tableId}_toolbar`} />}
+				<div
+					id={`${tableId}_wrapper`}
+					className="sui-table__wrapper"
+					ref={wrapperRef}
+				>
 					<table
+						id={`${tableId}_table`}
 						className="sui-table__table"
 						ref={ref}
 						// Ignore eslint here as the table have expandable elements which makes it interactive
diff --git a/packages/ui/table/src/table.types.ts b/packages/ui/table/src/table.types.ts
index 5e8ce5c05..25f0f3f56 100644
--- a/packages/ui/table/src/table.types.ts
+++ b/packages/ui/table/src/table.types.ts
@@ -19,6 +19,10 @@ interface TableSectionProps
 			HTMLProps<HTMLTableSectionElement | HTMLDivElement>
 		>,
 		SuiStyleType {
+	/**
+	 * Unique identifier for the table section.
+	 */
+	id?: string
 	children?: React.ReactNode
 	ref?: Ref<HTMLTableSectionElement>
 }
@@ -55,6 +59,11 @@ type TableOnActionType = (action: TableExpectedAction, data: unknown) => void
  * Interface representing the properties of a table.
  */
 interface TableProps extends SuiHTMLAttributes, SuiStyleType {
+	/**
+	 * Unique identifier for the Table.
+	 */
+	id?: string
+
 	/**
 	 * Custom css className(s)
 	 */

From eb0a9a05964b24dcd37b39292b2e1165f2c2a317 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 23 Dec 2025 10:51:01 +0530
Subject: [PATCH 08/10] fix: add missing ids for dashboard widget

---
 .../dashboard-widget/src/dashboard-widget.tsx | 54 +++++++++++++++----
 1 file changed, 45 insertions(+), 9 deletions(-)

diff --git a/packages/ui/dashboard-widget/src/dashboard-widget.tsx b/packages/ui/dashboard-widget/src/dashboard-widget.tsx
index 366f4dcdc..a67f26325 100644
--- a/packages/ui/dashboard-widget/src/dashboard-widget.tsx
+++ b/packages/ui/dashboard-widget/src/dashboard-widget.tsx
@@ -84,16 +84,29 @@ const DashboardWidget: React.FC<DashboardWidgetProps> = ({
 			data-testid="dashboard-widget"
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
-			<div className="sui-dashboard-widget__header">
-				<div className="sui-dashboard-widget__header-title">
-					<div className="sui-dashboard-widget__header-info">
+			<div
+				id={`${dashboardWidgetId}_header`}
+				className="sui-dashboard-widget__header"
+			>
+				<div
+					id={`${dashboardWidgetId}_header_title`}
+					className="sui-dashboard-widget__header-title"
+				>
+					<div
+						id={`${dashboardWidgetId}_header_info`}
+						className="sui-dashboard-widget__header-info"
+					>
 						{/* Display the icon if available */}
-						{IconTag && <IconTag size="md" />}
+						{IconTag && <IconTag id={`${dashboardWidgetId}_icon`} size="md" />}
 						{/* Display the title and optional tag */}
-						<h4 className="sui-heading--h4 sui-dashboard-widget__header-title">
+						<h4
+							id={`${dashboardWidgetId}_title`}
+							className="sui-heading--h4 sui-dashboard-widget__header-title"
+						>
 							{title}
 							{tag && (
 								<Tag
+									id={`${dashboardWidgetId}_tag`}
 									colorScheme="black"
 									design="outlined"
 									{...(tagAttrs ?? {})}
@@ -101,16 +114,24 @@ const DashboardWidget: React.FC<DashboardWidgetProps> = ({
 									{tag}
 								</Tag>
 							)}
-							{StatusIcon && <StatusIcon size="sm" {...(statusProps ?? {})} />}
+							{StatusIcon && (
+								<StatusIcon
+									id={`${dashboardWidgetId}_status_icon`}
+									size="sm"
+									{...(statusProps ?? {})}
+								/>
+							)}
 						</h4>
 					</div>
 					{/* Display collapse/expand button if allowed */}
 					{canCollapse && (
 						<div
+							id={`${dashboardWidgetId}_header_actions`}
 							className="sui-dashboard-widget__header-actions"
 							data-testid="dashboard-widget-"
 						>
 							<Toggle
+								id={`${dashboardWidgetId}_toggle`}
 								isLabelHidden={true}
 								label="Toggle Widget"
 								defaultValue={isExpanded ?? false}
@@ -122,18 +143,33 @@ const DashboardWidget: React.FC<DashboardWidgetProps> = ({
 				</div>
 				{/* Display widget description */}
 				{description && (
-					<div className="sui-dashboard-widget__header-desc">{description}</div>
+					<div
+						id={`${dashboardWidgetId}_description`}
+						className="sui-dashboard-widget__header-desc"
+					>
+						{description}
+					</div>
 				)}
 			</div>
 			{/* Display widget content if expanded */}
 			{isExpanded && (
 				<Fragment>
 					{children && (
-						<div className="sui-dashboard-widget__body">{children}</div>
+						<div
+							id={`${dashboardWidgetId}_body`}
+							className="sui-dashboard-widget__body"
+						>
+							{children}
+						</div>
 					)}
 					{/* Display widget actions if available */}
 					{actions && (
-						<div className="sui-dashboard-widget__footer">{actions}</div>
+						<div
+							id={`${dashboardWidgetId}_footer`}
+							className="sui-dashboard-widget__footer"
+						>
+							{actions}
+						</div>
 					)}
 				</Fragment>
 			)}

From 88b5f158f4612c14c0924e583167e53990900cf2 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 23 Dec 2025 21:35:59 +0530
Subject: [PATCH 09/10] fix: add missing ids for footer component

---
 packages/ui/footer/src/elements/Logo.tsx |  7 +++-
 packages/ui/footer/src/footer.tsx        | 53 +++++++++++++++++++-----
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/packages/ui/footer/src/elements/Logo.tsx b/packages/ui/footer/src/elements/Logo.tsx
index 04e4d1d58..5512c2d25 100644
--- a/packages/ui/footer/src/elements/Logo.tsx
+++ b/packages/ui/footer/src/elements/Logo.tsx
@@ -1,8 +1,13 @@
 import React from "react"
 
-const Logo = () => {
+interface LogoProps {
+	id?: string
+}
+
+const Logo = ({ id }: LogoProps) => {
 	return (
 		<svg
+			id={id}
 			xmlns="http://www.w3.org/2000/svg"
 			width="93"
 			height="31"
diff --git a/packages/ui/footer/src/footer.tsx b/packages/ui/footer/src/footer.tsx
index cd73663ed..bcb3093e2 100644
--- a/packages/ui/footer/src/footer.tsx
+++ b/packages/ui/footer/src/footer.tsx
@@ -60,21 +60,30 @@ const Footer: React.FC<FooterProps> = ({
 		>
 			{blocks.length > 0 && (
 				<div
+					id={`${footerId}_credits`}
 					className={`sui-footer__group sui-footer__group--credits${
 						blocks.length === 1 ? " sui-footer__group--center" : ""
 					}`}
 				>
 					{(blocks || [])?.map((block, index) => (
-						<div className="sui-footer__block" key={index}>
+						<div
+							id={`${footerId}_block_${index}`}
+							className="sui-footer__block"
+							key={index}
+						>
 							{block}
 						</div>
 					))}
 				</div>
 			)}
 			{!customFooter && (
-				<div className="sui-footer__group sui-footer__group--links">
-					<div className="sui-footer__block">
+				<div
+					id={`${footerId}_links_group`}
+					className="sui-footer__group sui-footer__group--links"
+				>
+					<div id={`${footerId}_logo_block`} className="sui-footer__block">
 						<a
+							id={`${footerId}_logo_link`}
 							href={logoHref || "https://wpmudev.com"}
 							target="_blank"
 							rel="noreferrer nofollow"
@@ -82,24 +91,34 @@ const Footer: React.FC<FooterProps> = ({
 						>
 							{logoImageLink ? (
 								<img
+									id={`${footerId}_logo_img`}
 									src={logoImageLink}
 									className="sui-footer__block--logo"
 									alt="WPMU DEV"
 								/>
 							) : (
-								<Logo />
+								<Logo id={`${footerId}_logo`} />
 							)}
 						</a>
 					</div>
 					{(links ?? []).length > 0 && (
 						<div
+							id={`${footerId}_pages_block`}
 							className="sui-footer__block sui-footer__block--pages"
 							data-testid="footer-links"
 						>
-							<ul className="sui-footer__links">
+							<ul id={`${footerId}_links`} className="sui-footer__links">
 								{(links ?? [])?.map((list: FooterLinkType, index) => (
-									<li key={index} className="sui-footer__links--item">
-										<a href={list.url} target={list?.target ?? "_blank"}>
+									<li
+										id={`${footerId}_link_item_${index}`}
+										key={index}
+										className="sui-footer__links--item"
+									>
+										<a
+											id={`${footerId}_link_${index}`}
+											href={list.url}
+											target={list?.target ?? "_blank"}
+										>
 											{list.title}
 										</a>
 									</li>
@@ -107,9 +126,10 @@ const Footer: React.FC<FooterProps> = ({
 							</ul>
 						</div>
 					)}
-					<div className="sui-footer__block">
+					<div id={`${footerId}_social_block`} className="sui-footer__block">
 						{(socialLinks ?? [])?.length > 0 && (
 							<ul
+								id={`${footerId}_social_links`}
 								className="sui-footer__links sui-footer__links--social"
 								data-testid="footer-social-links"
 							>
@@ -117,15 +137,26 @@ const Footer: React.FC<FooterProps> = ({
 									(socialLink: FooterSocialLinkType, index) => {
 										const SocialIcon = socialIcons[socialLink?.type]
 										return (
-											<li key={index} className="sui-footer__links--item">
+											<li
+												id={`${footerId}_social_item_${index}`}
+												key={index}
+												className="sui-footer__links--item"
+											>
 												<a
+													id={`${footerId}_social_link_${index}`}
 													href={socialLink.url}
 													target="_blank"
 													rel="noopener noreferrer"
 												>
-													<SocialIcon size="sm" />
+													<SocialIcon
+														id={`${footerId}_social_icon_${index}`}
+														size="sm"
+													/>
 													{socialLink?.type && (
-														<span className="sui-screen-reader-only">
+														<span
+															id={`${footerId}_social_label_${index}`}
+															className="sui-screen-reader-only"
+														>
 															{socialLink?.type}
 														</span>
 													)}

From 5088837f2bfe53b49a0664551b1ae2d456dd5afb Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 24 Dec 2025 14:17:01 +0530
Subject: [PATCH 10/10] fix: missing id for basic box

---
 packages/ui/basic-box/src/basic-box.tsx     |  1 +
 packages/ui/page-header/src/page-header.tsx | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/ui/basic-box/src/basic-box.tsx b/packages/ui/basic-box/src/basic-box.tsx
index 7e57048bb..81817f05d 100644
--- a/packages/ui/basic-box/src/basic-box.tsx
+++ b/packages/ui/basic-box/src/basic-box.tsx
@@ -76,6 +76,7 @@ const BasicBox: React.FC<BasicBoxProps> = ({
 					</div>
 					{!!description && (
 						<div
+							id={`${basicBoxId}_description`}
 							className="sui-basic-box__header-desc"
 							data-testid="basic-box-description"
 						>
diff --git a/packages/ui/page-header/src/page-header.tsx b/packages/ui/page-header/src/page-header.tsx
index 8a3f61039..bf50a35b5 100644
--- a/packages/ui/page-header/src/page-header.tsx
+++ b/packages/ui/page-header/src/page-header.tsx
@@ -22,9 +22,16 @@ const PageHeader: React.FC<PageHeaderProps> = ({
 
 	return (
 		<div id={pageHeaderId} className={classNames}>
-			<h1 className="sui-page-header__title">{title}</h1>
+			<h1 id={`${pageHeaderId}_title`} className="sui-page-header__title">
+				{title}
+			</h1>
 			{actions.length > 0 && (
-				<div className="sui-page-header__actions">{actions}</div>
+				<div
+					id={`${pageHeaderId}_actions`}
+					className="sui-page-header__actions"
+				>
+					{actions}
+				</div>
 			)}
 		</div>
 	)