diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx
index a39a470f..944be0be 100644
--- a/packages/react/src/components/Accordion/Accordion.tsx
+++ b/packages/react/src/components/Accordion/Accordion.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -17,23 +17,57 @@
  */
 
 import MuiAccordion, {AccordionProps as MuiAccordionProps} from '@mui/material/Accordion';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, ReactElement, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
+import type {PaperTypeMap} from '../Paper';
 import './accordion.scss';
 
-export type AccordionProps = MuiAccordionProps;
+export type AccordionProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiAccordionProps, 'component'>;
 
 const COMPONENT_NAME: string = 'Accordion';
 
-const Accordion: FC<AccordionProps> & WithWrapperProps = (props: AccordionProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-accordion', className);
+/**
+ * The Accordion component lets users show and hide sections of related content on a page.
+ *
+ * Demos:
+ *
+ * - [Accordion (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-accordion)
+ * - [Accordion (MUI)](https://mui.com/material-ui/react-accordion/)
+ *
+ * API:
+ *
+ * - [Accordion API](https://mui.com/material-ui/api/accordion/)
+ * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/paper/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Accordion component.
+ * @param ref - The ref to be forwarded to the MuiAccordion component.
+ * @returns The rendered Accordion component.
+ */
+const Accordion: OverridableComponent<PaperTypeMap<AccordionProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: AccordionProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-accordion', className);
 
-  return <MuiAccordion className={classes} {...rest} />;
-};
+    return <MuiAccordion ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<PaperTypeMap<AccordionProps>> & WithWrapperProps;
 
 Accordion.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Accordion.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/Accordion/index.ts b/packages/react/src/components/Accordion/index.ts
index 1896ff61..29a1c979 100644
--- a/packages/react/src/components/Accordion/index.ts
+++ b/packages/react/src/components/Accordion/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './Accordion';
-export type {AccordionProps} from './Accordion';
+export * from './Accordion';
diff --git a/packages/react/src/components/AccordionDetails/AccordionDetails.tsx b/packages/react/src/components/AccordionDetails/AccordionDetails.tsx
index 1774181d..36f6668c 100644
--- a/packages/react/src/components/AccordionDetails/AccordionDetails.tsx
+++ b/packages/react/src/components/AccordionDetails/AccordionDetails.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiAccordionDetails, {AccordionDetailsProps as MuiAccordionDetailsProps} from '@mui/material/AccordionDetails';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import type {AccordionDetailsProps as MuiAccordionDetailsProps} from '@mui/material/AccordionDetails';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
@@ -26,18 +28,36 @@ export type AccordionDetailsProps = MuiAccordionDetailsProps;
 
 const COMPONENT_NAME: string = 'AccordionDetails';
 
+/**
+ * The Accordion Details component is the wrapper for the Accordion content.
+ *
+ * Demos:
+ *
+ * - [Accordion (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-accordion)
+ * - [Accordion (MUI)](https://mui.com/material-ui/react-accordion/)
+ *
+ * API:
+ *
+ * - [AccordionDetails API](https://mui.com/material-ui/api/accordion-details/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the AccordionDetails component.
+ * @param ref - The ref to be forwarded to the MuiAccordionDetails component.
+ * @returns The rendered AccordionDetails component.
+ */
 const AccordionDetails: ForwardRefExoticComponent<AccordionDetailsProps> & WithWrapperProps = forwardRef(
-  (props: AccordionDetailsProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: AccordionDetailsProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-accordion-details', className);
 
-    return <MuiAccordionDetails className={classes} {...rest} ref={ref} />;
+    return <MuiAccordionDetails ref={ref} className={classes} {...rest} />;
   },
 ) as ForwardRefExoticComponent<AccordionDetailsProps> & WithWrapperProps;
 
 AccordionDetails.displayName = composeComponentDisplayName(COMPONENT_NAME);
 AccordionDetails.muiName = COMPONENT_NAME;
-AccordionDetails.defaultProps = {};
 
 export default AccordionDetails;
diff --git a/packages/react/src/components/AccordionDetails/index.ts b/packages/react/src/components/AccordionDetails/index.ts
index f51b979f..c815ca9e 100644
--- a/packages/react/src/components/AccordionDetails/index.ts
+++ b/packages/react/src/components/AccordionDetails/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './AccordionDetails';
-export type {AccordionDetailsProps} from './AccordionDetails';
+export * from './AccordionDetails';
diff --git a/packages/react/src/components/AccordionSummary/AccordionSummary.tsx b/packages/react/src/components/AccordionSummary/AccordionSummary.tsx
index 37cc13b0..0cbe52cc 100644
--- a/packages/react/src/components/AccordionSummary/AccordionSummary.tsx
+++ b/packages/react/src/components/AccordionSummary/AccordionSummary.tsx
@@ -16,28 +16,67 @@
  * under the License.
  */
 
-import MuiAccordionSummary, {AccordionSummaryProps as MuiAccordionSummaryProps} from '@mui/material/AccordionSummary';
+import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import type {
+  AccordionSummaryProps as MuiAccordionSummaryProps,
+  AccordionSummaryTypeMap,
+} from '@mui/material/AccordionSummary';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ReactElement, ElementType, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
-export type AccordionSummaryProps = MuiAccordionSummaryProps;
+export type AccordionSummaryProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = AccordionSummaryTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiAccordionSummaryProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'AccordionSummary';
 
-const AccordionSummary: ForwardRefExoticComponent<AccordionSummaryProps> & WithWrapperProps = forwardRef(
-  (props: AccordionSummaryProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
-    const classes: string = clsx('oxygen-accordion-summary', className);
+/**
+ * The Accordion Summary component is the wrapper for the Accordion header, which expands or collapses the content when clicked.
+ *
+ * Demos:
+ *
+ * - [Accordion (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-accordion)
+ * - [Accordion (MUI)](https://mui.com/material-ui/react-accordion/)
+ *
+ * API:
+ *
+ * - [AccordionSummary API](https://mui.com/material-ui/api/accordion-summary/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ *
+ * @remarks
+ * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the AccordionSummary component.
+ * @param ref - The ref to be forwarded to the MuiAccordionSummary component.
+ * @returns The rendered AccordionSummary component.
+ */
+const AccordionSummary: OverridableComponent<AccordionSummaryTypeMap<AccordionSummaryProps>> & WithWrapperProps =
+  forwardRef(
+    <C extends ElementType = ElementType>(
+      {className, ...rest}: AccordionSummaryProps<C>,
+      ref: Ref<HTMLDivElement>,
+    ): ReactElement => {
+      const classes: string = clsx('oxygen-accordion-summary', className);
 
-    return <MuiAccordionSummary className={classes} {...rest} ref={ref} />;
-  },
-) as ForwardRefExoticComponent<AccordionSummaryProps> & WithWrapperProps;
+      return <MuiAccordionSummary ref={ref} className={classes} {...rest} />;
+    },
+  ) as OverridableComponent<AccordionSummaryTypeMap<AccordionSummaryProps>> & WithWrapperProps;
 
 AccordionSummary.displayName = composeComponentDisplayName(COMPONENT_NAME);
 AccordionSummary.muiName = COMPONENT_NAME;
-AccordionSummary.defaultProps = {};
 
 export default AccordionSummary;
diff --git a/packages/react/src/components/AccordionSummary/index.ts b/packages/react/src/components/AccordionSummary/index.ts
index 7edb0e1f..a5e4bade 100644
--- a/packages/react/src/components/AccordionSummary/index.ts
+++ b/packages/react/src/components/AccordionSummary/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './AccordionSummary';
-export type {AccordionSummaryProps} from './AccordionSummary';
+export * from './AccordionSummary';
+
+export type {AccordionSummaryTypeMap} from '@mui/material/AccordionSummary';
diff --git a/packages/react/src/components/AccountOverview/AccountOverview.tsx b/packages/react/src/components/AccountOverview/AccountOverview.tsx
index f4645b91..a72e1f1a 100644
--- a/packages/react/src/components/AccountOverview/AccountOverview.tsx
+++ b/packages/react/src/components/AccountOverview/AccountOverview.tsx
@@ -16,20 +16,29 @@
  * under the License.
  */
 
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement, ReactNode} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, ReactElement, ReactNode, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
-import Card, {CardProps} from '../Card';
-import CardHeader, {CardHeaderProps} from '../CardHeader';
-import Carousel, {CarouselStep} from '../Carousel';
+import Card from '../Card';
+import type {CardProps, CardTypeMap} from '../Card';
+import CardHeader from '../CardHeader';
+import type {CardHeaderProps} from '../CardHeader';
+import Carousel from '../Carousel';
+import type {CarouselStep} from '../Carousel';
 import CircularProgressAvatar from '../CircularProgressAvatar';
 import Divider from '../Divider';
-import {UserTemplate} from '../UserDropdownMenu';
+import type {UserTemplate} from '../UserDropdownMenu';
 import './account-overview.scss';
 
-export interface AccountOverviewProps extends Omit<CardProps, 'title'> {
+export type AccountOverviewProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = CardTypeMap['defaultComponent'],
+  P = {},
+> = Omit<CardProps<C, D, P>, 'title'> & {
   /**
    * Account completion steps.
    */
@@ -60,51 +69,77 @@ export interface AccountOverviewProps extends Omit<CardProps, 'title'> {
    * Logged user information.
    */
   user: UserTemplate;
-}
+};
 
 export type AccountCompletionSteps = CarouselStep;
 
 const COMPONENT_NAME: string = 'AccountOverview';
 
-const AccountOverview: FC<AccountOverviewProps> & WithWrapperProps = (props: AccountOverviewProps): ReactElement => {
-  const {
-    className,
-    title,
-    subheader,
-    accountCompletionStepsTitle,
-    accountCompletionSteps,
-    accountProgress,
-    user,
-    cardHeaderProps,
-    ...rest
-  } = props;
-
-  const classes: string = clsx('oxygen-account-overview', className);
+/**
+ * The Account Overview component lets you display the progress of the user's account.
+ * It includes the user's profile picture, name, email, account progress and account completion steps.
+ *
+ * Demos:
+ *
+ * - [Account Overview (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/patterns-account-overview)
+ *
+ * API:
+ *
+ * - inherits [Card API](https://mui.com/material-ui/api/card/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/card/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the AccountOverview component.
+ * @param ref - The ref to be forwarded to the Card component.
+ * @returns The rendered AccountOverview component.
+ */
+const AccountOverview: OverridableComponent<CardTypeMap<AccountOverviewProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {
+      className,
+      title,
+      subheader,
+      accountCompletionStepsTitle,
+      accountCompletionSteps,
+      accountProgress,
+      user,
+      cardHeaderProps,
+      ...rest
+    }: AccountOverviewProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-account-overview', className);
 
-  return (
-    <Card className={classes} elevation={0} variant="outlined" {...rest}>
-      <CardHeader
-        avatar={
-          <CircularProgressAvatar
-            color={accountProgress < 100 ? 'warning' : 'success'}
-            progress={accountProgress}
-            avatarOptions={{alt: "User's avatar", src: user?.image}}
-            badgeOptions={{badgeContent: `${accountProgress}%`, color: accountProgress < 100 ? 'warning' : 'success'}}
-          />
-        }
-        title={title}
-        subheader={subheader}
-        {...cardHeaderProps}
-      />
-      {accountCompletionSteps && (
-        <Box className="oxygen-account-completion-steps-box">
-          <Divider />
-          <Carousel title={accountCompletionStepsTitle} steps={accountCompletionSteps} />
-        </Box>
-      )}
-    </Card>
-  );
-};
+    return (
+      <Card ref={ref} className={classes} elevation={0} variant="outlined" {...rest}>
+        <CardHeader
+          avatar={
+            <CircularProgressAvatar
+              color={accountProgress < 100 ? 'warning' : 'success'}
+              progress={accountProgress}
+              avatarOptions={{alt: "User's avatar", src: user?.image}}
+              badgeOptions={{badgeContent: `${accountProgress}%`, color: accountProgress < 100 ? 'warning' : 'success'}}
+            />
+          }
+          title={title}
+          subheader={subheader}
+          {...cardHeaderProps}
+        />
+        {accountCompletionSteps && (
+          <Box className="oxygen-account-completion-steps-box">
+            <Divider />
+            <Carousel title={accountCompletionStepsTitle} steps={accountCompletionSteps} />
+          </Box>
+        )}
+      </Card>
+    );
+  },
+) as OverridableComponent<CardTypeMap<AccountOverviewProps>> & WithWrapperProps;
 
 AccountOverview.displayName = composeComponentDisplayName(COMPONENT_NAME);
 AccountOverview.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/AccountOverview/index.ts b/packages/react/src/components/AccountOverview/index.ts
index 2edf6a08..b469556e 100644
--- a/packages/react/src/components/AccountOverview/index.ts
+++ b/packages/react/src/components/AccountOverview/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './AccountOverview';
-export type {AccountOverviewProps} from './AccountOverview';
+export * from './AccountOverview';
diff --git a/packages/react/src/components/ActionCard/ActionCard.tsx b/packages/react/src/components/ActionCard/ActionCard.tsx
index 515ef90c..5ec9788b 100644
--- a/packages/react/src/components/ActionCard/ActionCard.tsx
+++ b/packages/react/src/components/ActionCard/ActionCard.tsx
@@ -16,18 +16,21 @@
  * under the License.
  */
 
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement, ReactNode} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, ReactElement, ReactNode, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Button from '../Button';
-import Card, {CardProps} from '../Card';
+import Card from '../Card';
+import type {CardProps, CardTypeMap} from '../Card';
 import CardActions from '../CardActions';
 import CardContent from '../CardContent';
 import Typography from '../Typography';
 import './action-card.scss';
 
-export interface ActionCardProps extends CardProps {
+export type ActionCardProps<C extends ElementType = ElementType> = CardProps<C> & {
   /**
    * The text to be displayed in the action button.
    */
@@ -48,33 +51,57 @@ export interface ActionCardProps extends CardProps {
    * The title of the card.
    */
   title: string;
-}
+};
 
 const COMPONENT_NAME: string = 'ActionCard';
 
-const ActionCard: FC<ActionCardProps> & WithWrapperProps = (props: ActionCardProps): ReactElement => {
-  const {className, image, title, description, actionText, onActionClick, ...rest} = props;
-
-  const classes: string = clsx('oxygen-action-card', className);
+/**
+ * The Action Card component is an extended version of the `Card` component with an action button.
+ *
+ * Demos:
+ *
+ * - [Action Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-action-card)
+ *
+ * API:
+ *
+ * - inherits [Card API](https://mui.com/material-ui/api/card/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/card/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the ActionCard component.
+ * @param ref - The ref to be forwarded to the Card component.
+ * @returns The rendered ActionCard component.
+ */
+const ActionCard: OverridableComponent<CardTypeMap<ActionCardProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, image, title, description, actionText, onActionClick, ...rest}: ActionCardProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-action-card', className);
 
-  return (
-    <Card className={classes} {...rest}>
-      <CardContent>
-        {image}
-        <Typography variant="subtitle1">{title}</Typography>
-        <Typography variant="body2">{description}</Typography>
-      </CardContent>
-      <CardActions>
-        <Button onClick={onActionClick} variant="contained">
-          {actionText}
-        </Button>
-      </CardActions>
-    </Card>
-  );
-};
+    return (
+      <Card ref={ref} className={classes} {...rest}>
+        <CardContent>
+          {image}
+          <Typography variant="subtitle1">{title}</Typography>
+          <Typography variant="body2">{description}</Typography>
+        </CardContent>
+        <CardActions>
+          <Button onClick={onActionClick} variant="contained">
+            {actionText}
+          </Button>
+        </CardActions>
+      </Card>
+    );
+  },
+) as OverridableComponent<CardTypeMap<ActionCardProps>> & WithWrapperProps;
 
 ActionCard.displayName = composeComponentDisplayName(COMPONENT_NAME);
 ActionCard.muiName = COMPONENT_NAME;
-ActionCard.defaultProps = {};
 
 export default ActionCard;
diff --git a/packages/react/src/components/ActionCard/index.ts b/packages/react/src/components/ActionCard/index.ts
index 6cf2bb06..bf033e71 100644
--- a/packages/react/src/components/ActionCard/index.ts
+++ b/packages/react/src/components/ActionCard/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './ActionCard';
-export type {ActionCardProps} from './ActionCard';
+export * from './ActionCard';
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index 43becf4e..3b2000d0 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -16,29 +16,61 @@
  * under the License.
  */
 
-import MuiAlert, {AlertProps as MuiAlertProps} from '@mui/material/Alert';
+import MuiAlert from '@mui/material/Alert';
+import type {AlertProps as MuiAlertProps} from '@mui/material/Alert';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ReactElement, ElementType, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
+import type {PaperTypeMap} from '../Paper';
 import './alert.scss';
 
-export type AlertProps = MuiAlertProps;
+export type AlertProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiAlertProps, 'component'>;
 
 const COMPONENT_NAME: string = 'Alert';
 
-const Alert: ForwardRefExoticComponent<AlertProps> & WithWrapperProps = forwardRef(
-  (props: AlertProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * The Alert component displays brief messages to the user without interrupting their use of the app.
+ *
+ * Demos:
+ *
+ * - [Alert (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-alert)
+ * - [Alert (MUI)](https://mui.com/material-ui/react-alert/)
+ *
+ * API:
+ *
+ * - [Alert API](https://mui.com/material-ui/api/alert/)
+ * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/paper/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Alert component.
+ * @param ref - The ref to be forwarded to the MuiAlert component.
+ * @returns The rendered Alert component.
+ */
+const Alert: OverridableComponent<PaperTypeMap<AlertProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: AlertProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-alert', className);
 
-    return <MuiAlert className={classes} {...rest} ref={ref} />;
+    return <MuiAlert ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<AlertProps> & WithWrapperProps;
+) as OverridableComponent<PaperTypeMap<AlertProps>> & WithWrapperProps;
 
 Alert.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Alert.muiName = COMPONENT_NAME;
-Alert.defaultProps = {};
 
 export default Alert;
diff --git a/packages/react/src/components/Alert/index.ts b/packages/react/src/components/Alert/index.ts
index dfca86d5..ee6a4340 100644
--- a/packages/react/src/components/Alert/index.ts
+++ b/packages/react/src/components/Alert/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Alert';
-export type {AlertProps} from './Alert';
+export * from './Alert';
+
+export type {AlertColor, AlertPropsVariantOverrides, AlertPropsColorOverrides} from '@mui/material/Alert';
diff --git a/packages/react/src/components/AlertTitle/AlertTitle.tsx b/packages/react/src/components/AlertTitle/AlertTitle.tsx
index 2d5ed0fd..d6436ed8 100644
--- a/packages/react/src/components/AlertTitle/AlertTitle.tsx
+++ b/packages/react/src/components/AlertTitle/AlertTitle.tsx
@@ -16,29 +16,61 @@
  * under the License.
  */
 
-import MuiAlertTitle, {AlertTitleProps as MuiAlertProps} from '@mui/material/AlertTitle';
+import MuiAlertTitle from '@mui/material/AlertTitle';
+import type {AlertTitleProps, AlertTitleProps as MuiAlertTitleProps} from '@mui/material/AlertTitle';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ReactElement, ElementType, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
+import type {TypographyTypeMap} from '../Typography';
 import './alert-title.scss';
 
-export type AlertProps = MuiAlertProps;
+export type AlertProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiAlertTitleProps, 'component'>;
 
 const COMPONENT_NAME: string = 'AlertTitle';
 
-const AlertTitle: ForwardRefExoticComponent<AlertProps> & WithWrapperProps = forwardRef(
-  (props: AlertProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * The Alert Title component can be used to display a title for the Alert component.
+ *
+ * Demos:
+ *
+ * - [Alert (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-alert)
+ * - [Alert (MUI)](https://mui.com/material-ui/react-alert/)
+ *
+ * API:
+ *
+ * - [AlertTitle API](https://mui.com/material-ui/api/alert-title/)
+ * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the AlertTitle component.
+ * @param ref - The ref to be forwarded to the MuiAlertTitle component.
+ * @returns The rendered AlertTitle component.
+ */
+const AlertTitle: OverridableComponent<TypographyTypeMap<AlertTitleProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: AlertProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-alert-title', className);
 
-    return <MuiAlertTitle className={classes} {...rest} ref={ref} />;
+    return <MuiAlertTitle ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<AlertProps> & WithWrapperProps;
+) as OverridableComponent<TypographyTypeMap<AlertTitleProps>> & WithWrapperProps;
 
 AlertTitle.displayName = composeComponentDisplayName(COMPONENT_NAME);
 AlertTitle.muiName = COMPONENT_NAME;
-AlertTitle.defaultProps = {};
 
 export default AlertTitle;
diff --git a/packages/react/src/components/AlertTitle/index.ts b/packages/react/src/components/AlertTitle/index.ts
index c71b698f..b3381e1d 100644
--- a/packages/react/src/components/AlertTitle/index.ts
+++ b/packages/react/src/components/AlertTitle/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './AlertTitle';
-export type {AlertProps} from './AlertTitle';
+export * from './AlertTitle';
diff --git a/packages/react/src/components/AppBar/AppBar.tsx b/packages/react/src/components/AppBar/AppBar.tsx
index f7be5ce1..91c22497 100644
--- a/packages/react/src/components/AppBar/AppBar.tsx
+++ b/packages/react/src/components/AppBar/AppBar.tsx
@@ -16,27 +16,64 @@
  * under the License.
  */
 
-import MuiAppBar, {AppBarProps as MuiAppBarProps} from '@mui/material/AppBar';
+import MuiAppBar from '@mui/material/AppBar';
+import type {AppBarTypeMap, AppBarProps as MuiAppBarProps} from '@mui/material/AppBar';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, ReactElement, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './app-bar.scss';
 
-export type AppBarProps = MuiAppBarProps;
+export type AppBarProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = AppBarTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiAppBarProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'AppBar';
 
-const AppBar: FC<AppBarProps> & WithWrapperProps = (props: AppBarProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-app-bar', className);
+/**
+ * The App Bar component displays information and actions relating to the current screen.
+ *
+ * Demos:
+ *
+ * - [App Bar (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-app-bar)
+ * - [App Bar (MUI)](https://mui.com/material-ui/react-app-bar/)
+ *
+ * API:
+ *
+ * - [AppBar API](https://mui.com/material-ui/api/app-bar/)
+ * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/paper/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the AppBar component.
+ * @param ref - The ref to be forwarded to the MuiAppBar component.
+ * @returns The rendered AppBar component.
+ */
+const AppBar: OverridableComponent<AppBarTypeMap<AppBarProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: AppBarProps<C>,
+    ref: Ref<HTMLHeadingElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-app-bar', className);
 
-  return <MuiAppBar className={classes} {...rest} />;
-};
+    return <MuiAppBar ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<AppBarTypeMap<AppBarProps>> & WithWrapperProps;
 
 AppBar.displayName = composeComponentDisplayName(COMPONENT_NAME);
 AppBar.muiName = COMPONENT_NAME;
-AppBar.defaultProps = {};
 
 export default AppBar;
diff --git a/packages/react/src/components/AppBar/index.ts b/packages/react/src/components/AppBar/index.ts
index c64c13e2..90e28d63 100644
--- a/packages/react/src/components/AppBar/index.ts
+++ b/packages/react/src/components/AppBar/index.ts
@@ -18,3 +18,5 @@
 
 export {default} from './AppBar';
 export type {AppBarProps} from './AppBar';
+
+export type {AppBarPropsColorOverrides, AppBarTypeMap} from '@mui/material/AppBar';
diff --git a/packages/react/src/components/AppShell/AppShell.tsx b/packages/react/src/components/AppShell/AppShell.tsx
index 1e7fc595..8a6d7196 100644
--- a/packages/react/src/components/AppShell/AppShell.tsx
+++ b/packages/react/src/components/AppShell/AppShell.tsx
@@ -16,14 +16,17 @@
  * under the License.
  */
 
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, PropsWithChildren, ReactElement, ReactNode} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement, ReactNode} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
-import Box, {BoxProps} from '../Box';
+import Box from '../Box';
+import type {BoxProps, BoxTypeMap} from '../Box';
 import './app-shell.scss';
 
-export interface AppShellProps extends BoxProps {
+export type AppShellProps<C extends ElementType = ElementType> = BoxProps<C> & {
   /**
    * Footer component.
    */
@@ -36,35 +39,57 @@ export interface AppShellProps extends BoxProps {
    * Navigation component.
    */
   navigation?: ReactNode;
-}
+};
 
 const COMPONENT_NAME: string = 'AppShell';
 
-const AppShell: FC<PropsWithChildren<AppShellProps>> & WithWrapperProps = (
-  props: PropsWithChildren<AppShellProps>,
-): ReactElement => {
-  const {className, children, footer, header, navigation, ...rest} = props;
-
-  const classes: string = clsx('oxygen-app-shell', className);
+/**
+ * The App Shell component is a layout component that can be used to create a common Header - Navbar - Footer - Aside - Content layout pattern.
+ *
+ * Demos:
+ *
+ * - [App Shell (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/layout-app-shell)
+ *
+ * API:
+ *
+ * - inherits [Box API](https://mui.com/material-ui/api/box/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the AppShell component.
+ * @param ref - The ref to be forwarded to the Box component.
+ * @returns The rendered AppShell component.
+ */
+const AppShell: OverridableComponent<BoxTypeMap<AppShellProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType>(
+    {className, children, footer, header, navigation, ...rest}: AppShellProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-app-shell', className);
 
-  return (
-    <Box className={classes} {...rest}>
-      {header}
-      <Box className="oxygen-app-shell-content">
-        <Box className="oxygen-app-shell-navigation-wrapper">{navigation}</Box>
-        <Box className="oxygen-app-shell-main-wrapper">
-          <Box component="main" className="oxygen-app-shell-main">
-            {children}
+    return (
+      <Box ref={ref} className={classes} {...rest}>
+        {header}
+        <Box className="oxygen-app-shell-content">
+          <Box className="oxygen-app-shell-navigation-wrapper">{navigation}</Box>
+          <Box className="oxygen-app-shell-main-wrapper">
+            <Box component="main" className="oxygen-app-shell-main">
+              {children}
+            </Box>
+            {footer}
           </Box>
-          {footer}
         </Box>
       </Box>
-    </Box>
-  );
-};
+    );
+  },
+) as OverridableComponent<BoxTypeMap<AppShellProps>> & WithWrapperProps;
 
 AppShell.displayName = composeComponentDisplayName(COMPONENT_NAME);
 AppShell.muiName = COMPONENT_NAME;
-AppShell.defaultProps = {};
 
 export default AppShell;
diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx
index 684104e2..a25a9822 100644
--- a/packages/react/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx
@@ -16,24 +16,49 @@
  * under the License.
  */
 
-import MuiAutocomplete, {AutocompleteProps as MuiAutocompleteProps} from '@mui/material/Autocomplete';
+import MuiAutocomplete from '@mui/material/Autocomplete';
+import type {AutocompleteProps as MuiAutocompleteProps} from '@mui/material/Autocomplete';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
+import type {ChipTypeMap} from '../Chip';
 import './autocomplete.scss';
 
-export type AutocompleteProps<T> = MuiAutocompleteProps<T, boolean, boolean, boolean>;
+export type AutocompleteProps<
+  T,
+  Multiple extends boolean | undefined = boolean | undefined,
+  DisableClearable extends boolean | undefined = boolean | undefined,
+  FreeSolo extends boolean | undefined = boolean | undefined,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+> = MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>;
 
 const COMPONENT_NAME: string = 'Autocomplete';
 
 /**
- * @remarks `any` is used as the generic type for the props because the generic type is not used in the component.
+ * The Autocomplete is a normal text input enhanced by a panel of suggested options.
+ *
+ * Demos:
+ *
+ * - [Autocomplete (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-autocomplete)
+ * - [Autocomplete (MUI)](https://mui.com/material-ui/react-autocomplete/)
+ *
+ * API:
+ *
+ * - [Autocomplete API](https://mui.com/material-ui/api/autocomplete/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ❌ The component cannot hold a `ref`.
+ *
+ * @param props - The props for the Accordion component.
+ * @param ref - The ref to be forwarded to the MuiAccordion component.
+ * @returns The rendered Accordion component.
  */
 const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<any>> & WithWrapperProps = forwardRef(
-  (props: AutocompleteProps<any>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: AutocompleteProps<any>, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-autocomplete', className);
 
     return <MuiAutocomplete className={classes} {...rest} ref={ref} />;
@@ -42,6 +67,5 @@ const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<any>> & WithWrap
 
 Autocomplete.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Autocomplete.muiName = COMPONENT_NAME;
-Autocomplete.defaultProps = {};
 
 export default Autocomplete;
diff --git a/packages/react/src/components/Autocomplete/index.ts b/packages/react/src/components/Autocomplete/index.ts
index b9d71d10..095d58ce 100644
--- a/packages/react/src/components/Autocomplete/index.ts
+++ b/packages/react/src/components/Autocomplete/index.ts
@@ -17,5 +17,18 @@
  */
 
 export {default} from './Autocomplete';
-export type {AutocompleteProps} from './Autocomplete';
-export type {AutocompleteRenderGetTagProps, AutocompleteRenderInputParams} from '@mui/material/Autocomplete';
+export * from './Autocomplete';
+
+export {createFilterOptions} from '@mui/material/Autocomplete';
+export type {
+  AutocompleteChangeDetails,
+  AutocompleteChangeReason,
+  AutocompleteCloseReason,
+  AutocompleteInputChangeReason,
+  AutocompleteOwnerState,
+  AutocompleteRenderGetTagProps,
+  AutocompleteRenderOptionState,
+  AutocompleteRenderGroupParams,
+  AutocompleteRenderInputParams,
+  AutocompletePropsSizeOverrides,
+} from '@mui/material/Autocomplete';
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
index f1ad7f8a..28296948 100644
--- a/packages/react/src/components/Avatar/Avatar.tsx
+++ b/packages/react/src/components/Avatar/Avatar.tsx
@@ -16,15 +16,22 @@
  * under the License.
  */
 
-import MuiAvatar, {AvatarProps as MuiAvatarProps} from '@mui/material/Avatar';
+import MuiAvatar from '@mui/material/Avatar';
+import type {AvatarProps as MuiAvatarProps, AvatarTypeMap} from '@mui/material/Avatar';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {ElementType, FC, ReactElement, useMemo} from 'react';
+import {forwardRef, useMemo} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import usePastelColorGenerator from '../../hooks/use-pastel-color-generator';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './avatar.scss';
 
-export type AvatarProps<C extends ElementType = ElementType> = {
+export type AvatarProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = AvatarTypeMap['defaultComponent'],
+  P = {},
+> = {
   /**
    * Text for the random background color generator.
    */
@@ -37,43 +44,62 @@ export type AvatarProps<C extends ElementType = ElementType> = {
    * If `true`, the background color will be randomly generated.
    */
   randomBackgroundColor?: boolean;
-} & Omit<MuiAvatarProps<C>, 'component'>;
+} & Omit<MuiAvatarProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Avatar';
 
-const Avatar: FC<AvatarProps> & WithWrapperProps = <C extends ElementType>(props: AvatarProps<C>): ReactElement => {
-  const {className, children, component, randomBackgroundColor, backgroundColorRandomizer, ...rest} = props;
-
-  const colorRandomizer: string = useMemo(() => {
-    if (backgroundColorRandomizer) {
-      return backgroundColorRandomizer;
-    }
+/**
+ * Avatars are found throughout material design with uses in everything from tables to dialog menus.
+ *
+ * Demos:
+ *
+ * - [Avatar (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-avatar)
+ * - [Avatar (MUI)](https://mui.com/material-ui/react-avatar/)
+ *
+ * API:
+ *
+ * - [Avatar API](https://mui.com/material-ui/api/avatar/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Avatar component.
+ * @param ref - The ref to be forwarded to the MuiAvatar component.
+ * @returns The rendered Avatar component.
+ */
+const Avatar: OverridableComponent<AvatarTypeMap<AvatarProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, children, randomBackgroundColor, backgroundColorRandomizer, ...rest}: AvatarProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const colorRandomizer: string = useMemo(() => {
+      if (backgroundColorRandomizer) {
+        return backgroundColorRandomizer;
+      }
 
-    if (typeof children === 'string') {
-      return children;
-    }
+      if (typeof children === 'string') {
+        return children;
+      }
 
-    return '';
-  }, [children, backgroundColorRandomizer]);
+      return '';
+    }, [children, backgroundColorRandomizer]);
 
-  const {color} = usePastelColorGenerator(colorRandomizer);
+    const {color} = usePastelColorGenerator(colorRandomizer);
 
-  const classes: string = clsx('oxygen-avatar', className);
+    const classes: string = clsx('oxygen-avatar', className);
 
-  return (
-    <MuiAvatar
-      component={component}
-      className={classes}
-      sx={{bgcolor: randomBackgroundColor ? color : undefined}}
-      {...rest}
-    >
-      {children}
-    </MuiAvatar>
-  );
-};
+    return (
+      <MuiAvatar ref={ref} className={classes} sx={{bgcolor: randomBackgroundColor ? color : undefined}} {...rest}>
+        {children}
+      </MuiAvatar>
+    );
+  },
+) as OverridableComponent<AvatarTypeMap<AvatarProps>> & WithWrapperProps;
 
 Avatar.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Avatar.muiName = COMPONENT_NAME;
-Avatar.defaultProps = {};
 
 export default Avatar;
diff --git a/packages/react/src/components/Avatar/index.ts b/packages/react/src/components/Avatar/index.ts
index ed378b1d..26c4986b 100644
--- a/packages/react/src/components/Avatar/index.ts
+++ b/packages/react/src/components/Avatar/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Avatar';
-export type {AvatarProps} from './Avatar';
+export * from './Avatar';
+
+export type {AvatarPropsVariantOverrides, AvatarTypeMap} from '@mui/material/Avatar';
diff --git a/packages/react/src/components/Backdrop/Backdrop.tsx b/packages/react/src/components/Backdrop/Backdrop.tsx
index 10078c07..629802ff 100644
--- a/packages/react/src/components/Backdrop/Backdrop.tsx
+++ b/packages/react/src/components/Backdrop/Backdrop.tsx
@@ -16,27 +16,64 @@
  * under the License.
  */
 
-import MuiBackdrop, {BackdropProps as MuiBackdropProps} from '@mui/material/Backdrop';
+import MuiBackdrop from '@mui/material/Backdrop';
+import type {BackdropProps as MuiBackdropProps, BackdropTypeMap} from '@mui/material/Backdrop';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './backdrop.scss';
 
-export type BackdropProps = MuiBackdropProps;
+export type BackdropProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = BackdropTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiBackdropProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Backdrop';
 
-const Backdrop: FC<BackdropProps> & WithWrapperProps = (props: BackdropProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-backdrop', className);
+/**
+ * The Backdrop component narrows the user's focus to a particular element on the screen.
+ *
+ * Demos:
+ *
+ * - [Backdrop (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-backdrop)
+ * - [Backdrop (MUI)](https://mui.com/material-ui/react-backdrop/)
+ *
+ * API:
+ *
+ * - [Backdrop API](https://mui.com/material-ui/api/backdrop/)
+ * - inherits [Fade API](https://mui.com/material-ui/api/fade/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Fade](https://mui.com/material-ui/api/fade/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Backdrop component.
+ * @param ref - The ref to be forwarded to the MuiBackdrop component.
+ * @returns The rendered Backdrop component.
+ */
+const Backdrop: OverridableComponent<BackdropTypeMap<BackdropProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: BackdropProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-backdrop', className);
 
-  return <MuiBackdrop className={classes} {...rest} />;
-};
+    return <MuiBackdrop ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<BackdropTypeMap<BackdropProps>> & WithWrapperProps;
 
 Backdrop.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Backdrop.muiName = COMPONENT_NAME;
-Backdrop.defaultProps = {};
 
 export default Backdrop;
diff --git a/packages/react/src/components/Backdrop/index.ts b/packages/react/src/components/Backdrop/index.ts
index ca508f8e..c992ac72 100644
--- a/packages/react/src/components/Backdrop/index.ts
+++ b/packages/react/src/components/Backdrop/index.ts
@@ -17,4 +17,7 @@
  */
 
 export {default} from './Backdrop';
-export type {BackdropProps} from './Backdrop';
+export * from './Backdrop';
+
+export {BackdropRoot} from '@mui/material/Backdrop';
+export type {BackdropComponentsPropsOverrides, BackdropTypeMap} from '@mui/material/Backdrop';
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index b0c1264d..6ea9f976 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -16,24 +16,64 @@
  * under the License.
  */
 
-import MuiBadge, {BadgeProps as MuiBadgeProps} from '@mui/material/Badge';
+import MuiBadge from '@mui/material/Badge';
+import type {BadgeProps as MuiBadgeProps, BadgeTypeMap} from '@mui/material/Badge';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './badge.scss';
 
-export type BadgeProps = MuiBadgeProps;
+export type BadgeProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = BadgeTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiBadgeProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Badge';
 
-const Badge: FC<BadgeProps> & WithWrapperProps = (props: BadgeProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-badge', className);
+/**
+ * The Badge component generates a small badge to the top-right of its child(ren).
+ *
+ * Demos:
+ *
+ * - [Avatar (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-avatar)
+ * - [Badge (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-badge/)
+ * - [Avatar (MUI)](https://mui.com/material-ui/react-avatar/)
+ * - [Badge (MUI)](https://mui.com/material-ui/react-badge/)
+ *
+ * API:
+ *
+ * - [Badge API](https://mui.com/material-ui/api/badge/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Badge component.
+ * @param ref - The ref to be forwarded to the MuiBadge component.
+ * @returns The rendered Badge component.
+ */
+const Badge: OverridableComponent<BadgeTypeMap<BadgeTypeMap['defaultComponent'], BadgeProps>> & WithWrapperProps =
+  forwardRef(
+    <C extends ElementType = ElementType>(
+      {className, ...rest}: BadgeProps<C>,
+      ref: Ref<HTMLSpanElement>,
+    ): ReactElement => {
+      const classes: string = clsx('oxygen-badge', className);
 
-  return <MuiBadge className={classes} {...rest} />;
-};
+      return <MuiBadge ref={ref} className={classes} {...rest} />;
+    },
+  ) as OverridableComponent<BadgeTypeMap<BadgeTypeMap['defaultComponent'], BadgeProps>> & WithWrapperProps;
 
 Badge.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Badge.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/Badge/index.ts b/packages/react/src/components/Badge/index.ts
index d01c35d7..d251c2e4 100644
--- a/packages/react/src/components/Badge/index.ts
+++ b/packages/react/src/components/Badge/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Badge';
-export type {BadgeProps} from './Badge';
+export * from './Badge';
+
+export type {BadgePropsVariantOverrides, BadgePropsColorOverrides, BadgeOrigin} from '@mui/material/Badge';
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index 021f86eb..d2f80265 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -16,30 +16,60 @@
  * under the License.
  */
 
-import MuiBox, {BoxProps as MuiBoxProps} from '@mui/material/Box';
+import MuiBox from '@mui/material/Box';
+import type {BoxProps as MuiBoxProps} from '@mui/material/Box';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import type {BoxTypeMap} from '@mui/system/Box';
 import clsx from 'clsx';
-import {ElementType, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, ReactElement, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
-export type BoxProps<C extends ElementType = ElementType> = {
+export type BoxProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = BoxTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiBoxProps<C>, 'component'>;
+} & Omit<MuiBoxProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Box';
 
-const Box: ForwardRefExoticComponent<BoxProps> & WithWrapperProps = forwardRef(
-  <C extends ElementType>(props: BoxProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
+ *
+ * Demos:
+ *
+ * - [Box (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/layout-box)
+ * - [Box (MUI)](https://mui.com/material-ui/react-box/)
+ *
+ * API:
+ *
+ * - [Box API](https://mui.com/material-ui/api/box/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Badge component.
+ * @param ref - The ref to be forwarded to the MuiBadge component.
+ * @returns The rendered Badge component.
+ */
+const Box: OverridableComponent<BoxTypeMap<BoxProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>({className, ...rest}: BoxProps<C>, ref: Ref<HTMLSpanElement>): ReactElement => {
     const classes: string = clsx('oxygen-box', className);
 
-    return <MuiBox className={classes} ref={ref} {...rest} />;
+    return <MuiBox ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<BoxProps> & WithWrapperProps;
+) as OverridableComponent<BoxTypeMap<BoxProps>> & WithWrapperProps;
 
 Box.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Box.muiName = COMPONENT_NAME;
-Box.defaultProps = {};
 
 export default Box;
diff --git a/packages/react/src/components/Box/index.ts b/packages/react/src/components/Box/index.ts
index cd76e3f7..d3e04e14 100644
--- a/packages/react/src/components/Box/index.ts
+++ b/packages/react/src/components/Box/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Box';
-export type {BoxProps} from './Box';
+export * from './Box';
+
+export {BoxTypeMap} from '@mui/system/Box';
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
index e318f29f..d69d0d31 100644
--- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -16,31 +16,68 @@
  * under the License.
  */
 
-import MuiBreadcrumbs, {BreadcrumbsProps as MuiBreadcrumbsProps} from '@mui/material/Breadcrumbs';
+import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
+import type {BreadcrumbsProps as MuiBreadcrumbsProps, BreadcrumbsTypeMap} from '@mui/material/Breadcrumbs';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './breadcrumbs.scss';
 
-export type BreadcrumbsProps = MuiBreadcrumbsProps;
+export type BreadcrumbsProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = BreadcrumbsTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiBreadcrumbsProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Breadcrumbs';
 
-const Breadcrumbs: FC<BreadcrumbsProps> & WithWrapperProps = (props: BreadcrumbsProps): ReactElement => {
-  const {className, children, ...rest} = props;
-
-  const classes: string = clsx('oxygen-breadcrumbs', className);
+/**
+ * The Breadcrumbs component is a list of links that help visualize a page's location within
+ * a site's hierarchical structure, it allows navigation up to any of the ancestors.
+ *
+ * Demos:
+ *
+ * - [Breadcrumbs (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-breadcrumbs)
+ * - [Breadcrumbs (MUI)](https://mui.com/material-ui/react-breadcrumbs/)
+ *
+ * API:
+ *
+ * - [Breadcrumbs API](https://mui.com/material-ui/api/breadcrumbs/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Breadcrumbs component.
+ * @param ref - The ref to be forwarded to the MuiBreadcrumbs component.
+ * @returns The rendered Breadcrumbs component.
+ */
+const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap<BreadcrumbsProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, children, ...rest}: BreadcrumbsProps<C>,
+    ref: Ref<HTMLSpanElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-breadcrumbs', className);
 
-  return (
-    <MuiBreadcrumbs aria-label="breadcrumbs" className={classes} {...rest}>
-      {children}
-    </MuiBreadcrumbs>
-  );
-};
+    return (
+      <MuiBreadcrumbs ref={ref} aria-label="breadcrumbs" className={classes} {...rest}>
+        {children}
+      </MuiBreadcrumbs>
+    );
+  },
+) as OverridableComponent<BreadcrumbsTypeMap<BreadcrumbsProps>> & WithWrapperProps;
 
 Breadcrumbs.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Breadcrumbs.muiName = 'Breadcrumbs';
-Breadcrumbs.defaultProps = {};
 
 export default Breadcrumbs;
diff --git a/packages/react/src/components/Breadcrumbs/index.ts b/packages/react/src/components/Breadcrumbs/index.ts
index b2114fc0..cd144ade 100644
--- a/packages/react/src/components/Breadcrumbs/index.ts
+++ b/packages/react/src/components/Breadcrumbs/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Breadcrumbs';
-export type {BreadcrumbsProps} from './Breadcrumbs';
+export * from './Breadcrumbs';
+
+export {BreadcrumbsTypeMap} from '@mui/material/Breadcrumbs';
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index 2151e7ea..74214983 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -16,24 +16,63 @@
  * under the License.
  */
 
-import MuiButton, {LoadingButtonProps as MuiButtonProps} from '@mui/lab/LoadingButton';
+import MuiButton from '@mui/lab/LoadingButton';
+import type {LoadingButtonTypeMap, LoadingButtonProps as MuiButtonProps} from '@mui/lab/LoadingButton';
+import type {ButtonTypeMap} from '@mui/material';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, ReactElement, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './button.scss';
 
-export type ButtonProps = MuiButtonProps;
+export type ButtonProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = LoadingButtonTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiButtonProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Button';
 
-const Button: FC<ButtonProps> & WithWrapperProps = (props: ButtonProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-button', className);
+/**
+ * The Button component allow users to take actions, and make choices, with a single tap.
+ *
+ * Demos:
+ *
+ * - [Button (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-button)
+ * - [Button (MUI)](https://mui.com/material-ui/react-button/)
+ *
+ * API:
+ *
+ * - [LoadingButton API](https://mui.com/material-ui/api/loading-button/)
+ * - inherits [Button API](https://mui.com/material-ui/api/button/)
+ *
+ * @remarks
+ * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Button component.
+ * @param ref - The ref to be forwarded to the MuiButton component.
+ * @returns The rendered Button component.
+ */
+const Button: OverridableComponent<ButtonTypeMap<ButtonProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: ButtonProps<C>,
+    ref: Ref<HTMLButtonElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-button', className);
 
-  return <MuiButton className={classes} {...rest} />;
-};
+    return <MuiButton ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<ButtonTypeMap<ButtonProps>> & WithWrapperProps;
 
 Button.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Button.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/Button/index.ts b/packages/react/src/components/Button/index.ts
index 3fef8878..9e0afec9 100644
--- a/packages/react/src/components/Button/index.ts
+++ b/packages/react/src/components/Button/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Button';
-export type {ButtonProps} from './Button';
+export * from './Button';
+
+export type {LoadingButtonTypeMap} from '@mui/lab/LoadingButton';
diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
index 2d9fe935..bcf4bbb4 100644
--- a/packages/react/src/components/Card/Card.tsx
+++ b/packages/react/src/components/Card/Card.tsx
@@ -16,34 +16,65 @@
  * under the License.
  */
 
-import MuiCard, {CardProps as MuiCardProps} from '@mui/material/Card';
+import MuiCard from '@mui/material/Card';
+import type {CardProps as MuiCardProps, CardTypeMap} from '@mui/material/Card';
 import clsx from 'clsx';
-import {ElementType, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './card.scss';
 
-export type CardProps<C extends ElementType = ElementType> = {
+export type CardProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = CardTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiCardProps<C>, 'component'>;
+} & Omit<MuiCardProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Card';
 
+/**
+ * The Card component contain content and actions about a single subject.
+ *
+ * Demos:
+ *
+ * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card)
+ * - [Card (MUI)](https://mui.com/material-ui/react-card/)
+ *
+ * API:
+ *
+ * - [Card API](https://mui.com/material-ui/api/card/)
+ * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/paper/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Card component.
+ * @param ref - The ref to be forwarded to the MuiCard component.
+ * @returns The rendered Card component.
+ */
 const Card: ForwardRefExoticComponent<CardProps> & WithWrapperProps = forwardRef(
-  <C extends ElementType>(props: CardProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, component, onClick, ...rest} = props;
-
+  <C extends ElementType>(
+    {className, component, onClick, elevation = 0, variant = 'outlined', ...rest}: CardProps<C>,
+    ref: MutableRefObject<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-card', {'with-hover': onClick}, className);
 
-    return <MuiCard className={classes} ref={ref} onClick={onClick} {...rest} />;
+    return (
+      <MuiCard className={classes} ref={ref} onClick={onClick} elevation={elevation} variant={variant} {...rest} />
+    );
   },
 ) as ForwardRefExoticComponent<CardProps> & WithWrapperProps;
 
 Card.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Card.muiName = COMPONENT_NAME;
-Card.defaultProps = {
-  elevation: 0,
-  variant: 'outlined',
-};
 
 export default Card;
diff --git a/packages/react/src/components/Card/index.ts b/packages/react/src/components/Card/index.ts
index ac35e13e..061442ef 100644
--- a/packages/react/src/components/Card/index.ts
+++ b/packages/react/src/components/Card/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Card';
-export type {CardProps} from './Card';
+export * from './Card';
+
+export type {CardPropsColorOverrides, CardTypeMap} from '@mui/material/Card';
diff --git a/packages/react/src/components/CardActions/CardActions.tsx b/packages/react/src/components/CardActions/CardActions.tsx
index d7277e60..3a0e6897 100644
--- a/packages/react/src/components/CardActions/CardActions.tsx
+++ b/packages/react/src/components/CardActions/CardActions.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiCardActions, {CardActionsProps as MuiCardActionsProps} from '@mui/material/CardActions';
+import MuiCardActions from '@mui/material/CardActions';
+import type {CardActionsProps as MuiCardActionsProps} from '@mui/material/CardActions';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './card-actions.scss';
@@ -27,13 +29,34 @@ export type CardActionsProps = MuiCardActionsProps;
 
 const COMPONENT_NAME: string = 'CardActions';
 
-const CardActions: FC<CardActionsProps> & WithWrapperProps = (props: CardActionsProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-card-actions', className);
+/**
+ * The Card Actions component is an optional wrapper that groups a set of buttons.
+ *
+ * Demos:
+ *
+ * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card)
+ * - [Card (MUI)](https://mui.com/material-ui/react-card/)
+ *
+ * API:
+ *
+ * - [CardActions API](https://mui.com/material-ui/api/card-actions/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the CardActions component.
+ * @param ref - The ref to be forwarded to the MuiCardActions component.
+ * @returns The rendered CardActions component.
+ */
+const CardActions: ForwardRefExoticComponent<CardActionsProps> & WithWrapperProps = forwardRef(
+  ({className, ...rest}: CardActionsProps, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-card-actions', className);
 
-  return <MuiCardActions className={classes} {...rest} />;
-};
+    return <MuiCardActions ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<CardActionsProps> & WithWrapperProps;
 
 CardActions.displayName = composeComponentDisplayName(COMPONENT_NAME);
 CardActions.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/CardActions/index.ts b/packages/react/src/components/CardActions/index.ts
index 4f48e301..54117332 100644
--- a/packages/react/src/components/CardActions/index.ts
+++ b/packages/react/src/components/CardActions/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './CardActions';
-export type {CardActionsProps} from './CardActions';
+export * from './CardActions';
diff --git a/packages/react/src/components/CardContent/CardContent.tsx b/packages/react/src/components/CardContent/CardContent.tsx
index 8c986059..5ff85eda 100644
--- a/packages/react/src/components/CardContent/CardContent.tsx
+++ b/packages/react/src/components/CardContent/CardContent.tsx
@@ -16,26 +16,61 @@
  * under the License.
  */
 
-import MuiCardContent, {CardContentProps as MuiCardContentProps} from '@mui/material/CardContent';
+import MuiCardContent from '@mui/material/CardContent';
+import type {CardContentProps as MuiCardContentProps, CardContentTypeMap} from '@mui/material/CardContent';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './card-content.scss';
 
-export type CardContentProps = MuiCardContentProps;
+export type CardContentProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = CardContentTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiCardContentProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'CardContent';
 
-const CardContent: ForwardRefExoticComponent<CardContentProps> & WithWrapperProps = forwardRef(
-  (props: CardContentProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * The Card Content component is the wrapper for the Card content.
+ *
+ * Demos:
+ *
+ * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card)
+ * - [Card (MUI)](https://mui.com/material-ui/react-card/)
+ *
+ * API:
+ *
+ * - [CardContent API](https://mui.com/material-ui/api/card-content/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the CardContent component.
+ * @param ref - The ref to be forwarded to the MuiCardContent component.
+ * @returns The rendered CardContent component.
+ */
+const CardContent: OverridableComponent<CardContentTypeMap<CardContentProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: CardContentProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-card-content', className);
 
     return <MuiCardContent ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<CardContentProps> & WithWrapperProps;
+) as OverridableComponent<CardContentTypeMap<CardContentProps>> & WithWrapperProps;
 
 CardContent.displayName = composeComponentDisplayName(COMPONENT_NAME);
 CardContent.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/CardContent/index.ts b/packages/react/src/components/CardContent/index.ts
index e4e0bc88..21baaaa5 100644
--- a/packages/react/src/components/CardContent/index.ts
+++ b/packages/react/src/components/CardContent/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './CardContent';
-export type {CardContentProps} from './CardContent';
+export * from './CardContent';
+
+export type {CardContentTypeMap} from '@mui/material/CardContent';
diff --git a/packages/react/src/components/CardHeader/CardHeader.tsx b/packages/react/src/components/CardHeader/CardHeader.tsx
index 0fb6cab6..d9552a29 100644
--- a/packages/react/src/components/CardHeader/CardHeader.tsx
+++ b/packages/react/src/components/CardHeader/CardHeader.tsx
@@ -16,24 +16,63 @@
  * under the License.
  */
 
-import MuiCardHeader, {CardHeaderProps as MuiCardHeaderProps} from '@mui/material/CardHeader';
+import MuiCardHeader from '@mui/material/CardHeader';
+import type {CardHeaderProps as MuiCardHeaderProps, CardHeaderTypeMap} from '@mui/material/CardHeader';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './card-header.scss';
 
-export type CardHeaderProps = MuiCardHeaderProps;
+export type CardHeaderProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = CardHeaderTypeMap['defaultComponent'],
+  P = {},
+  T extends ElementType = 'span',
+  S extends ElementType = 'span',
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiCardHeaderProps<D, P, T, S>, 'component'>;
 
 const COMPONENT_NAME: string = 'CardHeader';
 
-const CardHeader: FC<CardHeaderProps> & WithWrapperProps = (props: CardHeaderProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-card-header', className);
+/**
+ * The Card Header component is an optional wrapper for the Card header.
+ *
+ * Demos:
+ *
+ * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card)
+ * - [Card (MUI)](https://mui.com/material-ui/react-card/)
+ *
+ * API:
+ *
+ * - [CardHeader API](https://mui.com/material-ui/api/card-header/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the CardHeader component.
+ * @param ref - The ref to be forwarded to the MuiCardHeader component.
+ * @returns The rendered CardHeader component.
+ */
+const CardHeader: OverridableComponent<CardHeaderTypeMap<CardHeaderProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: CardHeaderProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-card-header', className);
 
-  return <MuiCardHeader className={classes} {...rest} />;
-};
+    return <MuiCardHeader ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<CardHeaderTypeMap<CardHeaderProps>> & WithWrapperProps;
 
 CardHeader.displayName = composeComponentDisplayName(COMPONENT_NAME);
 CardHeader.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/CardHeader/index.ts b/packages/react/src/components/CardHeader/index.ts
index f32ca5ce..20566f34 100644
--- a/packages/react/src/components/CardHeader/index.ts
+++ b/packages/react/src/components/CardHeader/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './CardHeader';
-export type {CardHeaderProps} from './CardHeader';
+export * from './CardHeader';
+
+export type {CardHeaderTypeMap, OverridableCardHeader, CardHeaderPropsWithComponent} from '@mui/material/CardHeader';
diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
index 2daa9d08..24432cd9 100644
--- a/packages/react/src/components/Carousel/Carousel.tsx
+++ b/packages/react/src/components/Carousel/Carousel.tsx
@@ -16,25 +16,27 @@
  * under the License.
  */
 
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import {ChevronLeftIcon, ChevronRightIcon} from '@oxygen-ui/react-icons';
 import clsx from 'clsx';
-import {FC, HTMLAttributes, ReactElement, ReactNode, useEffect, useMemo, useState} from 'react';
-import {useIsMobile} from '../../hooks';
+import {forwardRef, useEffect, useMemo, useState} from 'react';
+import type {ElementType, Ref, ReactElement, ReactNode} from 'react';
+import {useIsMobile} from '../../hooks/use-is-mobile';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
+import type {BoxProps, BoxTypeMap} from '../Box';
 import Button from '../Button';
 import Card from '../Card';
 import CardContent from '../CardContent';
-import IconButton from '../IconButton';
-import {IconButtonVariants} from '../IconButton/IconButton';
+import IconButton, {IconButtonVariants} from '../IconButton';
 import ListItem from '../ListItem';
 import ListItemIcon from '../ListItemIcon';
 import ListItemText from '../ListItemText';
 import Stepper from '../Stepper';
 import './carousel.scss';
 
-export interface CarouselStep {
+export type CarouselStep = {
   /**
    * Action to be performed on the step.
    * @example <Button onClick={() => {}}>Action Button</Button>
@@ -55,9 +57,13 @@ export interface CarouselStep {
    * @example <span>title</span>
    */
   title: ReactNode;
-}
+};
 
-export interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export type CarouselProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = BoxTypeMap['defaultComponent'],
+  P = {},
+> = Omit<BoxProps<C, D, P>, 'title'> & {
   /**
    * Specifies whether to auto play the carousel.
    */
@@ -83,123 +89,152 @@ export interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
    * @example <span>title</span>
    */
   title?: ReactNode;
-}
+};
 
 const COMPONENT_NAME: string = 'Carousel';
 
-const Carousel: FC<CarouselProps> & WithWrapperProps = (props: CarouselProps): ReactElement => {
-  const {autoPlay, autoPlayInterval, className, nextButtonText, previousButtonText, steps, title, ...rest} = props;
-  const [currentStep, setCurrentStep] = useState<number>(0);
-
-  const isLastStep: boolean = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]);
-  const isFirstStep: boolean = useMemo(() => currentStep === 0, [currentStep]);
-  const isMobile: boolean = useIsMobile();
+/**
+ * The Carousel component can be used to slide through content.
+ *
+ * Demos:
+ *
+ * - [Carousel(Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/patterns-carousel)
+ *
+ * API:
+ *
+ * - inherits [Box API](https://mui.com/material-ui/api/box/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Carousel component.
+ * @param ref - The ref to be forwarded to the Box component.
+ * @returns The rendered Carousel component.
+ */
+const Carousel: OverridableComponent<BoxTypeMap<CarouselProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {
+      autoPlay = false,
+      autoPlayInterval = 5000,
+      className,
+      nextButtonText = 'Next',
+      previousButtonText = 'Previous',
+      steps,
+      title,
+      ...rest
+    }: CarouselProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const [currentStep, setCurrentStep] = useState<number>(0);
+
+    const isLastStep: boolean = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]);
+    const isFirstStep: boolean = useMemo(() => currentStep === 0, [currentStep]);
+    const isMobile: boolean = useIsMobile();
+
+    const classes: string = clsx('oxygen-carousel', {mobile: isMobile}, className);
+
+    useEffect(() => {
+      if (!autoPlay) {
+        return () => {};
+      }
 
-  const classes: string = clsx('oxygen-carousel', {mobile: isMobile}, className);
+      const interval: NodeJS.Timer = setInterval(() => {
+        if (isLastStep) {
+          setCurrentStep(0);
+        } else {
+          setCurrentStep(currentStep + 1);
+        }
+      }, autoPlayInterval);
 
-  useEffect(() => {
-    if (!autoPlay) {
-      return () => {};
-    }
+      return () => clearInterval(interval);
+    }, [autoPlay, autoPlayInterval, currentStep, isLastStep]);
 
-    const interval: NodeJS.Timer = setInterval(() => {
+    const handleNextButtonClick = (): void => {
       if (isLastStep) {
-        setCurrentStep(0);
-      } else {
-        setCurrentStep(currentStep + 1);
+        return;
       }
-    }, autoPlayInterval);
-
-    return () => clearInterval(interval);
-  }, [autoPlay, autoPlayInterval, currentStep, isLastStep]);
-
-  const handleNextButtonClick = (): void => {
-    if (isLastStep) {
-      return;
-    }
-    setCurrentStep(currentStep + 1);
-  };
-
-  const handlePreviousButtonClick = (): void => {
-    if (isFirstStep) {
-      return;
-    }
-    setCurrentStep(currentStep - 1);
-  };
-
-  const generateCarouselSteps = (): ReactElement[] =>
-    steps?.map((step: CarouselStep) => {
-      const {title: stepTitle, description, illustration, action} = step;
-      return (
-        <Box key={`${stepTitle}-${description}`} className="oxygen-carousel-step">
-          <Card elevation={0} variant="outlined" className="oxygen-carousel-step-card">
-            <ListItem component={CardContent}>
-              {illustration && <ListItemIcon>{illustration}</ListItemIcon>}
-              <ListItemText primary={stepTitle} secondary={description ?? null} />
-            </ListItem>
-          </Card>
-          {action && <Box className="oxygen-carousel-step-button-bar">{action}</Box>}
-        </Box>
-      );
-    });
-
-  return (
-    <Box className={classes} {...rest}>
-      <Box className="oxygen-carousel-top-bar">
-        <Box className="oxygen-carousel-title">{title}</Box>
-        <Box className="oxygen-carousel-mobile-buttons">
-          <IconButton
-            variant={IconButtonVariants.CONTAINED}
-            color="secondary"
-            disabled={isFirstStep}
-            onClick={handlePreviousButtonClick}
-          >
-            <ChevronLeftIcon />
-          </IconButton>
-          <IconButton
-            variant={IconButtonVariants.CONTAINED}
-            color="secondary"
-            disabled={isLastStep}
-            onClick={handleNextButtonClick}
-          >
-            <ChevronRightIcon />
-          </IconButton>
+      setCurrentStep(currentStep + 1);
+    };
+
+    const handlePreviousButtonClick = (): void => {
+      if (isFirstStep) {
+        return;
+      }
+      setCurrentStep(currentStep - 1);
+    };
+
+    const generateCarouselSteps = (): ReactElement[] =>
+      steps?.map((step: CarouselStep) => {
+        const {title: stepTitle, description, illustration, action} = step;
+        return (
+          <Box key={`${stepTitle}-${description}`} className="oxygen-carousel-step">
+            <Card elevation={0} variant="outlined" className="oxygen-carousel-step-card">
+              <ListItem component={CardContent}>
+                {illustration && <ListItemIcon>{illustration}</ListItemIcon>}
+                <ListItemText primary={stepTitle} secondary={description ?? null} />
+              </ListItem>
+            </Card>
+            {action && <Box className="oxygen-carousel-step-button-bar">{action}</Box>}
+          </Box>
+        );
+      });
+
+    return (
+      <Box ref={ref} className={classes} {...rest}>
+        <Box className="oxygen-carousel-top-bar">
+          <Box className="oxygen-carousel-title">{title}</Box>
+          <Box className="oxygen-carousel-mobile-buttons">
+            <IconButton
+              variant={IconButtonVariants.CONTAINED}
+              color="secondary"
+              disabled={isFirstStep}
+              onClick={handlePreviousButtonClick}
+            >
+              <ChevronLeftIcon />
+            </IconButton>
+            <IconButton
+              variant={IconButtonVariants.CONTAINED}
+              color="secondary"
+              disabled={isLastStep}
+              onClick={handleNextButtonClick}
+            >
+              <ChevronRightIcon />
+            </IconButton>
+          </Box>
+          <Box className="oxygen-carousel-button-group">
+            <Button
+              variant="text"
+              color="secondary"
+              disabled={isFirstStep}
+              onClick={handlePreviousButtonClick}
+              startIcon={<ChevronLeftIcon />}
+            >
+              {previousButtonText}
+            </Button>
+            <Button
+              variant="text"
+              color="secondary"
+              disabled={isLastStep}
+              onClick={handleNextButtonClick}
+              endIcon={<ChevronRightIcon />}
+            >
+              {nextButtonText}
+            </Button>
+          </Box>
         </Box>
-        <Box className="oxygen-carousel-button-group">
-          <Button
-            variant="text"
-            color="secondary"
-            disabled={isFirstStep}
-            onClick={handlePreviousButtonClick}
-            startIcon={<ChevronLeftIcon />}
-          >
-            {previousButtonText}
-          </Button>
-          <Button
-            variant="text"
-            color="secondary"
-            disabled={isLastStep}
-            onClick={handleNextButtonClick}
-            endIcon={<ChevronRightIcon />}
-          >
-            {nextButtonText}
-          </Button>
+        <Box>
+          <Stepper animateOnSlide steps={generateCarouselSteps()} currentStep={currentStep} />
         </Box>
       </Box>
-      <Box>
-        <Stepper animateOnSlide steps={generateCarouselSteps()} currentStep={currentStep} />
-      </Box>
-    </Box>
-  );
-};
+    );
+  },
+) as OverridableComponent<BoxTypeMap<CarouselProps>> & WithWrapperProps;
 
 Carousel.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Carousel.muiName = COMPONENT_NAME;
-Carousel.defaultProps = {
-  autoPlay: false,
-  autoPlayInterval: 5000,
-  nextButtonText: 'Next',
-  previousButtonText: 'Previous',
-};
 
 export default Carousel;
diff --git a/packages/react/src/components/Carousel/index.ts b/packages/react/src/components/Carousel/index.ts
index a91d7b31..a9261f98 100644
--- a/packages/react/src/components/Carousel/index.ts
+++ b/packages/react/src/components/Carousel/index.ts
@@ -17,5 +17,4 @@
  */
 
 export {default} from './Carousel';
-export type {CarouselProps} from './Carousel';
-export type {CarouselStep} from './Carousel';
+export * from './Carousel';
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
index e5802409..fa253b38 100644
--- a/packages/react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -16,28 +16,62 @@
  * under the License.
  */
 
-import MuiCheckbox, {CheckboxProps as MuiCheckboxProps} from '@mui/material/Checkbox';
+import type {ButtonBaseTypeMap} from '@mui/material/ButtonBase';
+import MuiCheckbox from '@mui/material/Checkbox';
+import type {CheckboxProps as MuiCheckboxProps} from '@mui/material/Checkbox';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ReactElement, Ref, ElementType} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
-export type CheckboxProps = MuiCheckboxProps;
+export type CheckboxProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiCheckboxProps, 'component'>;
 
 const COMPONENT_NAME: string = 'Checkbox';
 
-const Checkbox: ForwardRefExoticComponent<CheckboxProps> & WithWrapperProps = forwardRef(
-  (props: CheckboxProps, ref: MutableRefObject<HTMLButtonElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * The Checkboxes allow the user to select one or more items from a set.
+ *
+ * Demos:
+ *
+ * - [Checkbox (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-checkbox)
+ * - [Checkbox (MUI)](https://mui.com/material-ui/react-checkbox/)
+ * - [Transfer List (Oxygen UI)](TODO: Add a link after implementing: Tracker: https://github.com/wso2/oxygen-ui/issues/2)
+ * - [Transfer List (MUI)](https://mui.com/material-ui/react-transfer-list/)
+ *
+ * API:
+ *
+ * - [Checkbox API](https://mui.com/material-ui/api/checkbox/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ *
+ * @remarks
+ * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Checkbox component.
+ * @param ref - The ref to be forwarded to the MuiCheckbox component.
+ * @returns The rendered Checkbox component.
+ */
+const Checkbox: OverridableComponent<ButtonBaseTypeMap<CheckboxProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: CheckboxProps<C>,
+    ref: Ref<HTMLButtonElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-checkbox', className);
 
-    return <MuiCheckbox className={classes} {...rest} ref={ref} />;
+    return <MuiCheckbox ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<CheckboxProps> & WithWrapperProps;
+) as OverridableComponent<ButtonBaseTypeMap<CheckboxProps>> & WithWrapperProps;
 
 Checkbox.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Checkbox.muiName = COMPONENT_NAME;
-Checkbox.defaultProps = {};
 
 export default Checkbox;
diff --git a/packages/react/src/components/Checkbox/index.ts b/packages/react/src/components/Checkbox/index.ts
index 005edc36..db23cb91 100644
--- a/packages/react/src/components/Checkbox/index.ts
+++ b/packages/react/src/components/Checkbox/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Checkbox';
-export type {CheckboxProps} from './Checkbox';
+export * from './Checkbox';
+
+export {CheckboxPropsSizeOverrides, CheckboxPropsColorOverrides} from '@mui/material/Checkbox';
diff --git a/packages/react/src/components/Chip/Chip.tsx b/packages/react/src/components/Chip/Chip.tsx
index 358005b6..bb5cc68e 100644
--- a/packages/react/src/components/Chip/Chip.tsx
+++ b/packages/react/src/components/Chip/Chip.tsx
@@ -16,29 +16,60 @@
  * under the License.
  */
 
-import MuiChip, {ChipProps as MuiChipProps} from '@mui/material/Chip';
+import MuiChip from '@mui/material/Chip';
+import type {ChipProps as MuiChipProps, ChipTypeMap} from '@mui/material/Chip';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {ElementType, FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './chip.scss';
 
-export type ChipProps<C extends ElementType = ElementType> = {
+export type ChipProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = ChipTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiChipProps<C>, 'component'>;
+} & Omit<MuiChipProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Chip';
 
-const Chip: FC<ChipProps> & WithWrapperProps = <C extends ElementType>(props: ChipProps<C>): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-chip', className);
+/**
+ * The Chips are compact elements that represent an input, attribute, or action.
+ *
+ * Demos:
+ *
+ * - [Chip (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-chip)
+ * - [Chip (MUI)](https://mui.com/material-ui/react-chip/)
+ *
+ * API:
+ *
+ * - [Chip API](https://mui.com/material-ui/api/chip/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Chip component.
+ * @param ref - The ref to be forwarded to the MuiChip component.
+ * @returns The rendered Chip component.
+ */
+const Chip: OverridableComponent<ChipTypeMap<ChipProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>({className, ...rest}: ChipProps<C>, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-chip', className);
 
-  return <MuiChip className={classes} {...rest} />;
-};
+    return <MuiChip ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<ChipTypeMap<ChipProps>> & WithWrapperProps;
 
 Chip.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Chip.muiName = COMPONENT_NAME;
-Chip.defaultProps = {};
 
 export default Chip;
diff --git a/packages/react/src/components/Chip/index.ts b/packages/react/src/components/Chip/index.ts
index f799b576..ad4f8257 100644
--- a/packages/react/src/components/Chip/index.ts
+++ b/packages/react/src/components/Chip/index.ts
@@ -17,4 +17,11 @@
  */
 
 export {default} from './Chip';
-export type {ChipProps} from './Chip';
+export * from './Chip';
+
+export type {
+  ChipPropsVariantOverrides,
+  ChipPropsSizeOverrides,
+  ChipPropsColorOverrides,
+  ChipTypeMap,
+} from '@mui/material/Chip';
diff --git a/packages/react/src/components/CircularProgress/CircularProgress.tsx b/packages/react/src/components/CircularProgress/CircularProgress.tsx
index b139da8b..06587b63 100644
--- a/packages/react/src/components/CircularProgress/CircularProgress.tsx
+++ b/packages/react/src/components/CircularProgress/CircularProgress.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiCircularProgress, {CircularProgressProps as MuiCircularProgressProps} from '@mui/material/CircularProgress';
+import MuiCircularProgress from '@mui/material/CircularProgress';
+import type {CircularProgressProps as MuiCircularProgressProps} from '@mui/material/CircularProgress';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './circular-progress.scss';
@@ -27,16 +29,38 @@ export type CircularProgressProps = MuiCircularProgressProps;
 
 const COMPONENT_NAME: string = 'CircularProgress';
 
-const CircularProgress: FC<CircularProgressProps> & WithWrapperProps = (props: CircularProgressProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-circular-progress', className);
+/**
+ * The Circular Progress indicators commonly known as spinners, express an unspecified wait
+ * time or display the length of a process.
+ *
+ * Demos:
+ *
+ * TODO: Merge two progress components into one.
+ * - [Progress (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-circular-progress)
+ * - [Progress (MUI)](https://mui.com/material-ui/react-progress/)
+ *
+ * API:
+ *
+ * - [CircularProgress API](https://mui.com/material-ui/api/circular-progress/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the CircularProgress component.
+ * @param ref - The ref to be forwarded to the MuiCircularProgress component.
+ * @returns The rendered CircularProgress component.
+ */
+const CircularProgress: ForwardRefExoticComponent<CircularProgressProps> & WithWrapperProps = forwardRef(
+  ({className, ...rest}: CircularProgressProps, ref: Ref<HTMLSpanElement>): ReactElement => {
+    const classes: string = clsx('oxygen-circular-progress', className);
 
-  return <MuiCircularProgress aria-label="progress" className={classes} {...rest} />;
-};
+    return <MuiCircularProgress ref={ref} aria-label="progress" className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<CircularProgressProps> & WithWrapperProps;
 
 CircularProgress.displayName = composeComponentDisplayName(COMPONENT_NAME);
 CircularProgress.muiName = COMPONENT_NAME;
-CircularProgress.defaultProps = {};
 
 export default CircularProgress;
diff --git a/packages/react/src/components/CircularProgress/index.ts b/packages/react/src/components/CircularProgress/index.ts
index addbec06..bb9b77b2 100644
--- a/packages/react/src/components/CircularProgress/index.ts
+++ b/packages/react/src/components/CircularProgress/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './CircularProgress';
-export type {CircularProgressProps} from './CircularProgress';
+export * from './CircularProgress';
+
+export {CircularProgressPropsColorOverrides} from '@mui/material/CircularProgress';
diff --git a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx
index e570ce4c..ac4de3f6 100644
--- a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx
+++ b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx
@@ -16,16 +16,21 @@
  * under the License.
  */
 
-import {Badge, BadgeProps, CircularProgress, CircularProgressProps} from '@mui/material';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
-import Avatar, {AvatarProps} from '../Avatar';
+import Avatar from '../Avatar';
+import type {AvatarProps} from '../Avatar';
+import type {BadgeProps} from '../Badge';
+import Badge from '../Badge';
 import Box from '../Box';
+import type {CircularProgressProps} from '../CircularProgress';
+import CircularProgress from '../CircularProgress';
 import './circular-progress-avatar.scss';
 
-export interface CircularProgressAvatarProps extends Omit<CircularProgressProps, 'value'> {
+export type CircularProgressAvatarProps = Omit<CircularProgressProps, 'value'> & {
   /**
    * Props sent to the Avatar component.
    */
@@ -38,52 +43,74 @@ export interface CircularProgressAvatarProps extends Omit<CircularProgressProps,
    * Value prop sent to CircularProgress component.
    */
   progress?: number;
-}
+};
 
 const COMPONENT_NAME: string = 'CircularProgressAvatar';
 
-const CircularProgressAvatar: FC<CircularProgressAvatarProps> & WithWrapperProps = (
-  props: CircularProgressAvatarProps,
-): ReactElement => {
-  const {className, progress, badgeOptions, avatarOptions, ...rest} = props;
-
-  const classes: string = clsx('oxygen-circular-progress-avatar', className);
+/**
+ * The Circular Progress Avatar is a Avatar variant with a circular progress and a badge.
+ *
+ * Demos:
+ *
+ * // TODO: Move this demo to the Progress demo.
+ * - [Circular Progress Avatar (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-circular-progress-avatar)
+ *
+ * API:
+ *
+ * - [CircularProgress API](https://mui.com/material-ui/api/circular-progress/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the CircularProgressAvatar component.
+ * @param ref - The ref to be forwarded to the Box component.
+ * @returns The rendered CircularProgressAvatar component.
+ */
+const CircularProgressAvatar: ForwardRefExoticComponent<CircularProgressAvatarProps> & WithWrapperProps = forwardRef(
+  (
+    {className, progress, badgeOptions, avatarOptions, ...rest}: CircularProgressAvatarProps,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-circular-progress-avatar', className);
 
-  return (
-    <Box className={classes} role="presentation">
-      <Badge
-        className="oxygen-badge"
-        overlap="circular"
-        anchorOrigin={{
-          horizontal: 'left',
-          vertical: 'bottom',
-        }}
-        {...badgeOptions}
-      >
-        <Avatar {...avatarOptions} />
-        <CircularProgress
-          aria-label="progress"
-          size={90}
-          className="oxygen-circular-progress"
-          variant="determinate"
-          value={progress}
-          {...rest}
-        />
-        <CircularProgress
-          aria-label="progress"
-          size={90}
-          className="oxygen-circular-progress frame"
-          variant="determinate"
-          value={100}
-          {...rest}
-        />
-      </Badge>
-    </Box>
-  );
-};
+    return (
+      <Box ref={ref} className={classes} role="presentation">
+        <Badge
+          className="oxygen-badge"
+          overlap="circular"
+          anchorOrigin={{
+            horizontal: 'left',
+            vertical: 'bottom',
+          }}
+          {...badgeOptions}
+        >
+          <Avatar {...avatarOptions} />
+          <CircularProgress
+            aria-label="progress"
+            size={90}
+            className="oxygen-circular-progress"
+            variant="determinate"
+            value={progress}
+            {...rest}
+          />
+          <CircularProgress
+            aria-label="progress"
+            size={90}
+            className="oxygen-circular-progress frame"
+            variant="determinate"
+            value={100}
+            {...rest}
+          />
+        </Badge>
+      </Box>
+    );
+  },
+) as ForwardRefExoticComponent<CircularProgressAvatarProps> & WithWrapperProps;
 
 CircularProgressAvatar.displayName = composeComponentDisplayName(COMPONENT_NAME);
 CircularProgressAvatar.muiName = COMPONENT_NAME;
-CircularProgressAvatar.defaultProps = {};
 
 export default CircularProgressAvatar;
diff --git a/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap b/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap
index 2719003a..8abcbc5b 100644
--- a/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap
+++ b/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`CircularProgressAvatar should match the snapshot 1`] = `
       role="presentation"
     >
       <span
-        class="MuiBadge-root oxygen-badge css-1c32n2y-MuiBadge-root"
+        class="MuiBadge-root oxygen-badge oxygen-badge css-1c32n2y-MuiBadge-root"
       >
         <div
           class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault oxygen-avatar css-woe6xp-MuiAvatar-root"
@@ -28,7 +28,7 @@ exports[`CircularProgressAvatar should match the snapshot 1`] = `
         <span
           aria-label="progress"
           aria-valuenow="0"
-          class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary oxygen-circular-progress css-iq1hel-MuiCircularProgress-root"
+          class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary oxygen-circular-progress oxygen-circular-progress css-iq1hel-MuiCircularProgress-root"
           role="progressbar"
           style="width: 90px; height: 90px; transform: rotate(-90deg);"
         >
@@ -50,7 +50,7 @@ exports[`CircularProgressAvatar should match the snapshot 1`] = `
         <span
           aria-label="progress"
           aria-valuenow="100"
-          class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary oxygen-circular-progress frame css-iq1hel-MuiCircularProgress-root"
+          class="MuiCircularProgress-root MuiCircularProgress-determinate MuiCircularProgress-colorPrimary oxygen-circular-progress oxygen-circular-progress frame css-iq1hel-MuiCircularProgress-root"
           role="progressbar"
           style="width: 90px; height: 90px; transform: rotate(-90deg);"
         >
diff --git a/packages/react/src/components/CircularProgressAvatar/index.ts b/packages/react/src/components/CircularProgressAvatar/index.ts
index 1be26dc8..8662fab9 100644
--- a/packages/react/src/components/CircularProgressAvatar/index.ts
+++ b/packages/react/src/components/CircularProgressAvatar/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './CircularProgressAvatar';
-export type {CircularProgressAvatarProps} from './CircularProgressAvatar';
+export * from './CircularProgressAvatar';
diff --git a/packages/react/src/components/Code/Code.tsx b/packages/react/src/components/Code/Code.tsx
index f181b398..b66f57f6 100644
--- a/packages/react/src/components/Code/Code.tsx
+++ b/packages/react/src/components/Code/Code.tsx
@@ -16,18 +16,17 @@
  * under the License.
  */
 
-import MuiTypography, {TypographyProps as MuiTypographyProps} from '@mui/material/Typography';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {ElementType, FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
+import type {TypographyTypeMap} from '../Typography';
+import Typography, {TypographyProps} from '../Typography/Typography';
 import './code.scss';
 
-export type CodeProps<C extends ElementType = ElementType> = {
-  /**
-   * The component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C;
+export type CodeProps<C extends ElementType = ElementType> = TypographyProps<C> & {
   /**
    * Shows the code block with a filled background.
    * @default true
@@ -38,27 +37,48 @@ export type CodeProps<C extends ElementType = ElementType> = {
    * @default false
    */
   outlined?: boolean;
-} & Omit<MuiTypographyProps<C>, 'component'>;
+};
 
 const COMPONENT_NAME: string = 'Code';
 
-const Code: FC<CodeProps> & WithWrapperProps = <C extends ElementType>(props: CodeProps<C>): ReactElement => {
-  const {className, children, filled, outlined, ...rest} = props;
-
-  const classes: string = clsx('oxygen-code', {filled, outlined}, className);
+/**
+ * The Code can represent an inline or block code without syntax highlight.
+ *
+ * Demos:
+ *
+ * - [Code (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-code)
+ *
+ * API:
+ *
+ * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Code component.
+ * @param ref - The ref to be forwarded to the Typography component.
+ * @returns The rendered Code component.
+ */
+const Code: OverridableComponent<TypographyTypeMap<CodeProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, children, filled = true, outlined = false, ...rest}: CodeProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-code', {filled, outlined}, className);
 
-  return (
-    <MuiTypography component="code" className={classes} {...rest}>
-      {children}
-    </MuiTypography>
-  );
-};
+    return (
+      <Typography ref={ref} component="code" className={classes} {...rest}>
+        {children}
+      </Typography>
+    );
+  },
+) as OverridableComponent<TypographyTypeMap<CodeProps>> & WithWrapperProps;
 
 Code.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Code.muiName = COMPONENT_NAME;
-Code.defaultProps = {
-  filled: true,
-  outlined: false,
-};
 
 export default Code;
diff --git a/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap b/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap
index 9419cce4..1cedb9b6 100644
--- a/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap
+++ b/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Code should match the snapshot 1`] = `
 <body>
   <div>
     <code
-      class="MuiTypography-root MuiTypography-body1 oxygen-code filled css-1qp7oek-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 oxygen-typography oxygen-code filled css-1qp7oek-MuiTypography-root"
     >
       Code Block
     </code>
diff --git a/packages/react/src/components/Code/index.ts b/packages/react/src/components/Code/index.ts
index 477314ff..dbeac608 100644
--- a/packages/react/src/components/Code/index.ts
+++ b/packages/react/src/components/Code/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './Code';
-export type {CodeProps} from './Code';
+export * from './Code';
diff --git a/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx b/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx
index 370af69d..c6067fd2 100644
--- a/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx
+++ b/packages/react/src/components/CollapsibleNavbarItem/CollapsibleNavbarItem.tsx
@@ -17,40 +17,80 @@
  */
 
 import MuiCollapse from '@mui/material/Collapse';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import {ChevronDownIcon, ChevronUpIcon} from '@oxygen-ui/react-icons';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement, useState} from 'react';
+import {forwardRef, useState} from 'react';
+import type {ElementType, Ref, MouseEvent, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import Chip from '../Chip';
 import List from '../List';
 import ListItemButton from '../ListItemButton';
+import type {ListItemButtonTypeMap} from '../ListItemButton';
 import ListItemIcon from '../ListItemIcon';
 import ListItemText from '../ListItemText';
-import type {NavbarProps} from '../Navbar/Navbar';
+import type {NavbarProps} from '../Navbar';
 import type {NavbarItemProps} from '../NavbarItem';
 import Tooltip from '../Tooltip';
 import './collapsible-navbar-item.scss';
 
-export interface CollapsibleNavbarItemProps extends NavbarItemProps, Pick<NavbarProps, 'fill' | 'open'> {
-  /**
-   * Is the item expanded.
-   */
-  expanded?: boolean;
-  /**
-   * Set of sub items.
-   */
-  items: NavbarItemProps[];
-}
+export type CollapsibleNavbarItemProps<C extends ElementType = ElementType> = NavbarItemProps<C> &
+  Pick<NavbarProps, 'fill' | 'open'> & {
+    /**
+     * Is the item expanded.
+     */
+    expanded?: boolean;
+    /**
+     * Set of sub items.
+     */
+    items: NavbarItemProps[];
+  };
 
 const COMPONENT_NAME: string = 'CollapsibleNavbarItem';
 
-const CollapsibleNavbarItem: ForwardRefExoticComponent<CollapsibleNavbarItemProps> & WithWrapperProps = forwardRef(
-  (props: CollapsibleNavbarItemProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, component, expanded, fill, icon, id, open, label, onClick, items, tag, tagClassName, ...rest} =
-      props;
-
+/**
+ * The Collapsible Navbar Item is a custom component that is used to render a collapsible item in the Navbar.
+ *
+ * Demos:
+ *
+ * - [Collapsible Navbar Item (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-collapsible-navbar-item)
+ *
+ * API:
+ *
+ * - inherits [ListItemButton API](https://mui.com/material-ui/api/list-item-button/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the CollapsibleNavbarItem component.
+ * @param ref - The ref to be forwarded to the Box component.
+ * @returns The rendered CollapsibleNavbarItem component.
+ */
+const CollapsibleNavbarItem: OverridableComponent<ListItemButtonTypeMap<CollapsibleNavbarItemProps>> &
+  WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {
+      className,
+      expanded,
+      fill,
+      icon,
+      id,
+      open = true,
+      label,
+      onClick,
+      items,
+      tag,
+      tagClassName,
+      ...rest
+    }: CollapsibleNavbarItemProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx(
       'oxygen-collapsible-navbar-item',
       {
@@ -63,10 +103,11 @@ const CollapsibleNavbarItem: ForwardRefExoticComponent<CollapsibleNavbarItemProp
 
     const [itemExpanded, setItemExpanded] = useState<boolean>(expanded || false);
 
-    const handleItemClick = (): void => {
+    const handleItemClick = (e: MouseEvent<HTMLDivElement>): void => {
       if (onClick) {
-        onClick();
+        onClick(e);
       }
+
       setItemExpanded((prevState: boolean) => !prevState);
     };
 
@@ -75,7 +116,7 @@ const CollapsibleNavbarItem: ForwardRefExoticComponent<CollapsibleNavbarItemProp
     const renderChevron = (): ReactElement => (itemExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />);
 
     return (
-      <Box component={component} className={clsx(classes, {expanded: itemExpanded})} ref={ref}>
+      <Box ref={ref} className={clsx(classes, {expanded: itemExpanded})}>
         <Tooltip placement="right" title={!open && label}>
           <ListItemButton
             selected={getIsItemSelected}
@@ -126,12 +167,9 @@ const CollapsibleNavbarItem: ForwardRefExoticComponent<CollapsibleNavbarItemProp
       </Box>
     );
   },
-) as ForwardRefExoticComponent<CollapsibleNavbarItemProps> & WithWrapperProps;
+) as OverridableComponent<ListItemButtonTypeMap<CollapsibleNavbarItemProps>> & WithWrapperProps;
 
 CollapsibleNavbarItem.displayName = composeComponentDisplayName(COMPONENT_NAME);
 CollapsibleNavbarItem.muiName = COMPONENT_NAME;
-CollapsibleNavbarItem.defaultProps = {
-  open: true,
-};
 
 export default CollapsibleNavbarItem;
diff --git a/packages/react/src/components/CollapsibleNavbarItem/index.tsx b/packages/react/src/components/CollapsibleNavbarItem/index.tsx
index 248f4086..7b1be20c 100644
--- a/packages/react/src/components/CollapsibleNavbarItem/index.tsx
+++ b/packages/react/src/components/CollapsibleNavbarItem/index.tsx
@@ -17,4 +17,4 @@
  */
 
 export {default} from './CollapsibleNavbarItem';
-export type {CollapsibleNavbarItemProps} from './CollapsibleNavbarItem';
+export * from './CollapsibleNavbarItem';
diff --git a/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx b/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx
index 837e3ca4..fbe456c4 100644
--- a/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx
+++ b/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx
@@ -16,15 +16,27 @@
  * under the License.
  */
 
-import IconButton, {IconButtonProps} from '@mui/material/IconButton';
+import IconButton from '@mui/material/IconButton';
+import type {IconButtonProps, IconButtonTypeMap} from '@mui/material/IconButton';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import {useColorScheme} from '@mui/material/styles';
 import clsx from 'clsx';
-import {FC, PropsWithChildren, ReactElement, SVGProps} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, PropsWithChildren, ReactElement, SVGProps} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './color-mode-toggle.scss';
 
-export type ColorModeToggleProps = IconButtonProps;
+export type ColorModeToggleProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = IconButtonTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<IconButtonProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'ColorModeToggle';
 
@@ -66,30 +78,55 @@ const CrescentIcon = (props: PropsWithChildren<SVGProps<SVGSVGElement>>): ReactE
   </svg>
 );
 
-const ColorModeToggle: FC<ColorModeToggleProps> & WithWrapperProps = (props: ColorModeToggleProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const {mode, setMode} = useColorScheme();
+/**
+ * The Toggle to switch between the two palette modes: light (the default) and dark.
+ *
+ * Demos:
+ *
+ * - [Color Mode Toggle (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/theme-color-mode-toggle--overview)
+ *
+ * API:
+ *
+ * - [IconButton API](https://mui.com/material-ui/api/icon-button/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the ColorModeToggle component.
+ * @param ref - The ref to be forwarded to the IconButton component.
+ * @returns The rendered ColorModeToggle component.
+ */
+const ColorModeToggle: OverridableComponent<IconButtonTypeMap<IconButtonProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: ColorModeToggleProps<C>,
+    ref: Ref<HTMLButtonElement>,
+  ): ReactElement => {
+    const {mode, setMode} = useColorScheme();
 
-  const classes: string = clsx('oxygen-color-mode-toggle', className);
+    const classes: string = clsx('oxygen-color-mode-toggle', className);
 
-  return (
-    <IconButton
-      sx={{ml: 1}}
-      onClick={(): void => {
-        setMode(mode === 'light' ? 'dark' : 'light');
-      }}
-      color="inherit"
-      className={classes}
-      {...rest}
-    >
-      {mode === 'light' ? <BrightnessIcon /> : <CrescentIcon />}
-    </IconButton>
-  );
-};
+    return (
+      <IconButton
+        ref={ref}
+        sx={{ml: 1}}
+        onClick={(): void => {
+          setMode(mode === 'light' ? 'dark' : 'light');
+        }}
+        color="inherit"
+        className={classes}
+        {...rest}
+      >
+        {mode === 'light' ? <BrightnessIcon /> : <CrescentIcon />}
+      </IconButton>
+    );
+  },
+) as OverridableComponent<IconButtonTypeMap<IconButtonProps>> & WithWrapperProps;
 
 ColorModeToggle.displayName = composeComponentDisplayName(COMPONENT_NAME);
 ColorModeToggle.muiName = COMPONENT_NAME;
-ColorModeToggle.defaultProps = {};
 
 export default ColorModeToggle;
diff --git a/packages/react/src/components/ColorModeToggle/index.ts b/packages/react/src/components/ColorModeToggle/index.ts
index a048e05b..5ff1db43 100644
--- a/packages/react/src/components/ColorModeToggle/index.ts
+++ b/packages/react/src/components/ColorModeToggle/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './ColorModeToggle';
-export type {ColorModeToggleProps} from './ColorModeToggle';
+export * from './ColorModeToggle';
diff --git a/packages/react/src/components/Container/Container.tsx b/packages/react/src/components/Container/Container.tsx
index f42544a7..b68b4cb4 100644
--- a/packages/react/src/components/Container/Container.tsx
+++ b/packages/react/src/components/Container/Container.tsx
@@ -16,31 +16,63 @@
  * under the License.
  */
 
-import MuiContainer, {ContainerProps as MuiContainerProps} from '@mui/material/Container';
+import MuiContainer from '@mui/material/Container';
+import type {ContainerProps as MuiContainerProps, ContainerTypeMap} from '@mui/material/Container';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {ElementType, FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './container.scss';
 
-export type ContainerProps<C extends ElementType = ElementType> = {
+export type ContainerProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = ContainerTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiContainerProps<C>, 'component'>;
+} & Omit<MuiContainerProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Container';
 
-const Container: FC<ContainerProps> & WithWrapperProps = <C extends ElementType>(
-  props: ContainerProps<C>,
-): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-container', className);
+/**
+ * The container centers your content horizontally. It's the most basic layout element.
+ *
+ * Demos:
+ *
+ * - [Container (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/layout-container)
+ * - [Container (MUI)](https://mui.com/material-ui/react-container/)
+ *
+ * API:
+ *
+ * - [Container API](https://mui.com/material-ui/api/container/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Container component.
+ * @param ref - The ref to be forwarded to the MuiContainer component.
+ * @returns The rendered Container component.
+ */
+const Container: OverridableComponent<ContainerTypeMap<ContainerProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: ContainerProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-container', className);
 
-  return <MuiContainer className={classes} {...rest} />;
-};
+    return <MuiContainer ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<ContainerTypeMap<ContainerProps>> & WithWrapperProps;
 
 Container.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Container.muiName = COMPONENT_NAME;
-Container.defaultProps = {};
 
 export default Container;
diff --git a/packages/react/src/components/Container/index.ts b/packages/react/src/components/Container/index.ts
index e65a0906..6016c087 100644
--- a/packages/react/src/components/Container/index.ts
+++ b/packages/react/src/components/Container/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Container';
-export type {ContainerProps} from './Container';
+export * from './Container';
+
+export {ContainerTypeMap} from '@mui/material/Container';
diff --git a/packages/react/src/components/CountryFlag/CountryFlag.tsx b/packages/react/src/components/CountryFlag/CountryFlag.tsx
index 91e4e356..757ce45e 100644
--- a/packages/react/src/components/CountryFlag/CountryFlag.tsx
+++ b/packages/react/src/components/CountryFlag/CountryFlag.tsx
@@ -16,13 +16,14 @@
  * under the License.
  */
 
-import {Typography} from '@mui/material';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, HTMLAttributes, Ref, ReactElement} from 'react';
 import WorldFlag from 'react-world-flags';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
+import Typography from '../Typography';
 
-export interface CountryFlagsProps extends React.HTMLAttributes<HTMLElement & SVGElement> {
+export type CountryFlagProps = {
   /**
    * The two-letter/three-letter/three-digit country code of the flag.
    */
@@ -31,20 +32,45 @@ export interface CountryFlagsProps extends React.HTMLAttributes<HTMLElement & SV
    * The height of the flag.
    */
   height?: string;
-}
+} & HTMLAttributes<HTMLImageElement>;
 
-const COMPONENT_NAME: string = 'Flag';
+/**
+ * @deprecated Use the {@link CountryFlagProps} instead.
+ */
+export type CountryFlagsProps = CountryFlagProps;
 
-const CountryFlag: FC<CountryFlagsProps> & WithWrapperProps = (props: CountryFlagsProps): ReactElement => {
-  const {countryCode, height, ...rest} = props;
+const COMPONENT_NAME: string = 'CountryFlag';
 
-  return <WorldFlag code={countryCode} height={height} fallback={<Typography>{countryCode}</Typography>} {...rest} />;
-};
+/**
+ * The Toggle to switch between the two palette modes: light (the default) and dark.
+ *
+ * Demos:
+ *
+ * - [Country Flag (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/icons-country-flags)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the CountryFlag component.
+ * @param ref - The ref to be forwarded to the WorldFlag component.
+ * @returns The rendered CountryFlag component.
+ */
+const CountryFlag: ForwardRefExoticComponent<CountryFlagProps> & WithWrapperProps = forwardRef(
+  ({countryCode, height = '16', ...rest}: CountryFlagProps, ref: Ref<HTMLImageElement>): ReactElement => (
+    <WorldFlag
+      ref={ref}
+      code={countryCode}
+      height={height}
+      fallback={<Typography>{countryCode}</Typography>}
+      {...rest}
+    />
+  ),
+) as ForwardRefExoticComponent<CountryFlagProps> & WithWrapperProps;
 
 CountryFlag.displayName = composeComponentDisplayName(COMPONENT_NAME);
 CountryFlag.muiName = COMPONENT_NAME;
-CountryFlag.defaultProps = {
-  height: '16',
-};
 
 export default CountryFlag;
diff --git a/packages/react/src/components/CountryFlag/index.ts b/packages/react/src/components/CountryFlag/index.ts
index f9f59eba..1362398e 100644
--- a/packages/react/src/components/CountryFlag/index.ts
+++ b/packages/react/src/components/CountryFlag/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './CountryFlag';
-export type {CountryFlagsProps} from './CountryFlag';
+export * from './CountryFlag';
diff --git a/packages/react/src/components/DataGrid/DataGrid.tsx b/packages/react/src/components/DataGrid/DataGrid.tsx
index b4b59b1c..38f37391 100644
--- a/packages/react/src/components/DataGrid/DataGrid.tsx
+++ b/packages/react/src/components/DataGrid/DataGrid.tsx
@@ -16,27 +16,51 @@
  * under the License.
  */
 
-import {DataGrid as MuiDataGrid, DataGridProps as MuiDataGridProps} from '@mui/x-data-grid';
+import {DataGrid as MuiXDataGrid} from '@mui/x-data-grid';
+import type {GridValidRowModel as MuiXGridValidRowModel, DataGridProps as MuiXDataGridProps} from '@mui/x-data-grid';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './data-grid.scss';
 
-export type DataGridProps = MuiDataGridProps;
+export type DataGridProps<R extends MuiXGridValidRowModel = any> = MuiXDataGridProps<R>;
 
 const COMPONENT_NAME: string = 'DataGrid';
 
-const DataGrid: FC<DataGridProps> & WithWrapperProps = (props: DataGridProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-data-grid', className);
+/**
+ * The Data Grid component is built with React and TypeScript to provide a smooth UX for manipulating
+ * an unlimited set of data. It features an intuitive API for real-time updates as well as theming
+ * and custom templates—all with blazing-fast performance.
+ *
+ * Demos:
+ *
+ * - [Data Grid (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-datagrid)
+ * - [Data Grid (MUI X)](https://mui.com/x/react-data-grid/)
+ *
+ * API:
+ *
+ * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the DataGrid component.
+ * @param ref - The ref to be forwarded to the MuiDataGrid component.
+ * @returns The rendered DataGrid component.
+ */
+const DataGrid: ForwardRefExoticComponent<DataGridProps> & WithWrapperProps = forwardRef(
+  ({className, ...rest}: DataGridProps, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-data-grid', className);
 
-  return <MuiDataGrid className={classes} {...rest} />;
-};
+    return <MuiXDataGrid ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<DataGridProps> & WithWrapperProps;
 
 DataGrid.displayName = composeComponentDisplayName(COMPONENT_NAME);
 DataGrid.muiName = COMPONENT_NAME;
-DataGrid.defaultProps = {};
 
 export default DataGrid;
diff --git a/packages/react/src/components/DataGrid/index.ts b/packages/react/src/components/DataGrid/index.ts
index 0580fc48..6af665e3 100644
--- a/packages/react/src/components/DataGrid/index.ts
+++ b/packages/react/src/components/DataGrid/index.ts
@@ -17,4 +17,31 @@
  */
 
 export {default} from './DataGrid';
-export type {DataGridProps} from './DataGrid';
+export * from './DataGrid';
+
+export * from '@mui/x-data-grid/components';
+export * from '@mui/x-data-grid/constants';
+export * from '@mui/x-data-grid/hooks';
+export * from '@mui/x-data-grid/locales';
+export * from '@mui/x-data-grid/models';
+export * from '@mui/x-data-grid/context';
+export * from '@mui/x-data-grid/colDef';
+export * from '@mui/x-data-grid/utils';
+export {
+  useGridRootProps,
+  useGridApiRef,
+  useGridApiContext,
+  GridColumnHeaders,
+  GridColumnMenu,
+  GRID_COLUMN_MENU_SLOTS,
+  GRID_COLUMN_MENU_SLOT_PROPS,
+} from '@mui/x-data-grid';
+export type {
+  GridApi,
+  GridState,
+  GridInitialState,
+  GridExportFormat,
+  GridExportExtension,
+  GridToolbarExportProps,
+  GridExperimentalFeatures,
+} from '@mui/x-data-grid';
diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx
index 54019e4e..3f68f0fb 100644
--- a/packages/react/src/components/Divider/Divider.tsx
+++ b/packages/react/src/components/Divider/Divider.tsx
@@ -16,27 +16,65 @@
  * under the License.
  */
 
-import MuiDivider, {DividerProps as MuiDividerProps} from '@mui/material/Divider';
+import MuiDivider from '@mui/material/Divider';
+import type {DividerProps as MuiDividerProps, DividerTypeMap as MuiDividerTypeMap} from '@mui/material/Divider';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './divider.scss';
 
-export type DividerProps = MuiDividerProps;
+export type DividerProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = MuiDividerTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiDividerProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Divider';
 
-const Divider: FC<DividerProps> & WithWrapperProps = (props: DividerProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-divider', className);
+/**
+ * The Divider provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy.
+ *
+ * Demos:
+ *
+ * - [Divider (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-divider)
+ * - [Divider (MUI)](https://mui.com/material-ui/react-divider/)
+ * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list)
+ * - [Lists (MUI)](https://mui.com/material-ui/react-list/)
+ *
+ * API:
+ *
+ * - [Divider API](https://mui.com/material-ui/api/divider/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Divider component.
+ * @param ref - The ref to be forwarded to the MuiDivider component.
+ * @returns The rendered Divider component.
+ */
+const Divider: OverridableComponent<MuiDividerTypeMap<DividerProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: DividerProps<C>,
+    ref: Ref<HTMLHRElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-divider', className);
 
-  return <MuiDivider className={classes} {...rest} />;
-};
+    return <MuiDivider ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<MuiDividerTypeMap<DividerProps>> & WithWrapperProps;
 
 Divider.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Divider.muiName = COMPONENT_NAME;
-Divider.defaultProps = {};
 
 export default Divider;
diff --git a/packages/react/src/components/Divider/index.ts b/packages/react/src/components/Divider/index.ts
index 29f4138e..480521cb 100644
--- a/packages/react/src/components/Divider/index.ts
+++ b/packages/react/src/components/Divider/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Divider';
-export type {DividerProps} from './Divider';
+export * from './Divider';
+
+export type {DividerPropsVariantOverrides, DividerTypeMap} from '@mui/material/Divider';
diff --git a/packages/react/src/components/Drawer/Drawer.tsx b/packages/react/src/components/Drawer/Drawer.tsx
index d31c5c86..2b6e4987 100644
--- a/packages/react/src/components/Drawer/Drawer.tsx
+++ b/packages/react/src/components/Drawer/Drawer.tsx
@@ -16,27 +16,59 @@
  * under the License.
  */
 
-import MuiDrawer, {DrawerProps as MuiDrawerProps} from '@mui/material/Drawer';
+import MuiDrawer from '@mui/material/Drawer';
+import type {DrawerProps as MuiDrawerProps} from '@mui/material/Drawer';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement, ForwardRefExoticComponent} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './drawer.scss';
 
-export type DrawerProps = MuiDrawerProps;
+export type DrawerProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiDrawerProps, 'component'>;
 
 const COMPONENT_NAME: string = 'Drawer';
 
-const Drawer: FC<DrawerProps> & WithWrapperProps = (props: DrawerProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-drawer', className);
+/**
+ * The navigation drawers (or "sidebars") provide ergonomic access to destinations in a site or
+ * app functionality such as switching accounts.
+ *
+ * Demos:
+ *
+ * - [Drawer (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-drawer)
+ * - [Drawer (MUI)](https://mui.com/material-ui/react-drawer/)
+ *
+ * API:
+ *
+ * - [Drawer API](https://mui.com/material-ui/api/drawer/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - FIXME: ⚠️ `component` prop is temporarily not supported due to https://github.com/wso2/oxygen-ui/issues/283
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Drawer component.
+ * @param ref - The ref to be forwarded to the MuiDrawer component.
+ * @returns The rendered Drawer component.
+ */
+const Drawer: ForwardRefExoticComponent<DrawerProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: DrawerProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-drawer', className);
 
-  return <MuiDrawer className={classes} {...rest} />;
-};
+    return <MuiDrawer ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<DrawerProps> & WithWrapperProps;
 
 Drawer.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Drawer.muiName = COMPONENT_NAME;
-Drawer.defaultProps = {};
 
 export default Drawer;
diff --git a/packages/react/src/components/Drawer/index.ts b/packages/react/src/components/Drawer/index.ts
index 41d950f9..11d00665 100644
--- a/packages/react/src/components/Drawer/index.ts
+++ b/packages/react/src/components/Drawer/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './Drawer';
-export type {DrawerProps} from './Drawer';
+export * from './Drawer';
diff --git a/packages/react/src/components/Fab/Fab.tsx b/packages/react/src/components/Fab/Fab.tsx
index 3c1d7780..10afc1a6 100644
--- a/packages/react/src/components/Fab/Fab.tsx
+++ b/packages/react/src/components/Fab/Fab.tsx
@@ -16,30 +16,63 @@
  * under the License.
  */
 
-import MuiFab, {FabProps as MuiFabProps} from '@mui/material/Fab';
+import MuiFab from '@mui/material/Fab';
+import type {FabProps as MuiFabProps, FabTypeMap} from '@mui/material/Fab';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react';
+import {forwardRef} from 'react';
+import type {ReactElement, Ref, ElementType} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
-export type FabProps<C extends ElementType = ElementType> = {
+export type FabProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = FabTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiFabProps<C>, 'component'>;
+} & Omit<MuiFabProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Fab';
 
-const Fab: ForwardRefExoticComponent<FabProps> & WithWrapperProps = forwardRef(
-  <C extends ElementType>(props: FabProps<C>, ref: MutableRefObject<HTMLButtonElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * A Floating Action Button (FAB) performs the primary, or most common, action on a screen.
+ *
+ * Demos:
+ *
+ * - [Floating Action Button (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-fab)
+ * - [Floating Action Button (MUI)](https://mui.com/material-ui/react-floating-action-button/)
+ *
+ * API:
+ *
+ * - [Fab API](https://mui.com/material-ui/api/fab/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ *
+ * @remarks
+ * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Fab component.
+ * @param ref - The ref to be forwarded to the MuiFab component.
+ * @returns The rendered Fab component.
+ */
+const Fab: OverridableComponent<FabTypeMap<FabProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: FabProps<C>,
+    ref: Ref<HTMLButtonElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-fab', className);
 
-    return <MuiFab className={classes} {...rest} ref={ref} />;
+    return <MuiFab ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<FabProps> & WithWrapperProps;
+) as OverridableComponent<FabTypeMap<FabProps>> & WithWrapperProps;
 
 Fab.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Fab.muiName = COMPONENT_NAME;
-Fab.defaultProps = {};
 
 export default Fab;
diff --git a/packages/react/src/components/Fab/index.ts b/packages/react/src/components/Fab/index.ts
index 5aaaf4a7..e57c8110 100644
--- a/packages/react/src/components/Fab/index.ts
+++ b/packages/react/src/components/Fab/index.ts
@@ -17,4 +17,11 @@
  */
 
 export {default} from './Fab';
-export type {FabProps} from './Fab';
+export * from './Fab';
+
+export type {
+  FabPropsVariantOverrides,
+  FabPropsSizeOverrides,
+  FabPropsColorOverrides,
+  FabTypeMap,
+} from '@mui/material/Fab';
diff --git a/packages/react/src/components/Footer/Footer.tsx b/packages/react/src/components/Footer/Footer.tsx
index a5b7f0cb..a61f8ee1 100644
--- a/packages/react/src/components/Footer/Footer.tsx
+++ b/packages/react/src/components/Footer/Footer.tsx
@@ -16,18 +16,23 @@
  * under the License.
  */
 
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement, ReactNode} from 'react';
-import {useIsMobile} from '../../hooks';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement, ReactNode} from 'react';
+import {useIsMobile} from '../../hooks/use-is-mobile';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
-import Box, {BoxProps} from '../Box';
-import Container, {ContainerProps} from '../Container';
-import Link, {LinkProps} from '../Link';
+import Box from '../Box';
+import type {BoxProps, BoxTypeMap} from '../Box';
+import Container from '../Container';
+import type {ContainerProps} from '../Container';
+import Link from '../Link';
+import type {LinkProps} from '../Link';
 import Typography from '../Typography';
 import './footer.scss';
 
-export interface FooterProps extends BoxProps {
+export type FooterProps<C extends ElementType = ElementType> = BoxProps<C> & {
   /**
    * Copyright to display.
    */
@@ -40,51 +45,71 @@ export interface FooterProps extends BoxProps {
    * Determine the max-width of the footer container.
    */
   maxWidth?: ContainerProps['maxWidth'];
-}
+};
 
 const COMPONENT_NAME: string = 'Footer';
 
-const Footer: FC<FooterProps> & WithWrapperProps = (props: FooterProps): ReactElement => {
-  const {className, copyright, links, maxWidth, ...rest} = props;
-
-  const isMobile: boolean = useIsMobile();
+/**
+ * The Footers display a set of links and a copyright at the bottom of the application.
+ *
+ * Demos:
+ *
+ * - [Footer (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-footer)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Footer component.
+ * @param ref - The ref to be forwarded to the Box component.
+ * @returns The rendered Footer component.
+ */
+const Footer: OverridableComponent<BoxTypeMap<FooterProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, copyright, component = 'footer' as C, links, maxWidth, ...rest}: FooterProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const isMobile: boolean = useIsMobile();
 
-  const classes: string = clsx('oxygen-footer', {mobile: isMobile}, className);
+    const classes: string = clsx('oxygen-footer', {mobile: isMobile}, className);
 
-  return (
-    <Box component="footer" className={classes} {...rest}>
-      <Container disableGutters maxWidth={maxWidth} className="oxygen-footer-container">
-        {links !== undefined && Array.isArray(links) && links.length > 0 && (
-          <Box className="oxygen-footer-links" fontSize="body2.fontSize">
-            {links.map((link: LinkProps) => (
-              <Link
-                key={link.id}
-                className="oxygen-footer-link"
-                underline="none"
-                target="_blank"
-                rel="noopener"
-                color="textSecondary"
-                {...link}
-              />
-            ))}
-          </Box>
-        )}
-        {copyright && (
-          <Box className="oxygen-footer-links">
-            <Box color="text.secondary">
-              <Typography className="oxygen-footer-copyright" display="inline" variant="body2">
-                {copyright}
-              </Typography>
+    return (
+      <Box ref={ref} component={component} className={classes} {...rest}>
+        <Container disableGutters maxWidth={maxWidth} className="oxygen-footer-container">
+          {links !== undefined && Array.isArray(links) && links.length > 0 && (
+            <Box className="oxygen-footer-links" fontSize="body2.fontSize">
+              {links.map((link: LinkProps) => (
+                <Link
+                  key={link.id}
+                  className="oxygen-footer-link"
+                  underline="none"
+                  target="_blank"
+                  rel="noopener"
+                  color="textSecondary"
+                  {...link}
+                />
+              ))}
             </Box>
-          </Box>
-        )}
-      </Container>
-    </Box>
-  );
-};
+          )}
+          {copyright && (
+            <Box className="oxygen-footer-links">
+              <Box color="text.secondary">
+                <Typography className="oxygen-footer-copyright" display="inline" variant="body2">
+                  {copyright}
+                </Typography>
+              </Box>
+            </Box>
+          )}
+        </Container>
+      </Box>
+    );
+  },
+) as OverridableComponent<BoxTypeMap<FooterProps>> & WithWrapperProps;
 
 Footer.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Footer.muiName = COMPONENT_NAME;
-Footer.defaultProps = {};
 
 export default Footer;
diff --git a/packages/react/src/components/Footer/index.ts b/packages/react/src/components/Footer/index.ts
index f998389c..e3eb0bb8 100644
--- a/packages/react/src/components/Footer/index.ts
+++ b/packages/react/src/components/Footer/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './Footer';
-export type {FooterProps} from './Footer';
+export * from './Footer';
diff --git a/packages/react/src/components/FormControl/FormControl.tsx b/packages/react/src/components/FormControl/FormControl.tsx
index 9011cd17..62c96767 100644
--- a/packages/react/src/components/FormControl/FormControl.tsx
+++ b/packages/react/src/components/FormControl/FormControl.tsx
@@ -16,31 +16,69 @@
  * under the License.
  */
 
-import MuiFormControl, {FormControlProps as MuiFormControlProps} from '@mui/material/FormControl';
+import MuiFormControl from '@mui/material/FormControl';
+import type {FormControlProps as MuiFormControlProps, FormControlTypeMap} from '@mui/material/FormControl';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {ElementType, FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './form-control.scss';
 
-export type FormControlProps<C extends ElementType = ElementType> = {
+export type FormControlProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = FormControlTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiFormControlProps<C>, 'component'>;
+} & Omit<MuiFormControlProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'FormControl';
 
-const FormControl: FC<FormControlProps> & WithWrapperProps = <C extends ElementType>(
-  props: FormControlProps<C>,
-): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-form-control', className);
+/**
+ * The Form Control apply a common state to form inputs; FormLabel, FormHelperText, Input, InputLabel.
+ *
+ * Demos:
+ *
+ * - [Checkbox (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-checkbox)
+ * - [Checkbox (MUI)](https://mui.com/material-ui/react-checkbox/)
+ * - [Radio Group (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-radio-group)
+ * - [Radio Group (MUI)](https://mui.com/material-ui/react-radio-button/)
+ * - [Switch (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-switch)
+ * - [Switch (MUI)](https://mui.com/material-ui/react-switch/)
+ * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field)
+ * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [FormControl API](https://mui.com/material-ui/api/form-control/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the FormControl component.
+ * @param ref - The ref to be forwarded to the MuiFormControl component.
+ * @returns The rendered FormControl component.
+ */
+const FormControl: OverridableComponent<FormControlTypeMap<FormControlProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: FormControlProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-form-control', className);
 
-  return <MuiFormControl className={classes} {...rest} />;
-};
+    return <MuiFormControl ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<FormControlTypeMap<FormControlProps>> & WithWrapperProps;
 
 FormControl.displayName = composeComponentDisplayName(COMPONENT_NAME);
 FormControl.muiName = COMPONENT_NAME;
-FormControl.defaultProps = {};
 
 export default FormControl;
diff --git a/packages/react/src/components/FormControl/index.ts b/packages/react/src/components/FormControl/index.ts
index f89bb9c6..60aac7e0 100644
--- a/packages/react/src/components/FormControl/index.ts
+++ b/packages/react/src/components/FormControl/index.ts
@@ -17,4 +17,11 @@
  */
 
 export {default} from './FormControl';
-export type {FormControlProps} from './FormControl';
+export * from './FormControl';
+
+export {useFormControl, FormControlState} from '@mui/material/FormControl';
+export type {
+  FormControlPropsSizeOverrides,
+  FormControlPropsColorOverrides,
+  FormControlTypeMap,
+} from '@mui/material/FormControl';
diff --git a/packages/react/src/components/FormControlLabel/FormControlLabel.tsx b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx
index ce32930d..af2beb88 100644
--- a/packages/react/src/components/FormControlLabel/FormControlLabel.tsx
+++ b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiFormControlLabel, {FormControlLabelProps as MuiFormControlLabelProps} from '@mui/material/FormControlLabel';
+import MuiFormControlLabel from '@mui/material/FormControlLabel';
+import type {FormControlLabelProps as MuiFormControlLabelProps} from '@mui/material/FormControlLabel';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
@@ -26,10 +28,33 @@ export type FormControlLabelProps = MuiFormControlLabelProps;
 
 const COMPONENT_NAME: string = 'FormControlLabel';
 
+/**
+ * The Form Control Label can be used to display a label for a form control.
+ *
+ * Demos:
+ *
+ * - [Checkbox (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-checkbox)
+ * - [Checkbox (MUI)](https://mui.com/material-ui/react-checkbox/)
+ * - [Radio Group (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-radio-group)
+ * - [Radio Group (MUI)](https://mui.com/material-ui/react-radio-button/)
+ * - [Switch (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-switch)
+ * - [Switch (MUI)](https://mui.com/material-ui/react-switch/)
+ *
+ * API:
+ *
+ * - [FormControlLabel API](https://mui.com/material-ui/api/form-control-label/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the FormControlLabel component.
+ * @param ref - The ref to be forwarded to the MuiFormControlLabel component.
+ * @returns The rendered FormControlLabel component.
+ */
 const FormControlLabel: ForwardRefExoticComponent<FormControlLabelProps> & WithWrapperProps = forwardRef(
-  (props: FormControlLabelProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: FormControlLabelProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-form-control-label', className);
 
     return <MuiFormControlLabel className={classes} {...rest} ref={ref} />;
@@ -38,6 +63,5 @@ const FormControlLabel: ForwardRefExoticComponent<FormControlLabelProps> & WithW
 
 FormControlLabel.displayName = composeComponentDisplayName(COMPONENT_NAME);
 FormControlLabel.muiName = COMPONENT_NAME;
-FormControlLabel.defaultProps = {};
 
 export default FormControlLabel;
diff --git a/packages/react/src/components/FormControlLabel/index.ts b/packages/react/src/components/FormControlLabel/index.ts
index b2adcbcf..09030c95 100644
--- a/packages/react/src/components/FormControlLabel/index.ts
+++ b/packages/react/src/components/FormControlLabel/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './FormControlLabel';
-export type {FormControlLabelProps} from './FormControlLabel';
+export * from './FormControlLabel';
diff --git a/packages/react/src/components/FormGroup/FormGroup.tsx b/packages/react/src/components/FormGroup/FormGroup.tsx
index ce4c5550..09be13b1 100644
--- a/packages/react/src/components/FormGroup/FormGroup.tsx
+++ b/packages/react/src/components/FormGroup/FormGroup.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiFormGroup, {FormGroupProps as MuiFormGroupProps} from '@mui/material/FormGroup';
+import MuiFormGroup from '@mui/material/FormGroup';
+import type {FormGroupProps as MuiFormGroupProps} from '@mui/material/FormGroup';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
@@ -26,18 +28,37 @@ export type FormGroupProps = MuiFormGroupProps;
 
 const COMPONENT_NAME: string = 'FormGroup';
 
+/**
+ * The Form Group is a helpful wrapper used to group selection control components.
+ *
+ * Demos:
+ *
+ * - [Checkbox (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-checkbox)
+ * - [Checkbox (MUI)](https://mui.com/material-ui/react-checkbox/)
+ * - [Switch (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-switch)
+ * - [Switch (MUI)](https://mui.com/material-ui/react-switch/)
+ *
+ * API:
+ *
+ * - [FormGroup API](https://mui.com/material-ui/api/form-group/)
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the FormGroup component.
+ * @param ref - The ref to be forwarded to the MuiFormGroup component.
+ * @returns The rendered FormGroup component.
+ */
 const FormGroup: ForwardRefExoticComponent<FormGroupProps> & WithWrapperProps = forwardRef(
-  (props: FormGroupProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: FormGroupProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-form-group', className);
 
-    return <MuiFormGroup className={classes} {...rest} ref={ref} />;
+    return <MuiFormGroup ref={ref} className={classes} {...rest} />;
   },
 ) as ForwardRefExoticComponent<FormGroupProps> & WithWrapperProps;
 
 FormGroup.displayName = composeComponentDisplayName(COMPONENT_NAME);
 FormGroup.muiName = COMPONENT_NAME;
-FormGroup.defaultProps = {};
 
 export default FormGroup;
diff --git a/packages/react/src/components/FormGroup/index.ts b/packages/react/src/components/FormGroup/index.ts
index 825627b8..48780e1d 100644
--- a/packages/react/src/components/FormGroup/index.ts
+++ b/packages/react/src/components/FormGroup/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './FormGroup';
-export type {FormGroupProps} from './FormGroup';
+export * from './FormGroup';
diff --git a/packages/react/src/components/FormHelperText/FormHelperText.tsx b/packages/react/src/components/FormHelperText/FormHelperText.tsx
index 483a16da..3130bff4 100644
--- a/packages/react/src/components/FormHelperText/FormHelperText.tsx
+++ b/packages/react/src/components/FormHelperText/FormHelperText.tsx
@@ -16,31 +16,63 @@
  * under the License.
  */
 
-import MuiFormHelperText, {FormHelperTextProps as MuiFormHelperTextProps} from '@mui/material/FormHelperText';
+import MuiFormHelperText from '@mui/material/FormHelperText';
+import type {FormHelperTextProps as MuiFormHelperTextProps, FormHelperTextTypeMap} from '@mui/material/FormHelperText';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {ElementType, FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './form-helper-text.scss';
 
-export type FormHelperTextProps<C extends ElementType = ElementType> = {
+export type FormHelperTextProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = FormHelperTextTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiFormHelperTextProps<C>, 'component'>;
+} & Omit<MuiFormHelperTextProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'FormHelperText';
 
-const FormHelperText: FC<FormHelperTextProps> & WithWrapperProps = <C extends ElementType>(
-  props: FormHelperTextProps<C>,
-): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-form-helper-text', className);
+/**
+ * A Form Helper Text component is used to provide additional information about the form inputs.
+ *
+ * Demos:
+ *
+ * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field)
+ * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [FormHelperText API](https://mui.com/material-ui/api/form-helper-text/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Fab component.
+ * @param ref - The ref to be forwarded to the MuiFab component.
+ * @returns The rendered Fab component.
+ */
+const FormHelperText: OverridableComponent<FormHelperTextTypeMap<FormHelperTextProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: FormHelperTextProps<C>,
+    ref: Ref<HTMLParagraphElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-form-helper-text', className);
 
-  return <MuiFormHelperText className={classes} {...rest} />;
-};
+    return <MuiFormHelperText ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<FormHelperTextTypeMap<FormHelperTextProps>> & WithWrapperProps;
 
 FormHelperText.displayName = composeComponentDisplayName(COMPONENT_NAME);
 FormHelperText.muiName = COMPONENT_NAME;
-FormHelperText.defaultProps = {};
 
 export default FormHelperText;
diff --git a/packages/react/src/components/FormHelperText/index.ts b/packages/react/src/components/FormHelperText/index.ts
index 028cbfeb..28678a4c 100644
--- a/packages/react/src/components/FormHelperText/index.ts
+++ b/packages/react/src/components/FormHelperText/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './FormHelperText';
-export type {FormHelperTextProps} from './FormHelperText';
+export * from './FormHelperText';
+
+export type {FormHelperTextPropsVariantOverrides, FormHelperTextTypeMap} from '@mui/material/FormHelperText';
diff --git a/packages/react/src/components/FormLabel/FormLabel.tsx b/packages/react/src/components/FormLabel/FormLabel.tsx
index ba513fe7..41908ca6 100644
--- a/packages/react/src/components/FormLabel/FormLabel.tsx
+++ b/packages/react/src/components/FormLabel/FormLabel.tsx
@@ -16,30 +16,66 @@
  * under the License.
  */
 
-import MuiFormLabel, {FormLabelProps as MuiFormLabelProps} from '@mui/material/FormLabel';
+import MuiFormLabel from '@mui/material/FormLabel';
+import type {FormLabelTypeMap, FormLabelProps as MuiFormLabelProps} from '@mui/material/FormLabel';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react';
+import {forwardRef} from 'react';
+import type {ReactElement, Ref, ElementType} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
-export type FormLabelProps<C extends ElementType = ElementType> = {
+export type FormLabelProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = FormLabelTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiFormLabelProps<C>, 'component'>;
+} & Omit<MuiFormLabelProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'FormLabel';
 
-const FormLabel: ForwardRefExoticComponent<FormLabelProps> & WithWrapperProps = forwardRef(
-  <C extends ElementType>(props: FormLabelProps<C>, ref: MutableRefObject<HTMLLabelElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * A Form Label component is used to provide a label for the form inputs.
+ *
+ * Demos:
+ *
+ * - [Checkbox (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-checkbox)
+ * - [Checkbox (MUI)](https://mui.com/material-ui/react-checkbox/)
+ * - [Radio Group (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-radio-group)
+ * - [Radio Group (MUI)](https://mui.com/material-ui/react-radio-button/)
+ * - [Switch (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-switch)
+ * - [Switch (MUI)](https://mui.com/material-ui/react-switch/)
+ *
+ * API:
+ *
+ * - [FormLabel API](https://mui.com/material-ui/api/form-label/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Fab component.
+ * @param ref - The ref to be forwarded to the MuiFab component.
+ * @returns The rendered Fab component.
+ */
+const FormLabel: OverridableComponent<FormLabelTypeMap<FormLabelProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: FormLabelProps<C>,
+    ref: Ref<HTMLLabelElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-form-label', className);
 
-    return <MuiFormLabel className={classes} {...rest} ref={ref} />;
+    return <MuiFormLabel ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<FormLabelProps> & WithWrapperProps;
+) as OverridableComponent<FormLabelTypeMap<FormLabelProps>> & WithWrapperProps;
 
 FormLabel.displayName = composeComponentDisplayName(COMPONENT_NAME);
 FormLabel.muiName = COMPONENT_NAME;
-FormLabel.defaultProps = {};
 
 export default FormLabel;
diff --git a/packages/react/src/components/FormLabel/index.ts b/packages/react/src/components/FormLabel/index.ts
index 51abd52b..21f04ada 100644
--- a/packages/react/src/components/FormLabel/index.ts
+++ b/packages/react/src/components/FormLabel/index.ts
@@ -17,4 +17,12 @@
  */
 
 export {default} from './FormLabel';
-export type {FormLabelProps} from './FormLabel';
+export * from './FormLabel';
+
+export type {
+  FormLabelPropsColorOverrides,
+  FormLabelOwnProps,
+  FormLabelTypeMap,
+  FormLabelBaseProps,
+  ExtendFormLabelTypeMap,
+} from '@mui/material/FormLabel';
diff --git a/packages/react/src/components/Grid/Grid.tsx b/packages/react/src/components/Grid/Grid.tsx
index c81906cb..f61efd19 100644
--- a/packages/react/src/components/Grid/Grid.tsx
+++ b/packages/react/src/components/Grid/Grid.tsx
@@ -16,27 +16,62 @@
  * under the License.
  */
 
-import MuiGrid, {Grid2Props as MuiGridProps} from '@mui/material/Unstable_Grid2';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiGrid from '@mui/material/Unstable_Grid2';
+import type {Grid2TypeMap, Grid2Props as MuiGridProps} from '@mui/material/Unstable_Grid2';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './grid.scss';
 
-export type GridProps = MuiGridProps;
+export type GridProps<
+  C extends ElementType = ElementType,
+  D extends React.ElementType = Grid2TypeMap['defaultComponent'],
+  P = {
+    component?: React.ElementType;
+  },
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiGridProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Grid';
 
-const Grid: FC<GridProps> & WithWrapperProps = (props: GridProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-grid', className);
+/**
+ * The Grid adapts to screen size and orientation, ensuring consistency across layouts.
+ *
+ * Demos:
+ *
+ * - [Grid (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/layout-grid)
+ * - [Grid (MUI)](https://mui.com/material-ui/react-grid2/)
+ *
+ * API:
+ *
+ * - [Grid API](https://mui.com/material-ui/api/grid-2/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the FormControl component.
+ * @param ref - The ref to be forwarded to the MuiFormControl component.
+ * @returns The rendered FormControl component.
+ */
+const Grid: OverridableComponent<Grid2TypeMap<GridProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>({className, ...rest}: GridProps<C>, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-grid', className);
 
-  return <MuiGrid className={classes} {...rest} />;
-};
+    return <MuiGrid ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<Grid2TypeMap<GridProps>> & WithWrapperProps;
 
 Grid.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Grid.muiName = COMPONENT_NAME;
-Grid.defaultProps = {};
 
 export default Grid;
diff --git a/packages/react/src/components/Grid/index.ts b/packages/react/src/components/Grid/index.ts
index b79c636d..b35f54d3 100644
--- a/packages/react/src/components/Grid/index.ts
+++ b/packages/react/src/components/Grid/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Grid';
-export type {GridProps} from './Grid';
+export * from './Grid';
+
+export type {Grid2Slot, Grid2TypeMap} from '@mui/material/Unstable_Grid2';
diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx
index da844e09..7e45b652 100644
--- a/packages/react/src/components/Header/Header.tsx
+++ b/packages/react/src/components/Header/Header.tsx
@@ -16,26 +16,30 @@
  * under the License.
  */
 
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import {useColorScheme} from '@mui/material/styles';
 import {Mode} from '@mui/system/cssVars/useCurrentColorScheme';
 import {ChevronDownIcon, BarsIcon, ArrowRightToBracketIcon} from '@oxygen-ui/react-icons';
 import clsx from 'clsx';
-import {FC, ReactElement, ReactNode} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement, ReactNode} from 'react';
 import {useIsMobile} from '../../hooks/use-is-mobile';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
-import './header.scss';
-import AppBar, {AppBarProps} from '../AppBar';
+import AppBar from '../AppBar';
+import type {AppBarProps, AppBarTypeMap} from '../AppBar';
 import Avatar from '../Avatar';
 import Box from '../Box';
-import {ButtonProps} from '../Button';
+import type {ButtonProps} from '../Button';
 import IconButton from '../IconButton';
 import Link from '../Link';
 import Toolbar from '../Toolbar';
 import Typography from '../Typography';
-import UserDropdownMenu, {ModeList, UserTemplate} from '../UserDropdownMenu';
+import UserDropdownMenu from '../UserDropdownMenu';
+import type {ModeList, UserTemplate} from '../UserDropdownMenu';
+import './header.scss';
 
-export interface HeaderProps extends AppBarProps {
+export type HeaderProps<C extends ElementType = ElementType> = AppBarProps<C> & {
   /**
    * Brand information.
    */
@@ -74,9 +78,9 @@ export interface HeaderProps extends AppBarProps {
    * Props to modify the action menu item in the user dropdown menu.
    */
   userDropdownMenu?: UserDropdownMenuHeaderProps;
-}
+};
 
-export interface UserDropdownMenuHeaderProps {
+export type UserDropdownMenuHeaderProps = {
   /**
    * Action icon for the user dropdown menu.
    */
@@ -98,9 +102,9 @@ export interface UserDropdownMenuHeaderProps {
    */
   onActionClick?: () => void;
   triggerOptions?: Omit<ButtonProps, 'onClick'> & Record<string, any>;
-}
+};
 
-export interface BrandTemplate {
+export type BrandTemplate = {
   /**
    * Logo for the brand template.
    */
@@ -122,7 +126,7 @@ export interface BrandTemplate {
    * Title of the brand, portal name or company.
    */
   title?: ReactNode;
-}
+};
 
 const userDropdownMenuDefaultProps: UserDropdownMenuHeaderProps = {
   actionIcon: <ArrowRightToBracketIcon />,
@@ -132,127 +136,149 @@ const userDropdownMenuDefaultProps: UserDropdownMenuHeaderProps = {
 
 const COMPONENT_NAME: string = 'Header';
 
-const Header: FC<HeaderProps> & WithWrapperProps = (props: HeaderProps): ReactElement => {
-  const {
-    brand,
-    className,
-    modes,
-    showCollapsibleHamburger,
-    leftAlignedElements,
-    navbarToggleIcon,
-    onCollapsibleHamburgerClick,
-    rightAlignedElements,
-    user,
-    userDropdownMenu,
-    ...rest
-  } = props;
-
-  const userDropdownMenuProps: UserDropdownMenuHeaderProps = {...userDropdownMenuDefaultProps, ...userDropdownMenu};
+/**
+ * The Header displays the brand, left aligned elements, right aligned elements, and the user dropdown menu.
+ *
+ * Demos:
+ *
+ * - [Header (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-header)
+ *
+ * API:
+ *
+ * - [AppBar API](https://mui.com/material-ui/api/app-bar/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [AppBar](https://mui.com/material-ui/api/app-bar//) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Header component.
+ * @param ref - The ref to be forwarded to the AppBar component.
+ * @returns The rendered Header component.
+ */
+const Header: OverridableComponent<AppBarTypeMap<HeaderProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {
+      brand,
+      className,
+      modes,
+      showCollapsibleHamburger,
+      leftAlignedElements,
+      navbarToggleIcon = <BarsIcon />,
+      onCollapsibleHamburgerClick,
+      rightAlignedElements,
+      user,
+      userDropdownMenu = userDropdownMenuDefaultProps,
+      ...rest
+    }: HeaderProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const userDropdownMenuProps: UserDropdownMenuHeaderProps = {...userDropdownMenuDefaultProps, ...userDropdownMenu};
 
-  const {mode, setMode} = useColorScheme();
-  const isMobile: boolean = useIsMobile();
+    const {mode, setMode} = useColorScheme();
+    const isMobile: boolean = useIsMobile();
 
-  const classes: string = clsx(
-    'oxygen-header',
-    {
-      mobile: isMobile,
-      'with-hamburger': showCollapsibleHamburger,
-    },
-    className,
-  );
+    const classes: string = clsx(
+      'oxygen-header',
+      {
+        mobile: isMobile,
+        'with-hamburger': showCollapsibleHamburger,
+      },
+      className,
+    );
 
-  const onModeChange = (selectedMode: Mode): void => {
-    setMode(selectedMode);
-  };
+    const onModeChange = (selectedMode: Mode): void => {
+      setMode(selectedMode);
+    };
 
-  return (
-    <AppBar
-      position="static"
-      color="default"
-      variant="outlined"
-      elevation={0}
-      className={classes}
-      role="banner"
-      {...rest}
-    >
-      <Toolbar className="oxygen-header-toolbar">
-        {showCollapsibleHamburger && (
-          <div className="oxygen-header-collapsible-hamburger">
-            <IconButton aria-label="Menu Icon" onClick={onCollapsibleHamburgerClick || ((): void => null)}>
-              {navbarToggleIcon}
-            </IconButton>
-          </div>
-        )}
-        {brand && (
-          <Box
-            tabIndex={0}
-            component={brand.onClick ? Link : Box}
-            className={clsx('oxygen-brand', {
-              'with-link': Boolean(brand.onClick),
-            })}
-            onClick={brand.onClick}
-            underline="none"
-            color="inherit"
-          >
-            <Box className="oxygen-brand-logo">
-              {isMobile ? brand.logo.mobile ?? brand.logo.desktop : brand.logo.desktop}
+    return (
+      <AppBar
+        ref={ref}
+        position="static"
+        color="default"
+        variant="outlined"
+        elevation={0}
+        className={classes}
+        role="banner"
+        {...rest}
+      >
+        <Toolbar className="oxygen-header-toolbar">
+          {showCollapsibleHamburger && (
+            <div className="oxygen-header-collapsible-hamburger">
+              <IconButton aria-label="Menu Icon" onClick={onCollapsibleHamburgerClick || ((): void => null)}>
+                {navbarToggleIcon}
+              </IconButton>
+            </div>
+          )}
+          {brand && (
+            <Box
+              tabIndex={0}
+              component={brand.onClick ? Link : Box}
+              className={clsx('oxygen-brand', {
+                'with-link': Boolean(brand.onClick),
+              })}
+              onClick={brand.onClick}
+              color="inherit"
+              {...(brand.onClick ? {underline: 'none'} : {})}
+            >
+              <Box className="oxygen-brand-logo">
+                {isMobile ? brand.logo.mobile ?? brand.logo.desktop : brand.logo.desktop}
+              </Box>
+              <Typography variant="h6" component="h1" className="oxygen-brand-portal-name">
+                {brand.title}
+              </Typography>
             </Box>
-            <Typography variant="h6" component="h1" className="oxygen-brand-portal-name">
-              {brand.title}
-            </Typography>
-          </Box>
-        )}
-        {(leftAlignedElements || rightAlignedElements) && (
-          <Box className="oxygen-header-elements">
-            {leftAlignedElements?.length > 0 && (
-              <Box className="oxygen-header-elements-left">{leftAlignedElements}</Box>
-            )}
-            {rightAlignedElements?.length > 0 && (
-              <Box className="oxygen-header-elements-right">{rightAlignedElements}</Box>
-            )}
+          )}
+          {(leftAlignedElements || rightAlignedElements) && (
+            <Box className="oxygen-header-elements">
+              {leftAlignedElements?.length > 0 && (
+                <Box className="oxygen-header-elements-left">{leftAlignedElements}</Box>
+              )}
+              {rightAlignedElements?.length > 0 && (
+                <Box className="oxygen-header-elements-right">{rightAlignedElements}</Box>
+              )}
+            </Box>
+          )}
+          <Box className="oxygen-header-user-dropdown-menu">
+            <UserDropdownMenu
+              user={user}
+              triggerOptions={{
+                children: user?.name,
+                color: 'inherit',
+                endIcon: <ChevronDownIcon />,
+                startIcon: (
+                  <Avatar
+                    className="image"
+                    alt="User Image"
+                    src={user?.image}
+                    randomBackgroundColor={!user?.image}
+                    backgroundColorRandomizer={user?.name}
+                  >
+                    {user?.name?.split('')[0]}
+                  </Avatar>
+                ),
+                ...userDropdownMenuProps.triggerOptions,
+              }}
+              modesHeading="Theme"
+              modes={modes}
+              onActionTrigger={userDropdownMenuProps.onActionClick}
+              actionText={userDropdownMenuProps.actionText}
+              actionIcon={userDropdownMenuProps.actionIcon}
+              mode={mode}
+              onModeChange={onModeChange}
+              menuItems={userDropdownMenuProps.menuItems}
+              footerContent={userDropdownMenu.footerContent}
+            />
           </Box>
-        )}
-        <Box className="oxygen-header-user-dropdown-menu">
-          <UserDropdownMenu
-            user={user}
-            triggerOptions={{
-              children: user?.name,
-              color: 'inherit',
-              endIcon: <ChevronDownIcon />,
-              startIcon: (
-                <Avatar
-                  className="image"
-                  alt="User Image"
-                  src={user?.image}
-                  randomBackgroundColor={!user?.image}
-                  backgroundColorRandomizer={user?.name}
-                >
-                  {user?.name?.split('')[0]}
-                </Avatar>
-              ),
-              ...userDropdownMenuProps.triggerOptions,
-            }}
-            modesHeading="Theme"
-            modes={modes}
-            onActionTrigger={userDropdownMenuProps.onActionClick}
-            actionText={userDropdownMenuProps.actionText}
-            actionIcon={userDropdownMenuProps.actionIcon}
-            mode={mode}
-            onModeChange={onModeChange}
-            menuItems={userDropdownMenuProps.menuItems}
-            footerContent={userDropdownMenu.footerContent}
-          />
-        </Box>
-      </Toolbar>
-    </AppBar>
-  );
-};
+        </Toolbar>
+      </AppBar>
+    );
+  },
+) as OverridableComponent<AppBarTypeMap<HeaderProps>> & WithWrapperProps;
 
 Header.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Header.muiName = COMPONENT_NAME;
-Header.defaultProps = {
-  navbarToggleIcon: <BarsIcon />,
-  userDropdownMenu: userDropdownMenuDefaultProps,
-};
 
 export default Header;
diff --git a/packages/react/src/components/Header/index.ts b/packages/react/src/components/Header/index.ts
index 40eca574..3240c0ca 100644
--- a/packages/react/src/components/Header/index.ts
+++ b/packages/react/src/components/Header/index.ts
@@ -17,5 +17,4 @@
  */
 
 export {default} from './Header';
-export type {HeaderProps} from './Header';
-export type {BrandTemplate} from './Header';
+export * from './Header';
diff --git a/packages/react/src/components/IconButton/IconButton.tsx b/packages/react/src/components/IconButton/IconButton.tsx
index 0cb1ce79..3dedb456 100644
--- a/packages/react/src/components/IconButton/IconButton.tsx
+++ b/packages/react/src/components/IconButton/IconButton.tsx
@@ -16,9 +16,12 @@
  * under the License.
  */
 
-import MuiIconButton, {IconButtonProps as MuiIconButtonProps} from '@mui/material/IconButton';
+import MuiIconButton from '@mui/material/IconButton';
+import type {IconButtonTypeMap, IconButtonProps as MuiIconButtonProps} from '@mui/material/IconButton';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './icon-button.scss';
@@ -28,26 +31,60 @@ export enum IconButtonVariants {
   TEXT = 'text',
 }
 
-export interface IconButtonProps extends MuiIconButtonProps {
+export type IconButtonProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = IconButtonTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * The variant of the icon button.
+   */
   variant?: IconButtonVariants;
-}
+} & Omit<MuiIconButtonProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'IconButton';
 
-const IconButton: FC<IconButtonProps> & WithWrapperProps = (props: IconButtonProps): ReactElement => {
-  const {className, variant, ...rest} = props;
-
-  const classes: string = clsx('oxygen-icon-button', className, {
-    'oxygen-icon-button-contained': variant === IconButtonVariants.CONTAINED,
-  });
+/**
+ * The Icon Button component is used to render a button with an icon.
+ *
+ * Demos:
+ *
+ * - [Button (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-button)
+ * - [Button (MUI)](https://mui.com/material-ui/react-button/)
+ *
+ * API:
+ *
+ * - [IconButton API](https://mui.com/material-ui/api/icon-button/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the IconButton component.
+ * @param ref - The ref to be forwarded to the MuiIconButton component.
+ * @returns The rendered IconButton component.
+ */
+const IconButton: OverridableComponent<IconButtonTypeMap<IconButtonProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, variant = IconButtonVariants.TEXT, ...rest}: IconButtonProps<C>,
+    ref: Ref<HTMLButtonElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-icon-button', className, {
+      'oxygen-icon-button-contained': variant === IconButtonVariants.CONTAINED,
+    });
 
-  return <MuiIconButton className={classes} {...rest} />;
-};
+    return <MuiIconButton ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<IconButtonTypeMap<IconButtonProps>> & WithWrapperProps;
 
 IconButton.displayName = composeComponentDisplayName(COMPONENT_NAME);
 IconButton.muiName = COMPONENT_NAME;
-IconButton.defaultProps = {
-  variant: IconButtonVariants.TEXT,
-};
 
 export default IconButton;
diff --git a/packages/react/src/components/IconButton/index.ts b/packages/react/src/components/IconButton/index.ts
index 5349e9af..18cd7c8c 100644
--- a/packages/react/src/components/IconButton/index.ts
+++ b/packages/react/src/components/IconButton/index.ts
@@ -17,4 +17,10 @@
  */
 
 export {default} from './IconButton';
-export type {IconButtonProps} from './IconButton';
+export * from './IconButton';
+
+export type {
+  IconButtonPropsColorOverrides,
+  IconButtonPropsSizeOverrides,
+  IconButtonTypeMap,
+} from '@mui/material/IconButton';
diff --git a/packages/react/src/components/Image/Image.tsx b/packages/react/src/components/Image/Image.tsx
index b5d59f52..33851711 100644
--- a/packages/react/src/components/Image/Image.tsx
+++ b/packages/react/src/components/Image/Image.tsx
@@ -17,7 +17,8 @@
  */
 
 import clsx from 'clsx';
-import {FC, ImgHTMLAttributes, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ImgHTMLAttributes, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
@@ -26,16 +27,32 @@ export type ImageProps = ImgHTMLAttributes<HTMLImageElement>;
 const COMPONENT_NAME: string = 'Image';
 
 /**
+ * The Footers display a set of links and a copyright at the bottom of the application.
+ *
  * TODO: Refer improvement issue if this Image component is required.
  * @see {@link https://github.com/wso2/oxygen-ui/issues/65}
+ *
+ * Demos:
+ *
+ * - [Image (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-image)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the Image component.
+ * @param ref - The ref to be forwarded to the img component.
+ * @returns The rendered Image component.
  */
-const Image: FC<ImageProps> & WithWrapperProps = (props: ImageProps): ReactElement => {
-  const {className, alt, ...rest} = props;
-
-  const classes: string = clsx('oxygen-image', className);
+const Image: ForwardRefExoticComponent<ImageProps> & WithWrapperProps = forwardRef(
+  ({className, alt, ...rest}: ImageProps, ref: Ref<HTMLImageElement>): ReactElement => {
+    const classes: string = clsx('oxygen-image', className);
 
-  return <img className={classes} alt={alt} {...rest} />;
-};
+    return <img ref={ref} className={classes} alt={alt} {...rest} />;
+  },
+) as ForwardRefExoticComponent<ImageProps> & WithWrapperProps;
 
 Image.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Image.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/Image/index.ts b/packages/react/src/components/Image/index.ts
index cc1ea89f..8dce47a6 100644
--- a/packages/react/src/components/Image/index.ts
+++ b/packages/react/src/components/Image/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './Image';
-export type {ImageProps} from './Image';
+export * from './Image';
diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx
index f56e359e..f5ab92bd 100644
--- a/packages/react/src/components/Input/Input.tsx
+++ b/packages/react/src/components/Input/Input.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiInput, {InputProps as MuiInputProps} from '@mui/material/Input';
+import MuiInput from '@mui/material/Input';
+import type {InputProps as MuiInputProps} from '@mui/material/Input';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './input.scss';
@@ -27,16 +29,37 @@ export type InputProps = MuiInputProps;
 
 const COMPONENT_NAME: string = 'Input';
 
-const Input: FC<InputProps> & WithWrapperProps = (props: InputProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-input', className);
+/**
+ * The Input component is used to render a text input field.
+ *
+ * Demos:
+ *
+ * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field)
+ * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [Input API](https://mui.com/material-ui/api/input/)
+ * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the Input component.
+ * @param ref - The ref to be forwarded to the MuiInput component.
+ * @returns The rendered Input component.
+ */
+const Input: ForwardRefExoticComponent<InputProps> & WithWrapperProps = forwardRef(
+  ({className, ...rest}: InputProps, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-input', className);
 
-  return <MuiInput className={classes} {...rest} />;
-};
+    return <MuiInput ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<InputProps> & WithWrapperProps;
 
 Input.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Input.muiName = COMPONENT_NAME;
-Input.defaultProps = {};
 
 export default Input;
diff --git a/packages/react/src/components/Input/index.ts b/packages/react/src/components/Input/index.ts
index 82bf89f9..3677abeb 100644
--- a/packages/react/src/components/Input/index.ts
+++ b/packages/react/src/components/Input/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './Input';
-export type {InputProps} from './Input';
+export * from './Input';
diff --git a/packages/react/src/components/InputAdornment/InputAdornment.tsx b/packages/react/src/components/InputAdornment/InputAdornment.tsx
index 65850052..1d928d1c 100644
--- a/packages/react/src/components/InputAdornment/InputAdornment.tsx
+++ b/packages/react/src/components/InputAdornment/InputAdornment.tsx
@@ -16,30 +16,63 @@
  * under the License.
  */
 
-import MuiInputAdornment, {InputAdornmentProps as MuiInputAdornmentProps} from '@mui/material/InputAdornment';
+import MuiInputAdornment from '@mui/material/InputAdornment';
+import type {InputAdornmentTypeMap, InputAdornmentProps as MuiInputAdornmentProps} from '@mui/material/InputAdornment';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {ElementType, FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
-export type InputAdornmentProps<C extends ElementType = ElementType> = {
+export type InputAdornmentProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = InputAdornmentTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiInputAdornmentProps<C>, 'component'>;
+} & Omit<MuiInputAdornmentProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'InputAdornment';
 
-const InputAdornment: FC<InputAdornmentProps> & WithWrapperProps = <C extends ElementType>(
-  props: InputAdornmentProps<C>,
-): ReactElement => {
-  const {className, position, ...rest} = props;
-
-  const classes: string = clsx('oxygen-input-adornment', className);
+/**
+ * The Input Adornment can be used to add a prefix, a suffix, or an action to an input. For instance,
+ * you can use an icon button to hide or reveal the password.
+ *
+ * Demos:
+ *
+ * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field)
+ * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [InputAdornment API](https://mui.com/material-ui/api/input-adornment/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the InputAdornment component.
+ * @param ref - The ref to be forwarded to the MuiInputAdornment component.
+ * @returns The rendered InputAdornment component.
+ */
+const InputAdornment: OverridableComponent<InputAdornmentTypeMap<InputAdornmentProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, position, ...rest}: InputAdornmentProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-input-adornment', className);
 
-  return <MuiInputAdornment position={position} className={classes} {...rest} />;
-};
+    return <MuiInputAdornment ref={ref} position={position} className={classes} {...rest} />;
+  },
+) as OverridableComponent<InputAdornmentTypeMap<InputAdornmentProps>> & WithWrapperProps;
 
 InputAdornment.displayName = composeComponentDisplayName(COMPONENT_NAME);
 InputAdornment.muiName = COMPONENT_NAME;
-InputAdornment.defaultProps = {};
 
 export default InputAdornment;
diff --git a/packages/react/src/components/InputAdornment/index.ts b/packages/react/src/components/InputAdornment/index.ts
index 572ab11d..811fa7c9 100644
--- a/packages/react/src/components/InputAdornment/index.ts
+++ b/packages/react/src/components/InputAdornment/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './InputAdornment';
-export type {InputAdornmentProps} from './InputAdornment';
+export * from './InputAdornment';
+
+export {InputAdornmentTypeMap} from '@mui/material/InputAdornment';
diff --git a/packages/react/src/components/InputLabel/InputLabel.tsx b/packages/react/src/components/InputLabel/InputLabel.tsx
index 5ca0c4bd..a34e9df2 100644
--- a/packages/react/src/components/InputLabel/InputLabel.tsx
+++ b/packages/react/src/components/InputLabel/InputLabel.tsx
@@ -16,27 +16,64 @@
  * under the License.
  */
 
-import MuiInputLabel, {InputLabelProps as MuiInputLabelProps} from '@mui/material/InputLabel';
+import MuiInputLabel from '@mui/material/InputLabel';
+import type {InputLabelTypeMap, InputLabelProps as MuiInputLabelProps} from '@mui/material/InputLabel';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './input-label.scss';
 
-export type InputLabelProps = MuiInputLabelProps;
+export type InputLabelProps<
+  C extends ElementType = ElementType,
+  D extends React.ElementType = InputLabelTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiInputLabelProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'InputLabel';
 
-const InputLabel: FC<InputLabelProps> & WithWrapperProps = (props: InputLabelProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-input-label', className);
+/**
+ * The Form Label component is used to provide a label for the form inputs.
+ *
+ * Demos:
+ *
+ * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field)
+ * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [InputLabel API](https://mui.com/material-ui/api/input-label/)
+ * - inherits [FormLabel API](https://mui.com/material-ui/api/form-label/)
+ *
+ * @remarks
+ * - ✔️ Props of the [FormLabel](https://mui.com/material-ui/api/form-label/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the InputLabel component.
+ * @param ref - The ref to be forwarded to the MuiInputLabel component.
+ * @returns The rendered InputLabel component.
+ */
+const InputLabel: OverridableComponent<InputLabelTypeMap<InputLabelProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: InputLabelProps<C>,
+    ref: Ref<HTMLLabelElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-input-label', className);
 
-  return <MuiInputLabel className={classes} {...rest} />;
-};
+    return <MuiInputLabel ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<InputLabelTypeMap<InputLabelProps>> & WithWrapperProps;
 
 InputLabel.displayName = composeComponentDisplayName(COMPONENT_NAME);
 InputLabel.muiName = COMPONENT_NAME;
-InputLabel.defaultProps = {};
 
 export default InputLabel;
diff --git a/packages/react/src/components/InputLabel/index.ts b/packages/react/src/components/InputLabel/index.ts
index b81a120a..e484081c 100644
--- a/packages/react/src/components/InputLabel/index.ts
+++ b/packages/react/src/components/InputLabel/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './InputLabel';
-export type {InputLabelProps} from './InputLabel';
+export * from './InputLabel';
+
+export type {InputLabelPropsSizeOverrides, InputLabelTypeMap} from '@mui/material/InputLabel';
diff --git a/packages/react/src/components/LinearProgress/LinearProgress.tsx b/packages/react/src/components/LinearProgress/LinearProgress.tsx
index ac90ab8d..8c088048 100644
--- a/packages/react/src/components/LinearProgress/LinearProgress.tsx
+++ b/packages/react/src/components/LinearProgress/LinearProgress.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiLinearProgress, {LinearProgressProps as MuiLinearProgressProps} from '@mui/material/LinearProgress';
+import MuiLinearProgress from '@mui/material/LinearProgress';
+import type {LinearProgressProps as MuiLinearProgressProps} from '@mui/material/LinearProgress';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
@@ -26,16 +28,37 @@ export type LinearProgressProps = MuiLinearProgressProps;
 
 const COMPONENT_NAME: string = 'LinearProgress';
 
-const LinearProgress: FC<LinearProgressProps> & WithWrapperProps = (props: LinearProgressProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-linear-progress', className);
+/**
+ * The Linear Progress component is used to show the progress of a task in a linear fashion.
+ *
+ * Demos:
+ *
+ * TODO: Merge two progress components into one.
+ * - [Progress (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-circular-progress)
+ * - [Progress (MUI)](https://mui.com/material-ui/react-progress/)
+ *
+ * API:
+ *
+ * - [LinearProgress API](https://mui.com/material-ui/api/linear-progress/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the LinearProgress component.
+ * @param ref - The ref to be forwarded to the MuiLinearProgress component.
+ * @returns The rendered LinearProgress component.
+ */
+const LinearProgress: ForwardRefExoticComponent<LinearProgressProps> & WithWrapperProps = forwardRef(
+  ({className, ...rest}: LinearProgressProps, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-linear-progress', className);
 
-  return <MuiLinearProgress aria-label="progress-bar" className={classes} {...rest} />;
-};
+    return <MuiLinearProgress ref={ref} aria-label="progress-bar" className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<LinearProgressProps> & WithWrapperProps;
 
 LinearProgress.displayName = composeComponentDisplayName(COMPONENT_NAME);
 LinearProgress.muiName = COMPONENT_NAME;
-LinearProgress.defaultProps = {};
 
 export default LinearProgress;
diff --git a/packages/react/src/components/LinearProgress/index.ts b/packages/react/src/components/LinearProgress/index.ts
index 717d377d..139b485d 100644
--- a/packages/react/src/components/LinearProgress/index.ts
+++ b/packages/react/src/components/LinearProgress/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './LinearProgress';
-export type {LinearProgressProps} from './LinearProgress';
+export * from './LinearProgress';
+
+export {LinearProgressPropsColorOverrides} from '@mui/material/LinearProgress';
diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx
index 6b7e8a5b..a0192461 100644
--- a/packages/react/src/components/Link/Link.tsx
+++ b/packages/react/src/components/Link/Link.tsx
@@ -16,27 +16,66 @@
  * under the License.
  */
 
-import MuiLink, {LinkProps as MuiLinkProps} from '@mui/material/Link';
+import MuiLink from '@mui/material/Link';
+import type {LinkTypeMap, LinkProps as MuiLinkProps} from '@mui/material/Link';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './link.scss';
 
-export type LinkProps = MuiLinkProps;
+export type LinkProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = LinkTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiLinkProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Link';
 
-const Link: FC<LinkProps> & WithWrapperProps = (props: LinkProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-link', className);
+/**
+ * A Link allows you to easily customize anchor elements with your theme colors and typography styles.
+ *
+ * Demos:
+ *
+ * - [Breadcrumbs (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-breadcrumbs)
+ * - [Breadcrumbs (MUI)](https://mui.com/material-ui/react-breadcrumbs/)
+ * - [Links (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-link)
+ * - [Links (MUI)](https://mui.com/material-ui/react-link/)
+ *
+ * API:
+ *
+ * - [Link API](https://mui.com/material-ui/api/link/)
+ * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Link component.
+ * @param ref - The ref to be forwarded to the MuiLink component.
+ * @returns The rendered Link component.
+ */
+const Link: OverridableComponent<LinkTypeMap<LinkProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: LinkProps<C>,
+    ref: Ref<HTMLAnchorElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-link', className);
 
-  return <MuiLink className={classes} underline="hover" {...rest} />;
-};
+    return <MuiLink ref={ref} className={classes} underline="hover" {...rest} />;
+  },
+) as OverridableComponent<LinkTypeMap<LinkProps>> & WithWrapperProps;
 
 Link.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Link.muiName = COMPONENT_NAME;
-Link.defaultProps = {};
 
 export default Link;
diff --git a/packages/react/src/components/Link/index.ts b/packages/react/src/components/Link/index.ts
index f21831fa..7601761c 100644
--- a/packages/react/src/components/Link/index.ts
+++ b/packages/react/src/components/Link/index.ts
@@ -18,3 +18,5 @@
 
 export {default} from './Link';
 export type {LinkProps} from './Link';
+
+export type {LinkTypeMap, LinkBaseProps} from '@mui/material/Link';
diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx
index fb7a57e7..dcc94fd6 100644
--- a/packages/react/src/components/List/List.tsx
+++ b/packages/react/src/components/List/List.tsx
@@ -16,27 +16,62 @@
  * under the License.
  */
 
-import MuiList, {ListProps as MuiListProps} from '@mui/material/List';
+import MuiList from '@mui/material/List';
+import type {ListTypeMap, ListProps as MuiListProps} from '@mui/material/List';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list.scss';
 
-export type ListProps = MuiListProps;
+export type ListProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = ListTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiListProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'List';
 
-const List: FC<ListProps> & WithWrapperProps = (props: ListProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-list', className);
+/**
+ * A Lists is a continuous, vertical index of text or images.
+ *
+ * Demos:
+ *
+ * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list)
+ * - [Lists (MUI)](https://mui.com/material-ui/react-list/)
+ * - [Transfer List (Oxygen UI)](TODO: Add a link after implementing: Tracker: https://github.com/wso2/oxygen-ui/issues/2)
+ * - [Transfer List (MUI)](https://mui.com/material-ui/react-transfer-list/)
+ *
+ * API:
+ *
+ * - [List API](https://mui.com/material-ui/api/list/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the List component.
+ * @param ref - The ref to be forwarded to the MuiList component.
+ * @returns The rendered List component.
+ */
+const List: OverridableComponent<ListTypeMap<ListProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType>({className, ...rest}: ListProps<C>, ref: Ref<HTMLUListElement>): ReactElement => {
+    const classes: string = clsx('oxygen-list', className);
 
-  return <MuiList className={classes} {...rest} />;
-};
+    return <MuiList ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<ListTypeMap<ListProps>> & WithWrapperProps;
 
 List.displayName = composeComponentDisplayName(COMPONENT_NAME);
 List.muiName = COMPONENT_NAME;
-List.defaultProps = {};
 
 export default List;
diff --git a/packages/react/src/components/List/index.ts b/packages/react/src/components/List/index.ts
index fe765bd4..05bf674d 100644
--- a/packages/react/src/components/List/index.ts
+++ b/packages/react/src/components/List/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './List';
-export type {ListProps} from './List';
+export * from './List';
+
+export type {ListTypeMap, ExtendListTypeMap, ExtendList} from '@mui/material/List';
diff --git a/packages/react/src/components/ListItem/ListItem.tsx b/packages/react/src/components/ListItem/ListItem.tsx
index 05a6df70..9be4d2e5 100644
--- a/packages/react/src/components/ListItem/ListItem.tsx
+++ b/packages/react/src/components/ListItem/ListItem.tsx
@@ -16,31 +16,61 @@
  * under the License.
  */
 
-import MuiListItem, {ListItemProps as MuiListItemProps} from '@mui/material/ListItem';
+import MuiListItem from '@mui/material/ListItem';
+import type {ListItemProps as MuiListItemProps, ListItemTypeMap} from '@mui/material/ListItem';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {ElementType, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, MutableRefObject, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list-item.scss';
 
-export type ListItemProps<C extends ElementType = ElementType> = {
+export type ListItemProps<C extends ElementType = ElementType, D extends ElementType = 'li', P = {}> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiListItemProps<C>, 'component'>;
+} & Omit<MuiListItemProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'ListItem';
 
-const ListItem: ForwardRefExoticComponent<ListItemProps> & WithWrapperProps = forwardRef(
-  <C extends ElementType>(props: ListItemProps<C>, ref: MutableRefObject<HTMLLIElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * The List Item is a common list item that renders as an <li> by default.
+ *
+ * Demos:
+ *
+ * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list)
+ * - [Transfer List (Oxygen UI)](TODO: Add a link after implementing: Tracker: https://github.com/wso2/oxygen-ui/issues/2)
+ * - [Lists (MUI)](https://mui.com/material-ui/react-list/)
+ * - [Transfer List (MUI)](https://mui.com/material-ui/react-transfer-list/)
+ *
+ * API:
+ *
+ * - [ListItem API](https://mui.com/material-ui/api/list-item/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the ListItem component.
+ * @param ref - The ref to be forwarded to the MuiListItem component.
+ * @returns The rendered ListItem component.
+ */
+const ListItem: OverridableComponent<ListItemTypeMap<ListItemProps, 'li'>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: ListItemProps<C>,
+    ref: MutableRefObject<HTMLLIElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-list-item', className);
 
-    return <MuiListItem className={classes} ref={ref} {...rest} />;
+    return <MuiListItem ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<ListItemProps> & WithWrapperProps;
+) as OverridableComponent<ListItemTypeMap<ListItemProps, 'li'>> & WithWrapperProps;
 
 ListItem.displayName = composeComponentDisplayName(COMPONENT_NAME);
 ListItem.muiName = COMPONENT_NAME;
-ListItem.defaultProps = {};
 
 export default ListItem;
diff --git a/packages/react/src/components/ListItem/index.ts b/packages/react/src/components/ListItem/index.ts
index 773f905a..8e3f5404 100644
--- a/packages/react/src/components/ListItem/index.ts
+++ b/packages/react/src/components/ListItem/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './ListItem';
-export type {ListItemProps} from './ListItem';
+export * from './ListItem';
+
+export type {ListItemComponentsPropsOverrides, ListItemBaseProps, ListItemTypeMap} from '@mui/material/ListItem';
diff --git a/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx
index 0796d450..87f8be99 100644
--- a/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx
+++ b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiListItemAvatar, {ListItemAvatarProps as MuiListItemAvatarProps} from '@mui/material/ListItemAvatar';
+import MuiListItemAvatar from '@mui/material/ListItemAvatar';
+import type {ListItemAvatarProps as MuiListItemAvatarProps} from '@mui/material/ListItemAvatar';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list-item-avatar.scss';
@@ -27,16 +29,36 @@ export type ListItemAvatarProps = MuiListItemAvatarProps;
 
 const COMPONENT_NAME: string = 'ListItemAvatar';
 
-const ListItemAvatar: FC<ListItemAvatarProps> & WithWrapperProps = (props: ListItemAvatarProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-list-item-avatar', className);
+/**
+ * The List Item Avatar component is used to display an avatar in a list item.
+ *
+ * Demos:
+ *
+ * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list)
+ * - [Lists (MUI)](https://mui.com/material-ui/react-list/)
+ *
+ * API:
+ *
+ * - [ListItemAvatar API](https://mui.com/material-ui/api/list-item-avatar/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the ListItemAvatar component.
+ * @param ref - The ref to be forwarded to the MuiListItemAvatar component.
+ * @returns The rendered ListItemAvatar component.
+ */
+const ListItemAvatar: ForwardRefExoticComponent<ListItemAvatarProps> & WithWrapperProps = forwardRef(
+  ({className, ...rest}: ListItemAvatarProps, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-list-item-avatar', className);
 
-  return <MuiListItemAvatar className={classes} {...rest} />;
-};
+    return <MuiListItemAvatar ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<ListItemAvatarProps> & WithWrapperProps;
 
 ListItemAvatar.displayName = composeComponentDisplayName(COMPONENT_NAME);
 ListItemAvatar.muiName = COMPONENT_NAME;
-ListItemAvatar.defaultProps = {};
 
 export default ListItemAvatar;
diff --git a/packages/react/src/components/ListItemAvatar/index.ts b/packages/react/src/components/ListItemAvatar/index.ts
index a104803a..a457aee2 100644
--- a/packages/react/src/components/ListItemAvatar/index.ts
+++ b/packages/react/src/components/ListItemAvatar/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './ListItemAvatar';
-export type {ListItemAvatarProps} from './ListItemAvatar';
+export * from './ListItemAvatar';
diff --git a/packages/react/src/components/ListItemButton/ListItemButton.tsx b/packages/react/src/components/ListItemButton/ListItemButton.tsx
index b33f2dbc..18ccd998 100644
--- a/packages/react/src/components/ListItemButton/ListItemButton.tsx
+++ b/packages/react/src/components/ListItemButton/ListItemButton.tsx
@@ -16,31 +16,64 @@
  * under the License.
  */
 
-import MuiListItemButton, {ListItemButtonProps as MuiListItemButtonProps} from '@mui/material/ListItemButton';
+import MuiListItemButton from '@mui/material/ListItemButton';
+import type {ListItemButtonProps as MuiListItemButtonProps, ListItemButtonTypeMap} from '@mui/material/ListItemButton';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list-item-button.scss';
 
-export type ListItemButtonProps<C extends ElementType = ElementType> = {
+export type ListItemButtonProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = ListItemButtonTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiListItemButtonProps<C>, 'component'>;
+} & Omit<MuiListItemButtonProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'ListItemButton';
 
-const ListItemButton: ForwardRefExoticComponent<ListItemButtonProps> & WithWrapperProps = forwardRef(
-  (props: ListItemButtonProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * The List Item Button an action element to be used inside a list item.
+ *
+ * Demos:
+ *
+ * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list)
+ * - [Lists (MUI)](https://mui.com/material-ui/react-list/)
+ *
+ * API:
+ *
+ * - [ListItemButton API](https://mui.com/material-ui/api/list-item-button/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ *
+ * @remarks
+ * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the ListItemButton component.
+ * @param ref - The ref to be forwarded to the MuiListItemButton component.
+ * @returns The rendered ListItemButton component.
+ */
+const ListItemButton: OverridableComponent<ListItemButtonTypeMap<ListItemButtonProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: ListItemButtonProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-list-item-button', className);
 
-    return <MuiListItemButton className={classes} ref={ref} {...rest} />;
+    return <MuiListItemButton ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<ListItemButtonProps> & WithWrapperProps;
+) as OverridableComponent<ListItemButtonTypeMap<ListItemButtonProps>> & WithWrapperProps;
 
 ListItemButton.displayName = composeComponentDisplayName(COMPONENT_NAME);
 ListItemButton.muiName = COMPONENT_NAME;
-ListItemButton.defaultProps = {};
 
 export default ListItemButton;
diff --git a/packages/react/src/components/ListItemButton/index.ts b/packages/react/src/components/ListItemButton/index.ts
index 8fdd8a3a..86b65c08 100644
--- a/packages/react/src/components/ListItemButton/index.ts
+++ b/packages/react/src/components/ListItemButton/index.ts
@@ -18,3 +18,5 @@
 
 export {default} from './ListItemButton';
 export type {ListItemButtonProps} from './ListItemButton';
+
+export {ListItemButtonTypeMap, ListItemButtonBaseProps} from '@mui/material/ListItemButton';
diff --git a/packages/react/src/components/ListItemIcon/ListItemIcon.tsx b/packages/react/src/components/ListItemIcon/ListItemIcon.tsx
index 3a95f9ee..94a931bd 100644
--- a/packages/react/src/components/ListItemIcon/ListItemIcon.tsx
+++ b/packages/react/src/components/ListItemIcon/ListItemIcon.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiListItemIcon, {ListItemIconProps as MuiListItemIconProps} from '@mui/material/ListItemIcon';
+import MuiListItemIcon from '@mui/material/ListItemIcon';
+import type {ListItemIconProps as MuiListItemIconProps} from '@mui/material/ListItemIcon';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list-item-icon.scss';
@@ -27,16 +29,36 @@ export type ListItemIconProps = MuiListItemIconProps;
 
 const COMPONENT_NAME: string = 'ListItemIcon';
 
-const ListItemIcon: FC<ListItemIconProps> & WithWrapperProps = (props: ListItemIconProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-list-item-icon', className);
+/**
+ * The List Item Icon component is used to display an icon in a list item.
+ *
+ * Demos:
+ *
+ * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list)
+ * - [Lists (MUI)](https://mui.com/material-ui/react-list/)
+ *
+ * API:
+ *
+ * - [ListItemIcon API](https://mui.com/material-ui/api/list-item-icon/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the ListItemIcon component.
+ * @param ref - The ref to be forwarded to the MuiListItemIcon component.
+ * @returns The rendered ListItemIcon component.
+ */
+const ListItemIcon: ForwardRefExoticComponent<ListItemIconProps> & WithWrapperProps = forwardRef(
+  ({className, ...rest}: ListItemIconProps, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-list-item-icon', className);
 
-  return <MuiListItemIcon className={classes} {...rest} />;
-};
+    return <MuiListItemIcon ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<ListItemIconProps> & WithWrapperProps;
 
 ListItemIcon.displayName = composeComponentDisplayName(COMPONENT_NAME);
 ListItemIcon.muiName = COMPONENT_NAME;
-ListItemIcon.defaultProps = {};
 
 export default ListItemIcon;
diff --git a/packages/react/src/components/ListItemIcon/index.ts b/packages/react/src/components/ListItemIcon/index.ts
index f759e992..da191b73 100644
--- a/packages/react/src/components/ListItemIcon/index.ts
+++ b/packages/react/src/components/ListItemIcon/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './ListItemIcon';
-export type {ListItemIconProps} from './ListItemIcon';
+export * from './ListItemIcon';
diff --git a/packages/react/src/components/ListItemText/ListItemText.tsx b/packages/react/src/components/ListItemText/ListItemText.tsx
index ffc88023..1ca95b76 100644
--- a/packages/react/src/components/ListItemText/ListItemText.tsx
+++ b/packages/react/src/components/ListItemText/ListItemText.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiListItemText, {ListItemTextProps as MuiListItemTextProps} from '@mui/material/ListItemText';
+import MuiListItemText from '@mui/material/ListItemText';
+import type {ListItemTextProps as MuiListItemTextProps} from '@mui/material/ListItemText';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './list-item-text.scss';
@@ -27,16 +29,36 @@ export type ListItemTextProps = MuiListItemTextProps;
 
 const COMPONENT_NAME: string = 'ListItemText';
 
-const ListItemText: FC<ListItemTextProps> & WithWrapperProps = (props: ListItemTextProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-list-item-text', className);
+/**
+ * The List Item Text component is used to display text in a list item.
+ *
+ * Demos:
+ *
+ * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list)
+ * - [Lists (MUI)](https://mui.com/material-ui/react-list/)
+ *
+ * API:
+ *
+ * - [ListItemText API](https://mui.com/material-ui/api/list-item-text/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the ListItemText component.
+ * @param ref - The ref to be forwarded to the MuiListItemText component.
+ * @returns The rendered ListItemText component.
+ */
+const ListItemText: ForwardRefExoticComponent<ListItemTextProps> & WithWrapperProps = forwardRef(
+  ({className, ...rest}: ListItemTextProps, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-list-item-text', className);
 
-  return <MuiListItemText className={classes} {...rest} />;
-};
+    return <MuiListItemText ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<ListItemTextProps> & WithWrapperProps;
 
 ListItemText.displayName = composeComponentDisplayName(COMPONENT_NAME);
 ListItemText.muiName = COMPONENT_NAME;
-ListItemText.defaultProps = {};
 
 export default ListItemText;
diff --git a/packages/react/src/components/ListItemText/index.ts b/packages/react/src/components/ListItemText/index.ts
index 90fdd71c..85e3c763 100644
--- a/packages/react/src/components/ListItemText/index.ts
+++ b/packages/react/src/components/ListItemText/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './ListItemText';
-export type {ListItemTextProps} from './ListItemText';
+export * from './ListItemText';
diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx
index aea59089..57312173 100644
--- a/packages/react/src/components/Menu/Menu.tsx
+++ b/packages/react/src/components/Menu/Menu.tsx
@@ -16,24 +16,56 @@
  * under the License.
  */
 
-import MuiMenu, {MenuProps as MuiMenuProps} from '@mui/material/Menu';
+import MuiMenu from '@mui/material/Menu';
+import type {MenuProps as MuiMenuProps} from '@mui/material/Menu';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement, ForwardRefExoticComponent} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './menu.scss';
 
-export type MenuProps = MuiMenuProps;
+export type MenuProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiMenuProps, 'component'>;
 
 const COMPONENT_NAME: string = 'Menu';
 
-const Menu: FC<MenuProps> & WithWrapperProps = (props: MenuProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-menu', className);
+/**
+ * A Menus display a list of choices on temporary surfaces.
+ *
+ * Demos:
+ *
+ * - [App Bar (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-app-bar)
+ * - [App Bar (MUI)](https://mui.com/material-ui/react-app-bar/)
+ * - [Menu (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-menu)
+ * - [Menu (MUI)](https://mui.com/material-ui/react-menu/)
+ *
+ * API:
+ *
+ * - [Menu API](https://mui.com/material-ui/api/menu/)
+ * - inherits [Popover API](https://mui.com/material-ui/api/popover/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - FIXME: ⚠️ `component` prop is temporarily not supported due to https://github.com/wso2/oxygen-ui/issues/283
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the List component.
+ * @param ref - The ref to be forwarded to the MuiList component.
+ * @returns The rendered List component.
+ */
+const Menu: ForwardRefExoticComponent<MenuProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>({className, ...rest}: MenuProps<C>, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-menu', className);
 
-  return <MuiMenu className={classes} {...rest} />;
-};
+    return <MuiMenu ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<MenuProps> & WithWrapperProps;
 
 Menu.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Menu.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/Menu/index.ts b/packages/react/src/components/Menu/index.ts
index 7683b4e7..f480dd7c 100644
--- a/packages/react/src/components/Menu/index.ts
+++ b/packages/react/src/components/Menu/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './Menu';
-export type {MenuProps} from './Menu';
+export * from './Menu';
diff --git a/packages/react/src/components/MenuItem/MenuItem.tsx b/packages/react/src/components/MenuItem/MenuItem.tsx
index c3d0d7bd..4c7ed9ae 100644
--- a/packages/react/src/components/MenuItem/MenuItem.tsx
+++ b/packages/react/src/components/MenuItem/MenuItem.tsx
@@ -16,24 +16,62 @@
  * under the License.
  */
 
-import MuiMenuItem, {MenuItemProps as MuiMenuItemProps} from '@mui/material/MenuItem';
+import MuiMenuItem from '@mui/material/MenuItem';
+import type {MenuItemTypeMap, MenuItemProps as MuiMenuItemProps} from '@mui/material/MenuItem';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './menu-item.scss';
 
-export type MenuItemProps = MuiMenuItemProps;
+export type MenuItemProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = MenuItemTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiMenuItemProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'MenuItem';
 
-const MenuItem: FC<MenuItemProps> & WithWrapperProps = (props: MenuItemProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-menu-item', className);
+/**
+ * The Menu Item component is used to display a single item inside a menu.
+ *
+ * Demos:
+ *
+ * - [Menu (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-menu)
+ * - [Menu (MUI)](https://mui.com/material-ui/react-menu/)
+ *
+ * API:
+ *
+ * - [MenuItem API](https://mui.com/material-ui/api/menu-item/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ *
+ * @remarks
+ * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the MenuItem component.
+ * @param ref - The ref to be forwarded to the MuiMenuItem component.
+ * @returns The rendered MenuItem component.
+ */
+const MenuItem: OverridableComponent<MenuItemTypeMap<MenuItemProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: MenuItemProps<C>,
+    ref: Ref<HTMLLIElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-menu-item', className);
 
-  return <MuiMenuItem className={classes} {...rest} />;
-};
+    return <MuiMenuItem ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<MenuItemTypeMap<MenuItemProps>> & WithWrapperProps;
 
 MenuItem.displayName = composeComponentDisplayName(COMPONENT_NAME);
 MenuItem.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/MenuItem/index.tsx b/packages/react/src/components/MenuItem/index.tsx
index 611f25f1..21637447 100644
--- a/packages/react/src/components/MenuItem/index.tsx
+++ b/packages/react/src/components/MenuItem/index.tsx
@@ -17,4 +17,6 @@
  */
 
 export {default} from './MenuItem';
-export type {MenuItemProps} from './MenuItem';
+export * from './MenuItem';
+
+export {MenuItemTypeMap} from '@mui/material/MenuItem';
diff --git a/packages/react/src/components/Navbar/Navbar.tsx b/packages/react/src/components/Navbar/Navbar.tsx
index 62eddc22..8623c428 100644
--- a/packages/react/src/components/Navbar/Navbar.tsx
+++ b/packages/react/src/components/Navbar/Navbar.tsx
@@ -18,11 +18,20 @@
 
 import {BarsIcon} from '@oxygen-ui/react-icons';
 import clsx from 'clsx';
-import {FC, ReactElement, MouseEvent, Fragment, ReactNode} from 'react';
+import {forwardRef, Fragment} from 'react';
+import type {
+  ReactElement,
+  MouseEvent,
+  ReactNode,
+  ElementType,
+  ForwardRefExoticComponent,
+  MutableRefObject,
+} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import CollapsibleNavbarItem from '../CollapsibleNavbarItem';
+import type {CollapsibleNavbarItemProps} from '../CollapsibleNavbarItem';
 import Divider from '../Divider';
 import Drawer, {DrawerProps} from '../Drawer';
 import IconButton from '../IconButton';
@@ -32,7 +41,7 @@ import type {NavbarItemProps} from '../NavbarItem';
 import Typography from '../Typography';
 import './navbar.scss';
 
-export interface NavbarProps extends DrawerProps {
+export type NavbarProps<C extends ElementType = ElementType> = DrawerProps<C> & {
   /**
    * Is the Navbar collapsible. If `true`, a hamburger will be shown.
    */
@@ -54,7 +63,7 @@ export interface NavbarProps extends DrawerProps {
    * @default <BarsIcon />
    */
   toggleIcon?: ReactNode;
-}
+};
 
 export type NavbarItems = {
   /**
@@ -73,129 +82,159 @@ export type NavbarItems = {
 
 const COMPONENT_NAME: string = 'Navbar';
 
-const Navbar: FC<NavbarProps> & WithWrapperProps = (props: NavbarProps): ReactElement => {
-  const {className, fill, onClose, items, collapsible, open, onOpen, toggleIcon, ...rest} = props;
-
-  const classes: string = clsx(
-    'oxygen-navbar',
+/**
+ * The Navbar component is used to provide a navigation bar for the application.
+ *
+ * Demos:
+ *
+ * - [Navvar (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-navbar)
+ *
+ * API:
+ *
+ * - inherits [Drawer API](https://mui.com/material-ui/api/drawer/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Drawer](https://mui.com/material-ui/api/drawer/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Navbar component.
+ * @param ref - The ref to be forwarded to the Drawer component.
+ * @returns The rendered Navbar component.
+ */
+const Navbar: ForwardRefExoticComponent<NavbarProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
     {
-      collapsible,
-      [`${fill}`]: fill,
+      className,
       fill,
-      open,
-    },
-    className,
-  );
+      onClose,
+      items,
+      collapsible = true,
+      open = true,
+      onOpen,
+      toggleIcon = <BarsIcon />,
+      ...rest
+    }: NavbarProps<C>,
+    ref: MutableRefObject<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx(
+      'oxygen-navbar',
+      {
+        collapsible,
+        [`${fill}`]: fill,
+        fill,
+        open,
+      },
+      className,
+    );
 
-  const handleCollapsibleHamburgerClick = (e: MouseEvent<HTMLButtonElement>): void => {
-    if (open && onClose && typeof onClose === 'function') {
-      onClose(e, null);
-      return;
-    }
+    const handleCollapsibleHamburgerClick = (e: MouseEvent<HTMLButtonElement>): void => {
+      if (open && onClose && typeof onClose === 'function') {
+        onClose(e, null);
+        return;
+      }
 
-    if (onOpen && typeof onOpen === 'function') {
-      onOpen();
-    }
-  };
+      if (onOpen && typeof onOpen === 'function') {
+        onOpen();
+      }
+    };
 
-  const renderDivider = (itemSetIndex: number, heading: string): ReactElement => {
-    if (itemSetIndex !== 0 && !heading) {
-      return <Divider className="oxygen-navbar-list-item-divider" />;
-    }
-    if (heading) {
-      return (
-        <Divider
-          className="oxygen-navbar-list-item-divider"
-          classes={{wrapper: 'oxygen-navbar-list-item-divider-wrapper'}}
-          textAlign="left"
-        >
-          <Typography variant="overline">{heading}</Typography>
-        </Divider>
-      );
-    }
-    return null;
-  };
+    const renderDivider = (itemSetIndex: number, heading: string): ReactElement => {
+      if (itemSetIndex !== 0 && !heading) {
+        return <Divider className="oxygen-navbar-list-item-divider" />;
+      }
+      if (heading) {
+        return (
+          <Divider
+            className="oxygen-navbar-list-item-divider"
+            classes={{wrapper: 'oxygen-navbar-list-item-divider-wrapper'}}
+            textAlign="left"
+          >
+            <Typography variant="overline">{heading}</Typography>
+          </Divider>
+        );
+      }
+      return null;
+    };
 
-  return (
-    <Drawer variant="permanent" className={classes} onClose={onClose} open={open} {...rest}>
-      {collapsible && (
-        <>
-          <div className="oxygen-navbar-collapsible-hamburger">
-            <IconButton onClick={handleCollapsibleHamburgerClick} aria-label="nav item icon">
-              {toggleIcon}
-            </IconButton>
-          </div>
-          <Divider className="oxygen-navbar-collapsible-divider" />
-        </>
-      )}
-      <Box className="oxygen-navbar-list-box">
-        {items?.map((navbarItems: NavbarItems, itemsIndex: number) => {
-          const navBarListClass: string = clsx('oxygen-navbar-list', {'no-heading': !navbarItems.label});
+    return (
+      <Drawer ref={ref} variant="permanent" className={classes} onClose={onClose} open={open} {...rest}>
+        {collapsible && (
+          <>
+            <div className="oxygen-navbar-collapsible-hamburger">
+              <IconButton onClick={handleCollapsibleHamburgerClick} aria-label="nav item icon">
+                {toggleIcon}
+              </IconButton>
+            </div>
+            <Divider className="oxygen-navbar-collapsible-divider" />
+          </>
+        )}
+        <Box className="oxygen-navbar-list-box">
+          {items?.map((navbarItems: NavbarItems, itemsIndex: number) => {
+            const navBarListClass: string = clsx('oxygen-navbar-list', {'no-heading': !navbarItems.label});
 
-          return (
-            <Fragment key={navbarItems.id}>
-              <div>{renderDivider(itemsIndex, navbarItems.label)}</div>
-              <List className={navBarListClass}>
-                {navbarItems?.items?.map(
-                  ({
-                    expanded,
-                    icon,
-                    id,
-                    selected,
-                    items: navbarSubItems,
-                    label,
-                    onClick,
-                    tag,
-                    tagClassName,
-                    ...otherListItemProps
-                  }: NavbarItemProps) =>
-                    navbarSubItems ? (
-                      <CollapsibleNavbarItem
-                        component="li"
-                        expanded={expanded}
-                        icon={icon}
-                        id={id}
-                        selected={selected}
-                        items={navbarSubItems}
-                        label={label}
-                        onClick={onClick}
-                        tag={tag}
-                        tagClassName={tagClassName}
-                        fill={fill}
-                        open={open}
-                        {...otherListItemProps}
-                      />
-                    ) : (
-                      <NavbarItem
-                        component="li"
-                        icon={icon}
-                        id={id}
-                        selected={selected}
-                        label={label}
-                        onClick={onClick}
-                        tag={tag}
-                        tagClassName={tagClassName}
-                        fill={fill}
-                        open={open}
-                        {...otherListItemProps}
-                      />
-                    ),
-                )}
-              </List>
-            </Fragment>
-          );
-        })}
-      </Box>
-    </Drawer>
-  );
-};
+            return (
+              <Fragment key={navbarItems.id}>
+                <div>{renderDivider(itemsIndex, navbarItems.label)}</div>
+                <List className={navBarListClass}>
+                  {navbarItems?.items?.map(
+                    ({
+                      expanded,
+                      icon,
+                      id,
+                      selected,
+                      items: navbarSubItems,
+                      label,
+                      onClick,
+                      tag,
+                      tagClassName,
+                      ...otherListItemProps
+                    }: CollapsibleNavbarItemProps) =>
+                      navbarSubItems ? (
+                        <CollapsibleNavbarItem
+                          component="li"
+                          expanded={expanded}
+                          icon={icon}
+                          id={id}
+                          selected={selected}
+                          items={navbarSubItems}
+                          label={label}
+                          onClick={onClick}
+                          tag={tag}
+                          tagClassName={tagClassName}
+                          fill={fill}
+                          open={open}
+                          {...otherListItemProps}
+                        />
+                      ) : (
+                        <NavbarItem
+                          component="li"
+                          icon={icon}
+                          id={id}
+                          selected={selected}
+                          label={label}
+                          onClick={onClick}
+                          tag={tag}
+                          tagClassName={tagClassName}
+                          fill={fill}
+                          open={open}
+                          {...otherListItemProps}
+                        />
+                      ),
+                  )}
+                </List>
+              </Fragment>
+            );
+          })}
+        </Box>
+      </Drawer>
+    );
+  },
+) as ForwardRefExoticComponent<NavbarProps> & WithWrapperProps;
 
 Navbar.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Navbar.muiName = COMPONENT_NAME;
-Navbar.defaultProps = {
-  collapsible: true,
-  open: true,
-  toggleIcon: <BarsIcon />,
-};
 
 export default Navbar;
diff --git a/packages/react/src/components/Navbar/index.ts b/packages/react/src/components/Navbar/index.ts
index 60745cbd..045a5cc0 100644
--- a/packages/react/src/components/Navbar/index.ts
+++ b/packages/react/src/components/Navbar/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './Navbar';
-export type {NavbarItems} from './Navbar';
+export * from './Navbar';
diff --git a/packages/react/src/components/NavbarItem/NavbarItem.tsx b/packages/react/src/components/NavbarItem/NavbarItem.tsx
index 0a0ae311..ff1418e4 100644
--- a/packages/react/src/components/NavbarItem/NavbarItem.tsx
+++ b/packages/react/src/components/NavbarItem/NavbarItem.tsx
@@ -16,52 +16,78 @@
  * under the License.
  */
 
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {ForwardRefExoticComponent, MutableRefObject, ReactElement, ReactNode, forwardRef} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement, ReactNode} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import Chip from '../Chip';
-import type {ListItemProps} from '../ListItem';
 import ListItemButton from '../ListItemButton';
+import type {ListItemButtonProps, ListItemButtonTypeMap} from '../ListItemButton';
 import ListItemIcon from '../ListItemIcon';
 import ListItemText from '../ListItemText';
-import type {NavbarProps} from '../Navbar/Navbar';
+import type {NavbarProps} from '../Navbar';
 import Tooltip from '../Tooltip';
 import './navbar-item.scss';
 
-export interface NavbarItemProps extends ListItemProps, Pick<NavbarProps, 'fill' | 'open'> {
-  /**
-   * Icon for the Navbar item.
-   * @example <HomeIcon />
-   */
-  icon?: ReactNode;
-  /**
-   * Unique id for the item.
-   */
-  id?: string;
-  /**
-   * Label to display on the UI.
-   * @example Overview
-   */
-  label: ReactNode;
-  /**
-   * Tag to display on the UI.
-   * @example Beta
-   */
-  tag?: string;
-  /**
-   * Tag color variant.
-   */
-  tagClassName?: 'premium' | 'beta' | 'new' | 'experimental';
-}
+export type NavbarItemProps<C extends ElementType = ElementType> = ListItemButtonProps<C> &
+  Pick<NavbarProps, 'fill' | 'open'> & {
+    /**
+     * Icon for the Navbar item.
+     * @example <HomeIcon />
+     */
+    icon?: ReactNode;
+    /**
+     * Unique id for the item.
+     */
+    id?: string;
+    /**
+     * Label to display on the UI.
+     * @example Overview
+     */
+    label: ReactNode;
+    /**
+     * Tag to display on the UI.
+     * @example Beta
+     */
+    tag?: string;
+    /**
+     * Tag color variant.
+     */
+    tagClassName?: 'premium' | 'beta' | 'new' | 'experimental';
+  };
 
 const COMPONENT_NAME: string = 'NavbarItem';
 
-const NavbarItem: ForwardRefExoticComponent<NavbarItemProps> & WithWrapperProps = forwardRef(
-  (props: NavbarItemProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, component, fill, icon, id, label, onClick, href, selected, tag, tagClassName, open, ...rest} =
-      props;
+/**
+ * The Navbar Item component is used to represent an item in the Navbar.
+ *
+ * Demos:
+ *
+ * - [Navbar Item (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-navbar-item)
+ *
+ * API:
+ *
+ * - inherits [ListItemButton API](https://mui.com/material-ui/api/list-item-button/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [ListItemButton](https://mui.com/material-ui/api/list-item-button/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the NavbarItem component.
+ * @param ref - The ref to be forwarded to the Box component.
+ * @returns The rendered NavbarItem component.
+ */
+const NavbarItem: OverridableComponent<ListItemButtonTypeMap<NavbarItemProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, fill, icon, id, label, onClick, selected, tag, tagClassName, open = true, ...rest}: NavbarItemProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx(
       'oxygen-navbar-item',
       {
@@ -73,7 +99,7 @@ const NavbarItem: ForwardRefExoticComponent<NavbarItemProps> & WithWrapperProps
     );
 
     return (
-      <Box ref={ref} className={classes} component={component}>
+      <Box ref={ref} className={classes}>
         <Tooltip ref={ref} key={id} title={!open && label} placement="right">
           <ListItemButton selected={selected} className={clsx({selected})} onClick={onClick} {...rest}>
             <ListItemIcon>{icon}</ListItemIcon>
@@ -90,13 +116,9 @@ const NavbarItem: ForwardRefExoticComponent<NavbarItemProps> & WithWrapperProps
       </Box>
     );
   },
-) as ForwardRefExoticComponent<NavbarItemProps> & WithWrapperProps;
+) as OverridableComponent<ListItemButtonTypeMap<NavbarItemProps>> & WithWrapperProps;
 
 NavbarItem.displayName = composeComponentDisplayName(COMPONENT_NAME);
 NavbarItem.muiName = COMPONENT_NAME;
-NavbarItem.defaultProps = {
-  collapsible: true,
-  open: true,
-};
 
 export default NavbarItem;
diff --git a/packages/react/src/components/NavbarItem/index.tsx b/packages/react/src/components/NavbarItem/index.tsx
index 84a89b72..6dad58a6 100644
--- a/packages/react/src/components/NavbarItem/index.tsx
+++ b/packages/react/src/components/NavbarItem/index.tsx
@@ -17,4 +17,4 @@
  */
 
 export {default} from './NavbarItem';
-export type {NavbarItemProps} from './NavbarItem';
+export * from './NavbarItem';
diff --git a/packages/react/src/components/OutlinedInput/OutlinedInput.tsx b/packages/react/src/components/OutlinedInput/OutlinedInput.tsx
index 18d30705..49ebcfc8 100644
--- a/packages/react/src/components/OutlinedInput/OutlinedInput.tsx
+++ b/packages/react/src/components/OutlinedInput/OutlinedInput.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiOutlinedInput, {OutlinedInputProps as MuiOutlinedInputProps} from '@mui/material/OutlinedInput';
+import MuiOutlinedInput from '@mui/material/OutlinedInput';
+import type {OutlinedInputProps as MuiOutlinedInputProps} from '@mui/material/OutlinedInput';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './outlined-input.scss';
@@ -27,16 +29,37 @@ export type OutlinedInputProps = MuiOutlinedInputProps;
 
 const COMPONENT_NAME: string = 'OutlinedInput';
 
-const OutlinedInput: FC<OutlinedInputProps> & WithWrapperProps = (props: OutlinedInputProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-outlined-input', className);
+/**
+ * The Outlined Input component is used to render a text input field with an outlined border.
+ *
+ * Demos:
+ *
+ * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field)
+ * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
+ * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the OutlinedInput component.
+ * @param ref - The ref to be forwarded to the MuiOutlinedInput component.
+ * @returns The rendered OutlinedInput component.
+ */
+const OutlinedInput: ForwardRefExoticComponent<OutlinedInputProps> & WithWrapperProps = forwardRef(
+  ({className, ...rest}: OutlinedInputProps, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-outlined-input', className);
 
-  return <MuiOutlinedInput className={classes} {...rest} />;
-};
+    return <MuiOutlinedInput ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<OutlinedInputProps> & WithWrapperProps;
 
 OutlinedInput.displayName = composeComponentDisplayName(COMPONENT_NAME);
 OutlinedInput.muiName = COMPONENT_NAME;
-OutlinedInput.defaultProps = {};
 
 export default OutlinedInput;
diff --git a/packages/react/src/components/OutlinedInput/index.ts b/packages/react/src/components/OutlinedInput/index.ts
index f0beb81a..cd840b65 100644
--- a/packages/react/src/components/OutlinedInput/index.ts
+++ b/packages/react/src/components/OutlinedInput/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './OutlinedInput';
-export type {OutlinedInputProps} from './OutlinedInput';
+export * from './OutlinedInput';
diff --git a/packages/react/src/components/Paper/Paper.tsx b/packages/react/src/components/Paper/Paper.tsx
index 7bdc6d91..a2616101 100644
--- a/packages/react/src/components/Paper/Paper.tsx
+++ b/packages/react/src/components/Paper/Paper.tsx
@@ -16,30 +16,64 @@
  * under the License.
  */
 
-import MuiPaper, {PaperProps as MuiPaperProps} from '@mui/material/Paper';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiPaper from '@mui/material/Paper';
+import type {PaperProps as MuiPaperProps, PaperTypeMap} from '@mui/material/Paper';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react';
+import {forwardRef} from 'react';
+import type {ReactElement, Ref, ElementType} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
-export type PaperProps<C extends ElementType = ElementType> = {
+export type PaperProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = PaperTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiPaperProps<C>, 'component'>;
+} & Omit<MuiPaperProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Paper';
 
-const Paper: ForwardRefExoticComponent<PaperProps> & WithWrapperProps = forwardRef(
-  <C extends ElementType>(props: PaperProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * The Paper component is a container for displaying content on an elevated surface.
+ *
+ * Demos:
+ *
+ * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card)
+ * - [Card (MUI)](https://mui.com/material-ui/react-card/)
+ * - [Paper (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-paper)
+ * - [Paper](https://mui.com/material-ui/react-paper/)
+ *
+ * API:
+ *
+ * - [Paper API](https://mui.com/material-ui/api/paper/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Paper component.
+ * @param ref - The ref to be forwarded to the MuiPaper component.
+ * @returns The rendered Paper component.
+ */
+const Paper: OverridableComponent<PaperTypeMap<PaperProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: PaperProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-paper', className);
 
     return <MuiPaper className={classes} {...rest} ref={ref} />;
   },
-) as ForwardRefExoticComponent<PaperProps> & WithWrapperProps;
+) as OverridableComponent<PaperTypeMap<PaperProps>> & WithWrapperProps;
 
 Paper.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Paper.muiName = COMPONENT_NAME;
-Paper.defaultProps = {};
 
 export default Paper;
diff --git a/packages/react/src/components/Paper/index.ts b/packages/react/src/components/Paper/index.ts
index cff0130e..2251b4e8 100644
--- a/packages/react/src/components/Paper/index.ts
+++ b/packages/react/src/components/Paper/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Paper';
-export type {PaperProps} from './Paper';
+export * from './Paper';
+
+export type {PaperPropsVariantOverrides, PaperTypeMap} from '@mui/material/Paper';
diff --git a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx
index 54b7c8c9..88ffaf43 100644
--- a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx
+++ b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx
@@ -17,28 +17,39 @@
  */
 
 import {FlagOutlined} from '@mui/icons-material';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import Select, {SelectChangeEvent, SelectProps as MuiSelectProps} from '@mui/material/Select';
 import clsx from 'clsx';
-import {ChangeEvent, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement, useState} from 'react';
+import {forwardRef, useState} from 'react';
+import type {ChangeEvent, ElementType, Ref, ReactElement} from 'react';
 import Flag from 'react-world-flags';
-import {countries, Country} from './constants';
+import {countries, Country} from './constants/countries';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
-import Box, {BoxProps} from '../Box';
+import Box from '../Box';
+import type {BoxProps, BoxTypeMap} from '../Box';
 import InputLabel from '../InputLabel';
+import type {InputLabelProps} from '../InputLabel';
 import ListItemIcon from '../ListItemIcon';
 import MenuItem from '../MenuItem';
-import './phone-number-input.scss';
-import OutlinedInput, {OutlinedInputProps as MuiOutlinedInputProps} from '../OutlinedInput';
+import OutlinedInput from '../OutlinedInput';
+import type {OutlinedInputProps} from '../OutlinedInput';
 import Typography from '../Typography';
+import './phone-number-input.scss';
 
-export interface PhoneNumberInputProps extends BoxProps {
+export type PhoneNumberInputProps<C extends ElementType = ElementType> = BoxProps<C> & {
+  /**
+   * Props sent to the InputLabel component.
+   *
+   * Refer props: {@link https://mui.com/material-ui/api/input-label/}
+   */
+  InputLabelProps?: InputLabelProps;
   /**
    * Props sent to the OutlinedInput component.
    *
    * Refer props: {@link https://mui.com/material-ui/api/outlined-input/}
    */
-  OutlinedInputProps?: Omit<MuiOutlinedInputProps, 'id' | 'label' | 'placeholder' | 'value' | 'type'>;
+  OutlinedInputProps?: Omit<OutlinedInputProps, 'id' | 'label' | 'placeholder' | 'value' | 'type'>;
   /**
    * Props sent to the Select component.
    *
@@ -51,6 +62,10 @@ export interface PhoneNumberInputProps extends BoxProps {
    * @example '+94'
    */
   dialCodeValue?: string;
+  /**
+   * Label for the phone number input.
+   */
+  label: string;
   /**
    * Callback function to be called when the dialCode or phoneNumber changes.
    */
@@ -65,13 +80,35 @@ export interface PhoneNumberInputProps extends BoxProps {
    * Placeholder text for the phone number input.
    */
   placeholder?: string;
-}
+};
 
 const COMPONENT_NAME: string = 'PhoneNumberInput';
 
-const PhoneNumberInput: ForwardRefExoticComponent<PhoneNumberInputProps> & WithWrapperProps = forwardRef(
-  (props: PhoneNumberInputProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {
+/**
+ * The Phone Number Input component is used to get the phone number input from the user.
+ *
+ * Demos:
+ *
+ * - [Phone Number Input (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-phone-number-input)
+ *
+ * API:
+ *
+ * - inherits [Box API](https://mui.com/material-ui/api/box/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the PhoneNumberInput component.
+ * @param ref - The ref to be forwarded to the Box component.
+ * @returns The rendered PhoneNumberInput component.
+ */
+const PhoneNumberInput: OverridableComponent<BoxTypeMap<PhoneNumberInputProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {
       className,
       dialCodeValue,
       label,
@@ -82,8 +119,9 @@ const PhoneNumberInput: ForwardRefExoticComponent<PhoneNumberInputProps> & WithW
       placeholder,
       SelectProps,
       ...rest
-    } = props;
-
+    }: PhoneNumberInputProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-phone-number-input', className);
 
     const [dialCode, setDialCode] = useState<string>(dialCodeValue ?? countries[0].dialCode);
@@ -161,10 +199,9 @@ const PhoneNumberInput: ForwardRefExoticComponent<PhoneNumberInputProps> & WithW
       </Box>
     );
   },
-) as ForwardRefExoticComponent<PhoneNumberInputProps> & WithWrapperProps;
+) as OverridableComponent<BoxTypeMap<PhoneNumberInputProps>> & WithWrapperProps;
 
 PhoneNumberInput.displayName = composeComponentDisplayName(COMPONENT_NAME);
 PhoneNumberInput.muiName = COMPONENT_NAME;
-PhoneNumberInput.defaultProps = {};
 
 export default PhoneNumberInput;
diff --git a/packages/react/src/components/PhoneNumberInput/index.ts b/packages/react/src/components/PhoneNumberInput/index.ts
index d8320007..f2025c60 100644
--- a/packages/react/src/components/PhoneNumberInput/index.ts
+++ b/packages/react/src/components/PhoneNumberInput/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './PhoneNumberInput';
-export type {PhoneNumberInputProps} from './PhoneNumberInput';
+export * from './PhoneNumberInput';
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
index 9331a27f..134f258a 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/Popover/Popover.tsx
@@ -16,28 +16,60 @@
  * under the License.
  */
 
-import MuiPopover, {PopoverProps as MuiPopoverProps} from '@mui/material/Popover';
+import MuiPopover from '@mui/material/Popover';
+import type {PopoverProps as MuiPopoverProps} from '@mui/material/Popover';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ReactElement, Ref, ElementType, ForwardRefExoticComponent} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
-export type PopoverProps = MuiPopoverProps;
+export type PopoverProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiPopoverProps, 'component'>;
 
 const COMPONENT_NAME: string = 'Popover';
 
+/**
+ * A Popover can be used to display some content on top of another.
+ *
+ * Demos:
+ *
+ * - [Menu (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-menu)
+ * - [Menu (MUI)](https://mui.com/material-ui/react-menu/)
+ * - [Popover (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/utils-popover)
+ * - [Popover (MUI)](https://mui.com/material-ui/react-popover/)
+ *
+ * API:
+ *
+ * - [Popover API](https://mui.com/material-ui/api/popover/)
+ * - inherits [Modal API](https://mui.com/material-ui/api/modal/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Modal](https://mui.com/material-ui/api/modal/) component are also available.
+ * - FIXME: ⚠️ `component` prop is temporarily not supported due to https://github.com/wso2/oxygen-ui/issues/283
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Popover component.
+ * @param ref - The ref to be forwarded to the MuiPopover component.
+ * @returns The rendered Popover component.
+ */
 const Popover: ForwardRefExoticComponent<PopoverProps> & WithWrapperProps = forwardRef(
-  (props: PopoverProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: PopoverProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-popover', className);
 
     return <MuiPopover className={classes} {...rest} ref={ref} />;
   },
-) as unknown as ForwardRefExoticComponent<PopoverProps> & WithWrapperProps;
+) as ForwardRefExoticComponent<PopoverProps> & WithWrapperProps;
 
 Popover.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Popover.muiName = COMPONENT_NAME;
-Popover.defaultProps = {};
 
 export default Popover;
diff --git a/packages/react/src/components/Popover/index.ts b/packages/react/src/components/Popover/index.ts
index e6be37bf..a9513f52 100644
--- a/packages/react/src/components/Popover/index.ts
+++ b/packages/react/src/components/Popover/index.ts
@@ -17,4 +17,7 @@
  */
 
 export {default} from './Popover';
-export type {PopoverProps} from './Popover';
+export * from './Popover';
+
+export type {PopoverActions, PopoverReference, PopoverPosition, PopoverOrigin} from '@mui/material/Popover';
+export {getOffsetTop, getOffsetLeft} from '@mui/material/Popover';
diff --git a/packages/react/src/components/Radio/Radio.tsx b/packages/react/src/components/Radio/Radio.tsx
index c2bba7e6..e2d85bc1 100644
--- a/packages/react/src/components/Radio/Radio.tsx
+++ b/packages/react/src/components/Radio/Radio.tsx
@@ -16,28 +16,60 @@
  * under the License.
  */
 
-import MuiRadio, {RadioProps as MuiRadioProps} from '@mui/material/Radio';
+import {ButtonBaseTypeMap} from '@mui/material/ButtonBase';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiRadio from '@mui/material/Radio';
+import type {RadioProps as MuiRadioProps} from '@mui/material/Radio';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ReactElement, Ref, ElementType} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
-export type RadioProps = MuiRadioProps;
+export type RadioProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiRadioProps, 'component'>;
 
 const COMPONENT_NAME: string = 'Radio';
 
-const Radio: ForwardRefExoticComponent<RadioProps> & WithWrapperProps = forwardRef(
-  (props: RadioProps, ref: MutableRefObject<HTMLButtonElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * A Radio component is used to allow users to select a single option from a list of options.
+ *
+ * Demos:
+ *
+ * - [Radio Group (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-radio-group)
+ * - [Radio Group (MUI)](https://mui.com/material-ui/react-radio-button/)
+ *
+ * API:
+ *
+ * - [Radio API](https://mui.com/material-ui/api/radio/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ *
+ * @remarks
+ * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Radio component.
+ * @param ref - The ref to be forwarded to the MuiRadio component.
+ * @returns The rendered Radio component.
+ */
+const Radio: OverridableComponent<ButtonBaseTypeMap<RadioProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: RadioProps<C>,
+    ref: Ref<HTMLButtonElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-radio', className);
 
     return <MuiRadio className={classes} {...rest} ref={ref} />;
   },
-) as ForwardRefExoticComponent<RadioProps> & WithWrapperProps;
+) as OverridableComponent<ButtonBaseTypeMap<RadioProps>> & WithWrapperProps;
 
 Radio.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Radio.muiName = COMPONENT_NAME;
-Radio.defaultProps = {};
 
 export default Radio;
diff --git a/packages/react/src/components/Radio/index.ts b/packages/react/src/components/Radio/index.ts
index c7f7cb81..67a36a3a 100644
--- a/packages/react/src/components/Radio/index.ts
+++ b/packages/react/src/components/Radio/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Radio';
-export type {RadioProps} from './Radio';
+export * from './Radio';
+
+export type {RadioPropsSizeOverrides, RadioPropsColorOverrides} from '@mui/material/Radio';
diff --git a/packages/react/src/components/RadioGroup/RadioGroup.tsx b/packages/react/src/components/RadioGroup/RadioGroup.tsx
index bb82ba6d..446e312a 100644
--- a/packages/react/src/components/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/components/RadioGroup/RadioGroup.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiRadioGroup, {RadioGroupProps as MuiRadioGroupProps} from '@mui/material/RadioGroup';
+import MuiRadioGroup from '@mui/material/RadioGroup';
+import type {RadioGroupProps as MuiRadioGroupProps} from '@mui/material/RadioGroup';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
@@ -26,10 +28,30 @@ export type RadioGroupProps = MuiRadioGroupProps;
 
 const COMPONENT_NAME: string = 'RadioGroup';
 
+/**
+ * The Radio Group allows the user to select one option from a set.
+ *
+ * Demos:
+ *
+ * - [Radio Group (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-radio-group)
+ * - [Radio Group (MUI)](https://mui.com/material-ui/react-radio-button/)
+ *
+ * API:
+ *
+ * - [RadioGroup API](https://mui.com/material-ui/api/radio-group/)
+ * - inherits [FormGroup API](https://mui.com/material-ui/api/form-group/)
+ *
+ * @remarks
+ * - ✔️ Props of the [FormGroup](https://mui.com/material-ui/api/form-group/) component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the RadioGroup component.
+ * @param ref - The ref to be forwarded to the MuiRadioGroup component.
+ * @returns The rendered RadioGroup component.
+ */
 const RadioGroup: ForwardRefExoticComponent<RadioGroupProps> & WithWrapperProps = forwardRef(
-  (props: RadioGroupProps, ref: MutableRefObject<HTMLButtonElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: RadioGroupProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-radio-group', className);
 
     return <MuiRadioGroup className={classes} {...rest} ref={ref} />;
@@ -38,6 +60,5 @@ const RadioGroup: ForwardRefExoticComponent<RadioGroupProps> & WithWrapperProps
 
 RadioGroup.displayName = composeComponentDisplayName(COMPONENT_NAME);
 RadioGroup.muiName = COMPONENT_NAME;
-RadioGroup.defaultProps = {};
 
 export default RadioGroup;
diff --git a/packages/react/src/components/RadioGroup/index.ts b/packages/react/src/components/RadioGroup/index.ts
index 4e384eff..e4703030 100644
--- a/packages/react/src/components/RadioGroup/index.ts
+++ b/packages/react/src/components/RadioGroup/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './RadioGroup';
-export type {RadioGroupProps} from './RadioGroup';
+export * from './RadioGroup';
+
+export {RadioGroupClassKey} from '@mui/material/RadioGroup';
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
index f43d47a0..3153b352 100644
--- a/packages/react/src/components/Select/Select.tsx
+++ b/packages/react/src/components/Select/Select.tsx
@@ -16,27 +16,64 @@
  * under the License.
  */
 
-import MuiSelect, {SelectProps as MuiSelectProps} from '@mui/material/Select';
+import MuiSelect from '@mui/material/Select';
+import type {SelectProps as MuiSelectProps} from '@mui/material/Select';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
-import InputLabel, {InputLabelProps as MuiInputLabelProps} from '../InputLabel';
+import InputLabel from '../InputLabel';
+import type {InputLabelProps as MuiInputLabelProps} from '../InputLabel';
 import './select.scss';
 
-export interface SelectProps extends MuiSelectProps {
+export type SelectProps = MuiSelectProps & {
   /**
    * Props for the `InputLabel` component.
    */
   InputLabelProps?: MuiInputLabelProps;
-}
+};
 
 const COMPONENT_NAME: string = 'Select';
 
+/**
+ * The Select components are used for collecting user provided information from a list of options.
+ *
+ * Demos:
+ *
+ * - [Select (Oxygen UI)](https://mui.com/material-ui/react-select/)
+ * - [Select (MUI)](https://mui.com/material-ui/react-select/)
+ *
+ * API:
+ *
+ * - [Select API](https://mui.com/material-ui/api/select/)
+ * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
+ *
+ * @remarks
+ * - ✔️ Props of the [OutlinedInput](https://mui.com/material-ui/api/outlined-input/) component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the Select component.
+ * @param ref - The ref to be forwarded to the MuiSelect component.
+ * @returns The rendered Select component.
+ */
 const Select: ForwardRefExoticComponent<SelectProps> & WithWrapperProps = forwardRef(
-  (props: SelectProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, InputLabelProps, label, name, required, ...rest} = props;
-
+  (
+    {
+      className,
+      InputLabelProps = {
+        disableAnimation: true,
+        focused: false,
+        shrink: false,
+      },
+      label,
+      name,
+      required,
+      ...rest
+    }: SelectProps,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-select', className);
 
     const labelProps: MuiInputLabelProps = {
@@ -69,12 +106,5 @@ const Select: ForwardRefExoticComponent<SelectProps> & WithWrapperProps = forwar
 
 Select.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Select.muiName = COMPONENT_NAME;
-Select.defaultProps = {
-  InputLabelProps: {
-    disableAnimation: true,
-    focused: false,
-    shrink: false,
-  },
-};
 
 export default Select;
diff --git a/packages/react/src/components/Select/index.ts b/packages/react/src/components/Select/index.ts
index 99547d5c..f9c11f7d 100644
--- a/packages/react/src/components/Select/index.ts
+++ b/packages/react/src/components/Select/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Select';
-export type {SelectProps} from './Select';
+export * from './Select';
+
+export {SelectChangeEvent} from '@mui/material/Select';
diff --git a/packages/react/src/components/SignIn/SignIn.tsx b/packages/react/src/components/SignIn/SignIn.tsx
index 7777cb98..cca1a846 100644
--- a/packages/react/src/components/SignIn/SignIn.tsx
+++ b/packages/react/src/components/SignIn/SignIn.tsx
@@ -16,18 +16,27 @@
  * under the License.
  */
 
-import {Box, FormGroup, FormControlLabel, Typography, Grid, BoxProps, Paper, Checkbox} from '@mui/material';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
-import {MuiWrapperProps} from '../../models/component';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
+import type {BoxTypeMap, BoxProps} from '../Box';
+import Box from '../Box';
 import Button from '../Button';
+import Checkbox from '../Checkbox';
 import Divider from '../Divider';
+import FormControlLabel from '../FormControlLabel';
+import FormGroup from '../FormGroup';
+import Grid from '../Grid';
 import Link from '../Link';
+import Paper from '../Paper';
 import TextField from '../TextField';
+import Typography from '../Typography';
 import './sign-in.scss';
 
-export interface SignInProps extends BoxProps {
+export type SignInProps<C extends ElementType = ElementType> = BoxProps<C> & {
   /**
    * URL for the login box logo.
    */
@@ -40,72 +49,96 @@ export interface SignInProps extends BoxProps {
    * URL for the sign up.
    */
   signUpUrl?: string;
-}
+};
 
 const COMPONENT_NAME: string = 'SignIn';
 
-const SignIn: FC<SignInProps> & MuiWrapperProps = (props: SignInProps): ReactElement => {
-  const {className, signUpUrl, logoUrl, signInOptions, ...rest} = props;
-
-  const classes: string = clsx('oxygen-sign-in', className);
+/**
+ * The Sign In component is a custom component that is used to render a sign-in form.
+ *
+ * Demos:
+ *
+ * - [Sign In (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/patterns-sign-in--overview)
+ *
+ * API:
+ *
+ * - inherits [Box API](https://mui.com/material-ui/api/box/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the SignIn component.
+ * @param ref - The ref to be forwarded to the Box component.
+ * @returns The rendered SignIn component.
+ */
+const SignIn: OverridableComponent<BoxTypeMap<SignInProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, signUpUrl, logoUrl, signInOptions, ...rest}: SignInProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-sign-in', className);
 
-  return (
-    <Box className={classes} {...rest}>
-      {logoUrl && <Box className="oxygen-sign-in-logo" component="img" src={logoUrl} />}
-      <Paper className="oxygen-sign-in-box" elevation={0} variant="outlined">
-        <Typography align="center" className="oxygen-sign-in-header" variant="h5">
-          Sign in
-        </Typography>
-        <Box className="oxygen-sign-in-form" component="form" onSubmit={(): void => null} noValidate sx={{mt: 1}}>
-          <TextField
-            required
-            fullWidth
-            id="name"
-            label="Username"
-            name="text"
-            placeholder="Enter your username"
-            autoFocus
-          />
-          <TextField
-            required
-            fullWidth
-            name="password"
-            label="Password"
-            type="password"
-            id="password"
-            placeholder="Enter your password"
-            autoComplete="current-password"
-          />
-          <FormGroup>
-            <FormControlLabel control={<Checkbox defaultChecked />} label="Remember me on this computer" />
-          </FormGroup>
-          <Button color="primary" variant="contained" className="oxygen-sign-in-cta" type="submit" fullWidth>
-            Sign In
-          </Button>
-          {signInOptions && (
-            <div className="oxygen-sign-in-options-wrapper">
-              <Divider>OR</Divider>
-              <div className="oxygen-sign-in-options">{signInOptions}</div>
-            </div>
-          )}
-          {signUpUrl && (
-            <Grid container className="oxygen-sign-in-sign-up-link">
-              <Grid item>Don&apos;t have an account?</Grid>
-              <Grid item>
-                <Link href={signUpUrl} className="oxygen-sign-in-sign-up-link-action">
-                  Sign up
-                </Link>
+    return (
+      <Box ref={ref} className={classes} {...rest}>
+        {logoUrl && <Box className="oxygen-sign-in-logo" component="img" src={logoUrl} />}
+        <Paper className="oxygen-sign-in-box" elevation={0} variant="outlined">
+          <Typography align="center" className="oxygen-sign-in-header" variant="h5">
+            Sign in
+          </Typography>
+          <Box className="oxygen-sign-in-form" component="form" onSubmit={(): void => null} noValidate sx={{mt: 1}}>
+            <TextField
+              required
+              fullWidth
+              id="name"
+              label="Username"
+              name="text"
+              placeholder="Enter your username"
+              autoFocus
+            />
+            <TextField
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              placeholder="Enter your password"
+              autoComplete="current-password"
+            />
+            <FormGroup>
+              <FormControlLabel control={<Checkbox defaultChecked />} label="Remember me on this computer" />
+            </FormGroup>
+            <Button color="primary" variant="contained" className="oxygen-sign-in-cta" type="submit" fullWidth>
+              Sign In
+            </Button>
+            {signInOptions && (
+              <div className="oxygen-sign-in-options-wrapper">
+                <Divider>OR</Divider>
+                <div className="oxygen-sign-in-options">{signInOptions}</div>
+              </div>
+            )}
+            {signUpUrl && (
+              <Grid container className="oxygen-sign-in-sign-up-link">
+                <Grid>Don&apos;t have an account?</Grid>
+                <Grid>
+                  <Link href={signUpUrl} className="oxygen-sign-in-sign-up-link-action">
+                    Sign up
+                  </Link>
+                </Grid>
               </Grid>
-            </Grid>
-          )}
-        </Box>
-      </Paper>
-    </Box>
-  );
-};
+            )}
+          </Box>
+        </Paper>
+      </Box>
+    );
+  },
+) as OverridableComponent<BoxTypeMap<SignInProps>> & WithWrapperProps;
 
 SignIn.displayName = composeComponentDisplayName(COMPONENT_NAME);
 SignIn.muiName = 'SignIn';
-SignIn.defaultProps = {};
 
 export default SignIn;
diff --git a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
index 348b3272..9c3b4653 100644
--- a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
+++ b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
@@ -4,22 +4,22 @@ exports[`SignIn should match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="oxygen-sign-in MuiBox-root css-0"
+      class="oxygen-box oxygen-sign-in MuiBox-root css-0"
     >
       <img
-        class="oxygen-sign-in-logo MuiBox-root css-0"
+        class="oxygen-box oxygen-sign-in-logo MuiBox-root css-0"
         src="#"
       />
       <div
-        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded oxygen-sign-in-box css-1fbvlaf-MuiPaper-root"
+        class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded oxygen-paper oxygen-sign-in-box css-1fbvlaf-MuiPaper-root"
       >
         <h5
-          class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter oxygen-sign-in-header css-pezd7p-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-h5 MuiTypography-alignCenter oxygen-typography oxygen-sign-in-header css-pezd7p-MuiTypography-root"
         >
           Sign in
         </h5>
         <form
-          class="oxygen-sign-in-form MuiBox-root css-164r41r"
+          class="oxygen-box oxygen-sign-in-form MuiBox-root css-164r41r"
           novalidate=""
         >
           <div
@@ -93,7 +93,7 @@ exports[`SignIn should match the snapshot 1`] = `
                   value=""
                 />
                 <div
-                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-103jkr5-MuiInputAdornment-root"
+                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium oxygen-input-adornment css-103jkr5-MuiInputAdornment-root"
                 >
                   <button
                     aria-label="toggle password visibility"
@@ -142,13 +142,13 @@ exports[`SignIn should match the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="MuiFormGroup-root css-dmmspl-MuiFormGroup-root"
+            class="MuiFormGroup-root oxygen-form-group css-dmmspl-MuiFormGroup-root"
           >
             <label
-              class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-tajcny-MuiFormControlLabel-root"
+              class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd oxygen-form-control-label css-tajcny-MuiFormControlLabel-root"
             >
               <span
-                class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked MuiCheckbox-root MuiCheckbox-colorPrimary css-hvaz3l-MuiButtonBase-root-MuiCheckbox-root"
+                class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary Mui-checked MuiCheckbox-root MuiCheckbox-colorPrimary oxygen-checkbox css-hvaz3l-MuiButtonBase-root-MuiCheckbox-root"
               >
                 <input
                   checked=""
@@ -190,15 +190,15 @@ exports[`SignIn should match the snapshot 1`] = `
             />
           </button>
           <div
-            class="MuiGrid-root MuiGrid-container oxygen-sign-in-sign-up-link css-11lq3yg-MuiGrid-root"
+            class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row oxygen-grid oxygen-sign-in-sign-up-link css-1pi8xg4-MuiGrid2-root"
           >
             <div
-              class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+              class="MuiGrid2-root MuiGrid2-direction-xs-row oxygen-grid css-27y2fm-MuiGrid2-root"
             >
               Don't have an account?
             </div>
             <div
-              class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+              class="MuiGrid2-root MuiGrid2-direction-xs-row oxygen-grid css-27y2fm-MuiGrid2-root"
             >
               <a
                 class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover oxygen-link oxygen-sign-in-sign-up-link-action css-c2ph3r-MuiTypography-root-MuiLink-root"
diff --git a/packages/react/src/components/SignIn/index.ts b/packages/react/src/components/SignIn/index.ts
index bf5f76e8..c90a3aef 100644
--- a/packages/react/src/components/SignIn/index.ts
+++ b/packages/react/src/components/SignIn/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './SignIn';
-export type {SignInProps} from './SignIn';
+export * from './SignIn';
diff --git a/packages/react/src/components/Skeleton/Skeleton.tsx b/packages/react/src/components/Skeleton/Skeleton.tsx
index 86875539..c8917f1e 100644
--- a/packages/react/src/components/Skeleton/Skeleton.tsx
+++ b/packages/react/src/components/Skeleton/Skeleton.tsx
@@ -16,30 +16,62 @@
  * under the License.
  */
 
-import MuiSkeleton, {SkeletonProps as MuiSkeletonProps} from '@mui/material/Skeleton';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiSkeleton from '@mui/material/Skeleton';
+import type {SkeletonProps as MuiSkeletonProps, SkeletonTypeMap} from '@mui/material/Skeleton';
 import clsx from 'clsx';
-import {ElementType, FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 
-export type SkeletonProps<C extends ElementType = ElementType> = {
+export type SkeletonProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = SkeletonTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiSkeletonProps<C>, 'component'>;
+} & Omit<MuiSkeletonProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Skeleton';
 
-const Skeleton: FC<SkeletonProps> & WithWrapperProps = <C extends ElementType>(
-  props: SkeletonProps<C>,
-): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-skeleton', className);
+/**
+ * The Skeleton displays a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
+ *
+ * Demos:
+ *
+ * - [Skeleton (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-skeleton)
+ * - [Skeleton (MUI)](https://mui.com/material-ui/react-skeleton/)
+ *
+ * API:
+ *
+ * - [Skeleton API](https://mui.com/material-ui/api/skeleton/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Skeleton component.
+ * @param ref - The ref to be forwarded to the MuiSkeleton component.
+ * @returns The rendered Skeleton component.
+ */
+const Skeleton: OverridableComponent<SkeletonTypeMap<SkeletonProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: SkeletonProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-skeleton', className);
 
-  return <MuiSkeleton className={classes} {...rest} />;
-};
+    return <MuiSkeleton ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<SkeletonTypeMap<SkeletonProps>> & WithWrapperProps;
 
 Skeleton.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Skeleton.muiName = COMPONENT_NAME;
-Skeleton.defaultProps = {};
 
 export default Skeleton;
diff --git a/packages/react/src/components/Skeleton/index.ts b/packages/react/src/components/Skeleton/index.ts
index 40e010aa..d7c1a671 100644
--- a/packages/react/src/components/Skeleton/index.ts
+++ b/packages/react/src/components/Skeleton/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Skeleton';
-export type {SkeletonProps} from './Skeleton';
+export * from './Skeleton';
+
+export type {SkeletonPropsVariantOverrides, SkeletonTypeMap} from '@mui/material/Skeleton';
diff --git a/packages/react/src/components/Snackbar/Snackbar.tsx b/packages/react/src/components/Snackbar/Snackbar.tsx
index 7bed5d9e..db2eaf61 100644
--- a/packages/react/src/components/Snackbar/Snackbar.tsx
+++ b/packages/react/src/components/Snackbar/Snackbar.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiSnackbar, {SnackbarProps as MuiSnackbarProps} from '@mui/material/Snackbar';
+import MuiSnackbar from '@mui/material/Snackbar';
+import type {SnackbarProps as MuiSnackbarProps} from '@mui/material/Snackbar';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './snackbar.scss';
@@ -27,10 +29,29 @@ export type SnackbarProps = MuiSnackbarProps;
 
 const COMPONENT_NAME: string = 'Snackbar';
 
+/**
+ * The Snackbar (also known as toasts) is used for brief notifications of processes that have been or will be performed.
+ *
+ * Demos:
+ *
+ * - [Snackbar (Oxygen UI)]](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-snackbar--overview)
+ * - [Snackbar (MUI)](https://mui.com/material-ui/react-snackbar/)
+ *
+ * API:
+ *
+ * - [Snackbar API](https://mui.com/material-ui/api/snackbar/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the Snackbar component.
+ * @param ref - The ref to be forwarded to the MuiSnackbar component.
+ * @returns The rendered Snackbar component.
+ */
 const Snackbar: ForwardRefExoticComponent<SnackbarProps> & WithWrapperProps = forwardRef(
-  (props: SnackbarProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: SnackbarProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-snackbar', className);
 
     return <MuiSnackbar className={classes} {...rest} ref={ref} />;
@@ -39,6 +60,5 @@ const Snackbar: ForwardRefExoticComponent<SnackbarProps> & WithWrapperProps = fo
 
 Snackbar.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Snackbar.muiName = COMPONENT_NAME;
-Snackbar.defaultProps = {};
 
 export default Snackbar;
diff --git a/packages/react/src/components/Snackbar/index.ts b/packages/react/src/components/Snackbar/index.ts
index 76a168a1..1ac3f36a 100644
--- a/packages/react/src/components/Snackbar/index.ts
+++ b/packages/react/src/components/Snackbar/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Snackbar';
-export type {SnackbarProps} from './Snackbar';
+export * from './Snackbar';
+
+export type {SnackbarCloseReason, SnackbarOrigin} from '@mui/material/Snackbar';
diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx
index ebe0d7ad..5e50ca6f 100644
--- a/packages/react/src/components/Stepper/Stepper.tsx
+++ b/packages/react/src/components/Stepper/Stepper.tsx
@@ -16,14 +16,17 @@
  * under the License.
  */
 
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, HTMLAttributes, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useState} from 'react';
+import {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
+import type {BoxProps, BoxTypeMap} from '../Box';
 import './stepper.scss';
 
-export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
+export type StepperProps<C extends ElementType = ElementType> = BoxProps<C> & {
   /**
    * Animate the slide transition.
    */
@@ -36,77 +39,99 @@ export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
    * Steps to be rendered.
    */
   steps: ReactElement[];
-}
+};
 
 const COMPONENT_NAME: string = 'Stepper';
 
-const Stepper: FC<StepperProps> & WithWrapperProps = (props: StepperProps): ReactElement => {
-  const {animateOnSlide, className, currentStep, steps} = props;
-
-  const [slideLeftPosition, setSlideLeftPosition] = useState<number>(0);
-  const [slideContainerWidth, setSlideContainerWidth] = useState<number>(0);
-
-  const slideContainerRef: MutableRefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
-
-  const classes: string = clsx('oxygen-stepper', className);
+/**
+ * The Stepper can be used to compose wizards and carousels.
+ *
+ * Demos:
+ *
+ * - [Stepper (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-stepper--overview)
+ *
+ * API:
+ *
+ * - inherits [Box API](https://mui.com/material-ui/api/box/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Stepper component.
+ * @param ref - The ref to be forwarded to the Box component.
+ * @returns The rendered Stepper component.
+ */
+const Stepper: OverridableComponent<BoxTypeMap<StepperProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {animateOnSlide, className, currentStep = 0, steps}: StepperProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const [slideLeftPosition, setSlideLeftPosition] = useState<number>(0);
+    const [slideContainerWidth, setSlideContainerWidth] = useState<number>(0);
+
+    const slideContainerRef: Ref<HTMLDivElement> = useRef<HTMLDivElement>(null);
+
+    const classes: string = clsx('oxygen-stepper', className);
+
+    const slideContainer: (position: number) => void = useCallback(
+      (position: number): void => {
+        if (!animateOnSlide) {
+          return;
+        }
+
+        const slideBy: number = position;
+        setSlideLeftPosition(slideBy * -1 * currentStep);
+      },
+      [currentStep, animateOnSlide],
+    );
 
-  const slideContainer: (position: number) => void = useCallback(
-    (position: number): void => {
-      if (!animateOnSlide) {
-        return;
+    useEffect(() => {
+      if (!slideContainerRef?.current || !animateOnSlide) {
+        return () => {};
       }
 
-      const slideBy: number = position;
-      setSlideLeftPosition(slideBy * -1 * currentStep);
-    },
-    [currentStep, animateOnSlide],
-  );
-
-  useEffect(() => {
-    if (!slideContainerRef?.current || !animateOnSlide) {
-      return () => {};
-    }
-
-    setSlideContainerWidth(slideContainerRef.current.offsetWidth);
-
-    const handleResize = (): void => {
-      const width: number = slideContainerRef.current.offsetWidth;
-      setSlideContainerWidth(width);
-      slideContainer(width);
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    return (): void => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [animateOnSlide, slideContainer]);
-
-  useEffect(() => {
-    slideContainer(slideContainerWidth);
-  }, [slideContainerWidth, slideContainer]);
-
-  if (animateOnSlide) {
-    return (
-      <Box className={classes} ref={slideContainerRef}>
-        <Box className="oxygen-stepper-container" sx={{left: `${slideLeftPosition}px`}}>
-          {steps.map((step: ReactElement) => (
-            <Box key={step.key} sx={{width: slideContainerWidth}}>
-              {step}
-            </Box>
-          ))}
+      setSlideContainerWidth(slideContainerRef.current.offsetWidth);
+
+      const handleResize = (): void => {
+        const width: number = slideContainerRef.current.offsetWidth;
+        setSlideContainerWidth(width);
+        slideContainer(width);
+      };
+
+      window.addEventListener('resize', handleResize);
+
+      return (): void => {
+        window.removeEventListener('resize', handleResize);
+      };
+    }, [animateOnSlide, slideContainer]);
+
+    useEffect(() => {
+      slideContainer(slideContainerWidth);
+    }, [slideContainerWidth, slideContainer]);
+
+    if (animateOnSlide) {
+      return (
+        <Box className={classes} ref={slideContainerRef}>
+          <Box className="oxygen-stepper-container" sx={{left: `${slideLeftPosition}px`}}>
+            {steps.map((step: ReactElement) => (
+              <Box key={step.key} ref={ref} sx={{width: slideContainerWidth}}>
+                {step}
+              </Box>
+            ))}
+          </Box>
         </Box>
-      </Box>
-    );
-  }
+      );
+    }
 
-  return steps[currentStep];
-};
+    return steps[currentStep];
+  },
+) as OverridableComponent<BoxTypeMap<StepperProps>> & WithWrapperProps;
 
 Stepper.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Stepper.muiName = COMPONENT_NAME;
-Stepper.defaultProps = {
-  currentStep: 0,
-};
 
 export default Stepper;
diff --git a/packages/react/src/components/Stepper/index.ts b/packages/react/src/components/Stepper/index.ts
index 31cef048..c0ca389c 100644
--- a/packages/react/src/components/Stepper/index.ts
+++ b/packages/react/src/components/Stepper/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './Stepper';
-export type {StepperProps} from './Stepper';
+export * from './Stepper';
diff --git a/packages/react/src/components/Switch/Switch.tsx b/packages/react/src/components/Switch/Switch.tsx
index 6650c34d..25670555 100644
--- a/packages/react/src/components/Switch/Switch.tsx
+++ b/packages/react/src/components/Switch/Switch.tsx
@@ -16,32 +16,63 @@
  * under the License.
  */
 
-import MuiSwitch, {SwitchProps as MuiSwitchProps} from '@mui/material/Switch';
+import type {ButtonBaseTypeMap} from '@mui/material/ButtonBase';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiSwitch from '@mui/material/Switch';
+import type {SwitchProps as MuiSwitchProps} from '@mui/material/Switch';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {forwardRef} from 'react';
+import type {ReactElement, Ref, ElementType} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './switch.scss';
 
-export type SwitchProps = MuiSwitchProps;
+export type SwitchProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiSwitchProps, 'component'>;
 
 const COMPONENT_NAME: string = 'Switch';
 
 /**
- * @remarks `any` is used as the generic type for the props because the generic type is not used in the component.
+ * The Switch toggles the state of a single setting on or off.
+ *
+ * Demos:
+ *
+ * - [Switch (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-switch)
+ * - [Switch (MUI)](https://mui.com/material-ui/react-switch/)
+ * - [Transfer List (Oxygen UI)](TODO: Add a link after implementing: Tracker: https://github.com/wso2/oxygen-ui/issues/2)
+ * - [Transfer List (MUI)](https://mui.com/material-ui/react-transfer-list/)
+ *
+ * API:
+ *
+ * - [Switch API](https://mui.com/material-ui/api/switch/)
+ * - inherits [IconButton API](https://mui.com/material-ui/api/icon-button/)
+ *
+ * @remarks
+ * - ✔️ Props of the [IconButton](https://mui.com/material-ui/api/icon-button/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Switch component.
+ * @param ref - The ref to be forwarded to the MuiSwitch component.
+ * @returns The rendered Switch component.
  */
-const Switch: ForwardRefExoticComponent<SwitchProps> & WithWrapperProps = forwardRef(
-  (props: SwitchProps, ref: MutableRefObject<HTMLButtonElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+const Switch: OverridableComponent<ButtonBaseTypeMap<SwitchProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: SwitchProps<C>,
+    ref: Ref<HTMLButtonElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-switch', className);
 
-    return <MuiSwitch className={classes} {...rest} ref={ref} />;
+    return <MuiSwitch ref={ref} className={classes} {...rest} />;
   },
-) as ForwardRefExoticComponent<SwitchProps> & WithWrapperProps;
+) as OverridableComponent<ButtonBaseTypeMap<SwitchProps>> & WithWrapperProps;
 
 Switch.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Switch.muiName = COMPONENT_NAME;
-Switch.defaultProps = {};
 
 export default Switch;
diff --git a/packages/react/src/components/Switch/index.ts b/packages/react/src/components/Switch/index.ts
index 47deb744..9c151c75 100644
--- a/packages/react/src/components/Switch/index.ts
+++ b/packages/react/src/components/Switch/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Switch';
-export type {SwitchProps} from './Switch';
+export * from './Switch';
+
+export type {SwitchPropsSizeOverrides, SwitchPropsColorOverrides} from '@mui/material/Switch';
diff --git a/packages/react/src/components/Tab/Tab.tsx b/packages/react/src/components/Tab/Tab.tsx
index 3797dc12..127ec30e 100644
--- a/packages/react/src/components/Tab/Tab.tsx
+++ b/packages/react/src/components/Tab/Tab.tsx
@@ -16,26 +16,59 @@
  * under the License.
  */
 
-import MuiTab, {TabProps as MuiTabProps} from '@mui/material/Tab';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiTab from '@mui/material/Tab';
+import type {TabProps as MuiTabProps, TabTypeMap} from '@mui/material/Tab';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './tab.scss';
 
-export type TabProps = MuiTabProps;
+export type TabProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = TabTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiTabProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Tab';
 
-const Tab: ForwardRefExoticComponent<TabProps> & WithWrapperProps = forwardRef(
-  (props: TabProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * The Tab component is used to create a tab in a tab list.
+ *
+ * Demos:
+ *
+ * - [Tabs (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-tab)
+ * - [Tabs (MUI)](https://mui.com/material-ui/react-tabs/)
+ *
+ * API:
+ *
+ * - [Tab API](https://mui.com/material-ui/api/tab/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ *
+ * @remarks
+ * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Tab component.
+ * @param ref - The ref to be forwarded to the MuiTab component.
+ * @returns The rendered Tab component.
+ */
+const Tab: OverridableComponent<TabTypeMap<TabProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>({className, ...rest}: TabProps<C>, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-tab', className);
 
     return <MuiTab className={classes} ref={ref} {...rest} />;
   },
-) as ForwardRefExoticComponent<TabProps> & WithWrapperProps;
+) as OverridableComponent<TabTypeMap<TabProps>> & WithWrapperProps;
 
 Tab.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Tab.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/Tab/index.ts b/packages/react/src/components/Tab/index.ts
index b42963d6..31602781 100644
--- a/packages/react/src/components/Tab/index.ts
+++ b/packages/react/src/components/Tab/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Tab';
-export type {TabProps} from './Tab';
+export * from './Tab';
+
+export {TabTypeMap} from '@mui/material/Tab';
diff --git a/packages/react/src/components/TabPanel/TabPanel.tsx b/packages/react/src/components/TabPanel/TabPanel.tsx
index 9c95b14b..919cadd2 100644
--- a/packages/react/src/components/TabPanel/TabPanel.tsx
+++ b/packages/react/src/components/TabPanel/TabPanel.tsx
@@ -16,15 +16,17 @@
  * under the License.
  */
 
-import {BoxProps as MuiBoxProps} from '@mui/material';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
+import type {BoxProps, BoxTypeMap} from '../Box';
 import './tab-panel.scss';
 
-export interface TabPanelProps extends MuiBoxProps {
+export type TabPanelProps<C extends ElementType = ElementType> = BoxProps<C> & {
   /*
    * The index of the corresponding `TabPanel`.
    */
@@ -33,23 +35,46 @@ export interface TabPanelProps extends MuiBoxProps {
    * The value of the selected `TabPanel`.
    */
   value: number;
-}
+};
 
 const COMPONENT_NAME: string = 'TabPanel';
 
-const TabPanel: ForwardRefExoticComponent<TabPanelProps> & WithWrapperProps = forwardRef(
-  (props: TabPanelProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, children, value, index, ...rest} = props;
-
+/**
+ * TabPanel component can be used with Tabs component to implement the content of the tab views.
+ *
+ * Demos:
+ *
+ * - [TabPanel (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-tab-panel--overview)
+ *
+ * API:
+ *
+ * - inherits [Card API](https://mui.com/material-ui/api/card/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the TabPanel component.
+ * @param ref - The ref to be forwarded to the Box component.
+ * @returns The rendered TabPanel component.
+ */
+const TabPanel: OverridableComponent<BoxTypeMap<TabPanelProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, children, value, index, ...rest}: TabPanelProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-tab-panel', className);
 
     return (
-      <Box className={classes} ref={ref} role="tabpanel" hidden={value !== index} {...rest}>
+      <Box ref={ref} className={classes} role="tabpanel" hidden={value !== index} {...rest}>
         {value === index && <Box>{children}</Box>}
       </Box>
     );
   },
-) as ForwardRefExoticComponent<TabPanelProps> & WithWrapperProps;
+) as OverridableComponent<BoxTypeMap<TabPanelProps>> & WithWrapperProps;
 
 TabPanel.displayName = composeComponentDisplayName(COMPONENT_NAME);
 TabPanel.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/TabPanel/index.ts b/packages/react/src/components/TabPanel/index.ts
index b447f7e7..6974444b 100644
--- a/packages/react/src/components/TabPanel/index.ts
+++ b/packages/react/src/components/TabPanel/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './TabPanel';
-export type {TabPanelProps} from './TabPanel';
+export * from './TabPanel';
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index 804c4b2b..c3441c27 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -16,27 +16,62 @@
  * under the License.
  */
 
-import MuiTabs, {TabsProps as MuiTabsProps} from '@mui/material/Tabs';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiTabs from '@mui/material/Tabs';
+import type {TabsProps as MuiTabsProps, TabsTypeMap} from '@mui/material/Tabs';
 import clsx from 'clsx';
-import {ElementType, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
 import Divider from '../Divider';
 import './tabs.scss';
 
-export type TabsProps<C extends ElementType = ElementType> = {
+export type TabsProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = TabsTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiTabsProps<C>, 'component'>;
+} & Omit<MuiTabsProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Tabs';
 
-const Tabs: ForwardRefExoticComponent<TabsProps> & WithWrapperProps = forwardRef(
-  <C extends ElementType>(props: TabsProps<C>, ref: MutableRefObject<HTMLButtonElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+/**
+ * The Skeleton displays a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
+ *
+ * Demos:
+ *
+ * - [Skeleton (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-skeleton)
+ * - [Skeleton (MUI)](https://mui.com/material-ui/react-skeleton/)
+ *
+ * API:
+ *
+ * - [Skeleton API](https://mui.com/material-ui/api/skeleton/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Skeleton component.
+ * @param ref - The ref to be forwarded to the MuiSkeleton component.
+ * @returns The rendered Skeleton component.
+ */
+const Tabs: OverridableComponent<TabsTypeMap<TabsProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: TabsProps<C>,
+    ref: Ref<HTMLButtonElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-tabs', className);
 
+    // TODO: Need to evaluate this wrapper.
+    // Should directly return the MuiTabs component instead of wrapping it with Box and Divider.
     return (
       <Box className={classes}>
         <MuiTabs ref={ref} {...rest} />
@@ -44,7 +79,7 @@ const Tabs: ForwardRefExoticComponent<TabsProps> & WithWrapperProps = forwardRef
       </Box>
     );
   },
-) as ForwardRefExoticComponent<TabsProps> & WithWrapperProps;
+) as OverridableComponent<TabsTypeMap<TabsProps>> & WithWrapperProps;
 
 Tabs.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Tabs.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/Tabs/index.ts b/packages/react/src/components/Tabs/index.ts
index 7be8fab3..a9b88a7f 100644
--- a/packages/react/src/components/Tabs/index.ts
+++ b/packages/react/src/components/Tabs/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Tabs';
-export type {TabsProps} from './Tabs';
+export * from './Tabs';
+
+export type {TabsTypeMap, TabsActions, TabsPropsIndicatorColorOverrides} from '@mui/material/Tabs';
diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx
index 9690eb91..68441096 100644
--- a/packages/react/src/components/TextField/TextField.tsx
+++ b/packages/react/src/components/TextField/TextField.tsx
@@ -16,23 +16,18 @@
  * under the License.
  */
 
-import InputAdornment from '@mui/material/InputAdornment';
-import MuiTextField, {TextFieldProps as MuiTextFieldProps} from '@mui/material/TextField';
+import {FormControlTypeMap} from '@mui/material/FormControl';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiTextField from '@mui/material/TextField';
+import type {TextFieldProps as MuiTextFieldProps} from '@mui/material/TextField';
 import {CircleDotIcon, EyeIcon, EyeSlashIcon} from '@oxygen-ui/react-icons';
 import clsx from 'clsx';
-import {
-  forwardRef,
-  ForwardRefExoticComponent,
-  MouseEvent,
-  MutableRefObject,
-  ReactElement,
-  ReactNode,
-  useState,
-} from 'react';
-import {TextFieldInputTypes} from './constants';
+import {forwardRef, useState} from 'react';
+import type {ElementType, ForwardRefExoticComponent, MouseEvent, Ref, ReactElement, ReactNode} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import IconButton from '../IconButton';
+import InputAdornment from '../InputAdornment';
 import InputLabel from '../InputLabel';
 import List from '../List';
 import ListItem from '../ListItem';
@@ -41,19 +36,29 @@ import ListItemText from '../ListItemText';
 import Tooltip from '../Tooltip';
 import './text-field.scss';
 
-export type TextFieldProps = {
+export enum TextFieldInputTypes {
+  INPUT_PASSWORD = 'password',
+  INPUT_TEXT = 'text',
+}
+
+export type TextFieldProps<C extends ElementType = ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
   /**
    * Criteria for user input.
    */
   criteria?: string[];
-} & MuiTextFieldProps;
+} & Omit<MuiTextFieldProps, 'component'>;
 
 const COMPONENT_NAME: string = 'TextField';
 
-const PasswordField: ForwardRefExoticComponent<TextFieldProps> = forwardRef(
-  (props: TextFieldProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {type, ...rest} = props;
-
+const PasswordField: ForwardRefExoticComponent<TextFieldProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {type, variant, ...rest}: TextFieldProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const [showPassword, setShowPassword] = useState(false);
 
     const handleClickShowPassword = (): void => setShowPassword((show: boolean) => !show);
@@ -80,16 +85,18 @@ const PasswordField: ForwardRefExoticComponent<TextFieldProps> = forwardRef(
             </InputAdornment>
           ),
         }}
+        variant={variant}
         {...rest}
       />
     );
   },
-) as ForwardRefExoticComponent<TextFieldProps>;
-
-const PasswordFieldWithCriteria: ForwardRefExoticComponent<TextFieldProps> = forwardRef(
-  (props: TextFieldProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {criteria, id, type, ...rest} = props;
+) as ForwardRefExoticComponent<TextFieldProps> & WithWrapperProps;
 
+const PasswordFieldWithCriteria: ForwardRefExoticComponent<TextFieldProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {criteria, id, type, ...rest}: TextFieldProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const [openPasswordCriteriaTooltip, setOpenPasswordCriteriaTooltip] = useState<boolean>(false);
 
     const handleClick = (): void => {
@@ -127,7 +134,6 @@ const PasswordFieldWithCriteria: ForwardRefExoticComponent<TextFieldProps> = for
         open={openPasswordCriteriaTooltip}
         title={renderCriteriaTooltipContent()}
         classes={{arrow: 'oxygen-text-field-tooltip-arrow', tooltip: 'oxygen-text-field-tooltip'}}
-        ref={ref}
       >
         <PasswordField
           ref={ref}
@@ -141,12 +147,38 @@ const PasswordFieldWithCriteria: ForwardRefExoticComponent<TextFieldProps> = for
       </Tooltip>
     );
   },
-) as ForwardRefExoticComponent<TextFieldProps>;
-
-const TextField: ForwardRefExoticComponent<TextFieldProps> & WithWrapperProps = forwardRef(
-  (props: TextFieldProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, id, label, type, InputLabelProps, ...rest} = props;
+) as ForwardRefExoticComponent<TextFieldProps> & WithWrapperProps;
 
+/**
+ * The Text Fields let users enter and edit text..
+ *
+ * Demos:
+ *
+ * - [Autocomplete (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-autocomplete)
+ * - [Autocomplete (MUI)](https://mui.com/material-ui/react-autocomplete/)
+ * - [Text Field (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/inputs-text-field)
+ * - [Text Field (MUI)](https://mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [TextField API](https://mui.com/material-ui/api/text-field/)
+ * - inherits [FormControl API](https://mui.com/material-ui/api/form-control/)
+ *
+ * @remarks
+ * - ✔️ Props of the [FormControl](https://mui.com/material-ui/api/form-control/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the TextField component.
+ * @param ref - The ref to be forwarded to the MuiTextField component.
+ * @returns The rendered TextField component.
+ */
+const TextField: OverridableComponent<FormControlTypeMap<TextFieldProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, id, label, type, InputLabelProps, variant, ...rest}: TextFieldProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
     const classes: string = clsx('oxygen-text-field', className);
 
     return (
@@ -155,17 +187,16 @@ const TextField: ForwardRefExoticComponent<TextFieldProps> & WithWrapperProps =
           {label}
         </InputLabel>
         {type === TextFieldInputTypes.INPUT_PASSWORD ? (
-          <PasswordFieldWithCriteria id={id} type={type} {...rest} ref={ref} />
+          <PasswordFieldWithCriteria ref={ref} id={id} variant={variant} type={type} {...rest} />
         ) : (
-          <MuiTextField id={id} type={type} {...rest} ref={ref} />
+          <MuiTextField ref={ref} id={id} variant={variant} type={type} {...rest} />
         )}
       </div>
     );
   },
-) as ForwardRefExoticComponent<TextFieldProps> & WithWrapperProps;
+) as OverridableComponent<FormControlTypeMap<TextFieldProps>> & WithWrapperProps;
 
 TextField.displayName = composeComponentDisplayName(COMPONENT_NAME);
 TextField.muiName = COMPONENT_NAME;
-TextField.defaultProps = {};
 
 export default TextField;
diff --git a/packages/react/src/components/TextField/constants/index.ts b/packages/react/src/components/TextField/constants/index.ts
deleted file mode 100644
index 594032a2..00000000
--- a/packages/react/src/components/TextField/constants/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export {TextFieldInputTypes} from './types';
diff --git a/packages/react/src/components/TextField/constants/types.ts b/packages/react/src/components/TextField/constants/types.ts
deleted file mode 100644
index 6b68bd42..00000000
--- a/packages/react/src/components/TextField/constants/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export enum TextFieldInputTypes {
-  INPUT_PASSWORD = 'password',
-  INPUT_TEXT = 'text',
-}
diff --git a/packages/react/src/components/TextField/index.ts b/packages/react/src/components/TextField/index.ts
index bb0340de..f4eb389a 100644
--- a/packages/react/src/components/TextField/index.ts
+++ b/packages/react/src/components/TextField/index.ts
@@ -17,5 +17,13 @@
  */
 
 export {default} from './TextField';
-export type {TextFieldProps} from './TextField';
-export {TextFieldInputTypes} from './constants';
+export * from './TextField';
+
+export {
+  TextFieldPropsColorOverrides,
+  TextFieldPropsSizeOverrides,
+  BaseTextFieldProps,
+  StandardTextFieldProps,
+  FilledTextFieldProps,
+  OutlinedTextFieldProps,
+} from '@mui/material/TextField';
diff --git a/packages/react/src/components/Toolbar/Toolbar.tsx b/packages/react/src/components/Toolbar/Toolbar.tsx
index 01363e35..b1bf7c0a 100644
--- a/packages/react/src/components/Toolbar/Toolbar.tsx
+++ b/packages/react/src/components/Toolbar/Toolbar.tsx
@@ -16,27 +16,63 @@
  * under the License.
  */
 
-import MuiToolbar, {ToolbarProps as MuiToolbarProps} from '@mui/material/Toolbar';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiToolbar from '@mui/material/Toolbar';
+import type {ToolbarProps as MuiToolbarProps, ToolbarTypeMap} from '@mui/material/Toolbar';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './toolbar.scss';
 
-export type ToolbarProps = MuiToolbarProps;
+export type ToolbarProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = ToolbarTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiToolbarProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Toolbar';
 
-const Toolbar: FC<ToolbarProps> & WithWrapperProps = (props: ToolbarProps): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-toolbar', className);
+/**
+ * The Toolbar component is a container for grouping elements such as AppBar.
+ *
+ * Demos:
+ *
+ * - [App Bar (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-app-bar)
+ * - [App Bar (MUI)](https://mui.com/material-ui/react-app-bar/)
+ *
+ * API:
+ *
+ * - [Toolbar API](https://mui.com/material-ui/api/toolbar/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Skeleton component.
+ * @param ref - The ref to be forwarded to the MuiSkeleton component.
+ * @returns The rendered Skeleton component.
+ */
+const Toolbar: OverridableComponent<ToolbarTypeMap<ToolbarProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: ToolbarProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-toolbar', className);
 
-  return <MuiToolbar className={classes} {...rest} />;
-};
+    return <MuiToolbar ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<ToolbarTypeMap<ToolbarProps>> & WithWrapperProps;
 
 Toolbar.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Toolbar.muiName = COMPONENT_NAME;
-Toolbar.defaultProps = {};
 
 export default Toolbar;
diff --git a/packages/react/src/components/Toolbar/index.ts b/packages/react/src/components/Toolbar/index.ts
index 053a6c38..43aa81a2 100644
--- a/packages/react/src/components/Toolbar/index.ts
+++ b/packages/react/src/components/Toolbar/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Toolbar';
-export type {ToolbarProps} from './Toolbar';
+export * from './Toolbar';
+
+export type {ToolbarPropsVariantOverrides, ToolbarTypeMap} from '@mui/material/Toolbar';
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index aba20b19..15d5b0d4 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-import MuiTooltip, {TooltipProps as MuiTooltipProps} from '@mui/material/Tooltip';
+import MuiTooltip from '@mui/material/Tooltip';
+import type {TooltipProps as MuiTooltipProps} from '@mui/material/Tooltip';
 import clsx from 'clsx';
-import {ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './tooltip.scss';
@@ -27,18 +29,36 @@ export type TooltipProps = MuiTooltipProps;
 
 const COMPONENT_NAME: string = 'Tooltip';
 
+/**
+ * Tooltips display informative text when users hover over, focus on, or tap an element.
+ *
+ * Demos:
+ *
+ * - [Tooltip (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-tooltip)
+ * - [Tooltip (MUI)](https://mui.com/material-ui/react-tooltip/)
+ *
+ * API:
+ *
+ * - [Tooltip API](https://mui.com/material-ui/api/tooltip/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the Tooltip component.
+ * @param ref - The ref to be forwarded to the MuiTooltip component.
+ * @returns The rendered Tooltip component.
+ */
 const Tooltip: ForwardRefExoticComponent<TooltipProps> & WithWrapperProps = forwardRef(
-  (props: TooltipProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
-    const {className, ...rest} = props;
-
+  ({className, ...rest}: TooltipProps, ref: Ref<HTMLDivElement>): ReactElement => {
     const classes: string = clsx('oxygen-tooltip', className);
 
-    return <MuiTooltip className={classes} ref={ref} {...rest} />;
+    return <MuiTooltip ref={ref} className={classes} {...rest} />;
   },
 ) as ForwardRefExoticComponent<TooltipProps> & WithWrapperProps;
 
 Tooltip.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Tooltip.muiName = COMPONENT_NAME;
-Tooltip.defaultProps = {};
 
 export default Tooltip;
diff --git a/packages/react/src/components/Typography/Typography.tsx b/packages/react/src/components/Typography/Typography.tsx
index b7d39124..4bb05715 100644
--- a/packages/react/src/components/Typography/Typography.tsx
+++ b/packages/react/src/components/Typography/Typography.tsx
@@ -16,31 +16,65 @@
  * under the License.
  */
 
-import MuiTypography, {TypographyProps as MuiTypographyProps} from '@mui/material/Typography';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiTypography from '@mui/material/Typography';
+import type {TypographyProps as MuiTypographyProps, TypographyTypeMap} from '@mui/material/Typography';
 import clsx from 'clsx';
-import {ElementType, FC, ReactElement} from 'react';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import './typography.scss';
 
-export type TypographyProps<C extends ElementType = ElementType> = {
+export type TypographyProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = TypographyTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
   component?: C;
-} & Omit<MuiTypographyProps<C>, 'component'>;
+} & Omit<MuiTypographyProps<D, P>, 'component'>;
 
 const COMPONENT_NAME: string = 'Typography';
 
-const Typography: FC<TypographyProps> & WithWrapperProps = <C extends ElementType>(
-  props: TypographyProps<C>,
-): ReactElement => {
-  const {className, ...rest} = props;
-
-  const classes: string = clsx('oxygen-typography', className);
+/**
+ * The Typography can present your design and content as clearly and efficiently as possible.
+ *
+ * Demos:
+ *
+ * - [Breadcrumbs (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-breadcrumbs)
+ * - [Breadcrumbs (MUI)](https://mui.com/material-ui/react-breadcrumbs/)
+ * - [Typography (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-typography)
+ * - [Typography (MUI)](https://mui.com/material-ui/react-typography/)
+ *
+ * API:
+ *
+ * - [Typography API](https://mui.com/material-ui/api/typography/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Typography component.
+ * @param ref - The ref to be forwarded to the MuiTypography component.
+ * @returns The rendered Typography component.
+ */
+const Typography: OverridableComponent<TypographyTypeMap<TypographyProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {className, ...rest}: TypographyProps<C>,
+    ref: Ref<HTMLSpanElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-typography', className);
 
-  return <MuiTypography className={classes} {...rest} />;
-};
+    return <MuiTypography ref={ref} className={classes} {...rest} />;
+  },
+) as OverridableComponent<TypographyTypeMap<TypographyProps>> & WithWrapperProps;
 
 Typography.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Typography.muiName = COMPONENT_NAME;
-Typography.defaultProps = {};
 
 export default Typography;
diff --git a/packages/react/src/components/Typography/index.ts b/packages/react/src/components/Typography/index.ts
index 268027d3..c4369d63 100644
--- a/packages/react/src/components/Typography/index.ts
+++ b/packages/react/src/components/Typography/index.ts
@@ -17,4 +17,6 @@
  */
 
 export {default} from './Typography';
-export type {TypographyProps} from './Typography';
+export * from './Typography';
+
+export {TypographyPropsVariantOverrides, TypographyTypeMap} from '@mui/material/Typography';
diff --git a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx
index 9625e635..6bcb6159 100644
--- a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx
+++ b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx
@@ -16,26 +16,34 @@
  * under the License.
  */
 
-import {ListItemAvatar, ListSubheader, Radio} from '@mui/material';
+import ListSubheader from '@mui/material/ListSubheader';
 import {capitalize} from '@mui/material/utils';
 import clsx from 'clsx';
-import {FC, MouseEvent, ReactElement, ReactNode, useState} from 'react';
+import {forwardRef, useState} from 'react';
+import type {
+  ElementType,
+  ForwardRefExoticComponent,
+  MouseEvent,
+  MutableRefObject,
+  ReactElement,
+  ReactNode,
+} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Avatar from '../Avatar';
 import Button, {ButtonProps} from '../Button';
 import Divider from '../Divider';
 import ListItem from '../ListItem';
+import ListItemAvatar from '../ListItemAvatar';
 import ListItemIcon from '../ListItemIcon';
 import ListItemText from '../ListItemText';
-import Menu, {MenuProps} from '../Menu';
+import Menu from '../Menu';
+import type {MenuProps} from '../Menu';
 import MenuItem from '../MenuItem';
+import Radio from '../Radio';
 import './user-dropdown-menu.scss';
 
-/**
- * Interface for the Button Dropdown Menu component props.
- */
-export interface UserDropdownMenuProps extends Omit<MenuProps, 'open' | 'anchorEl'> {
+export type UserDropdownMenuProps<C extends ElementType = ElementType> = Omit<MenuProps<C>, 'open' | 'anchorEl'> & {
   /**
    * List item icon.
    */
@@ -84,9 +92,9 @@ export interface UserDropdownMenuProps extends Omit<MenuProps, 'open' | 'anchorE
    * Logged user information.
    */
   user?: UserTemplate;
-}
+};
 
-export interface ModeList {
+export type ModeList = {
   /**
    * Icon of the mode.
    */
@@ -95,9 +103,9 @@ export interface ModeList {
    * Display name of the mode.
    */
   name: string;
-}
+};
 
-export interface UserTemplate {
+export type UserTemplate = {
   /**
    * Email of logged user.
    */
@@ -110,144 +118,167 @@ export interface UserTemplate {
    * Display name of logged user.
    */
   name?: string;
-}
+};
 
 const COMPONENT_NAME: string = 'UserDropdownMenu';
 
-const UserDropdownMenu: FC<UserDropdownMenuProps> & WithWrapperProps = (
-  props: UserDropdownMenuProps & WithWrapperProps,
-) => {
-  const {
-    className,
-    children,
-    footerContent,
-    triggerOptions,
-    user,
-    modes,
-    mode,
-    onUserProfileNavigation,
-    modesHeading,
-    actionText,
-    actionIcon,
-    onModeChange,
-    onActionTrigger,
-    menuItems,
-    ...rest
-  } = props;
-
-  const classes: string = clsx('oxygen-user-dropdown-menu', className);
-
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
-  const openMenu: boolean = Boolean(anchorEl);
-
-  const handleModeChange = (selectedMode: string): void => {
-    onModeChange(selectedMode);
-  };
-
-  const onCloseMenu = (): void => {
-    setAnchorEl(null);
-  };
-
-  const handleUserProfileNavigation = (): void => {
-    onCloseMenu();
-    if (onUserProfileNavigation) {
-      onUserProfileNavigation();
-    }
-  };
-
-  const handleActionTrigger = (): void => {
-    onCloseMenu();
-    if (onActionTrigger) {
-      onActionTrigger();
-    }
-  };
-
-  const handleOpenUserMenu = (event: MouseEvent<HTMLElement>): void => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  return (
-    <>
-      <Button
-        aria-controls={openMenu ? 'oxygen-button-menu' : undefined}
-        aria-haspopup="true"
-        onClick={handleOpenUserMenu}
-        {...triggerOptions}
-      />
-      <Menu
-        open={openMenu}
-        anchorEl={anchorEl}
-        className={classes}
-        id="oxygen-button-menu"
-        onClose={onCloseMenu}
-        PaperProps={{className: 'oxygen-user-dropdown-menu-paper'}}
-        {...rest}
-      >
-        {children}
-        {user && (
-          <ListItem
-            className={clsx('oxygen-user-dropdown-menu-list-item', {
-              clickable: onUserProfileNavigation,
-            })}
-            onClick={(): void => handleUserProfileNavigation()}
-          >
-            <ListItemAvatar>
-              <Avatar
-                src={user?.image}
-                alt="User"
-                randomBackgroundColor={!user?.image}
-                backgroundColorRandomizer={user?.name}
-              >
-                {user?.name?.split('')[0]}
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={user?.name} secondary={user?.email} />
-          </ListItem>
-        )}
-        {menuItems?.length > 0 ? menuItems : null}
-        {modes?.length > 0 && (
-          <div>
-            <ListSubheader>{modesHeading}</ListSubheader>
-            {modes?.map((theme: ModeList) => {
-              const {name, icon} = theme;
-              return (
-                <MenuItem
-                  className="oxygen-user-dropdown-menu-item"
-                  key={name}
-                  onClick={(): void => handleModeChange(name)}
+/**
+ * The User Dropdown Menu lets you display a dropdown menu with user information and actions.
+ *
+ * Demos:
+ *
+ * - [UserDropdownMenu (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-image)
+ *
+ * API:
+ *
+ * - inherits [Menu API](https://mui.com/material-ui/api/menu/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the native component are also available.
+ * - FIXME: ⚠️ `component` prop is temporarily not supported due to https://github.com/wso2/oxygen-ui/issues/283
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the UserDropdownMenu component.
+ * @param ref - The ref to be forwarded to the Menu component.
+ * @returns The rendered UserDropdownMenu component.
+ */
+const UserDropdownMenu: ForwardRefExoticComponent<UserDropdownMenuProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {
+      className,
+      children,
+      footerContent,
+      triggerOptions,
+      user,
+      modes,
+      mode,
+      onUserProfileNavigation,
+      modesHeading,
+      actionText,
+      actionIcon,
+      onModeChange,
+      onActionTrigger,
+      menuItems,
+      ...rest
+    }: UserDropdownMenuProps<C>,
+    ref: MutableRefObject<HTMLDivElement>,
+  ): ReactElement => {
+    const classes: string = clsx('oxygen-user-dropdown-menu', className);
+
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+    const openMenu: boolean = Boolean(anchorEl);
+
+    const handleModeChange = (selectedMode: string): void => {
+      onModeChange(selectedMode);
+    };
+
+    const onCloseMenu = (): void => {
+      setAnchorEl(null);
+    };
+
+    const handleUserProfileNavigation = (): void => {
+      onCloseMenu();
+      if (onUserProfileNavigation) {
+        onUserProfileNavigation();
+      }
+    };
+
+    const handleActionTrigger = (): void => {
+      onCloseMenu();
+      if (onActionTrigger) {
+        onActionTrigger();
+      }
+    };
+
+    const handleOpenUserMenu = (event: MouseEvent<HTMLElement>): void => {
+      setAnchorEl(event.currentTarget);
+    };
+
+    return (
+      <>
+        <Button
+          aria-controls={openMenu ? 'oxygen-button-menu' : undefined}
+          aria-haspopup="true"
+          onClick={handleOpenUserMenu}
+          {...triggerOptions}
+        />
+        <Menu
+          ref={ref}
+          open={openMenu}
+          anchorEl={anchorEl}
+          className={classes}
+          id="oxygen-button-menu"
+          onClose={onCloseMenu}
+          PaperProps={{className: 'oxygen-user-dropdown-menu-paper'}}
+          {...rest}
+        >
+          {children}
+          {user && (
+            <ListItem
+              className={clsx('oxygen-user-dropdown-menu-list-item', {
+                clickable: onUserProfileNavigation,
+              })}
+              onClick={(): void => handleUserProfileNavigation()}
+            >
+              <ListItemAvatar>
+                <Avatar
+                  src={user?.image}
+                  alt="User"
+                  randomBackgroundColor={!user?.image}
+                  backgroundColorRandomizer={user?.name}
                 >
-                  <ListItemIcon>{icon}</ListItemIcon>
-                  <ListItemText primary={capitalize(name)} />
-                  <Radio
-                    className="oxygen-user-dropdown-menu-item-radio"
-                    checked={mode === name}
-                    onChange={(): void => handleModeChange(name)}
-                    value={name}
-                    name="radio-buttons"
-                    inputProps={{'aria-label': `mode-label-${name}`}}
-                  />
-                </MenuItem>
-              );
-            })}
-          </div>
-        )}
-        {actionText && (
-          <MenuItem className="dropdown-menu-item" onClick={(): void => handleActionTrigger()}>
-            <ListItemIcon>{actionIcon}</ListItemIcon>
-            <ListItemText primary={actionText} />
-          </MenuItem>
-        )}
-        {footerContent && (
-          <>
-            <Divider variant="middle" />
-            <div className="oxygen-user-dropdown-menu-footer">{footerContent}</div>
-          </>
-        )}
-      </Menu>
-    </>
-  );
-};
+                  {user?.name?.split('')[0]}
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={user?.name} secondary={user?.email} />
+            </ListItem>
+          )}
+          {menuItems?.length > 0 ? menuItems : null}
+          {modes?.length > 0 && (
+            <div>
+              <ListSubheader>{modesHeading}</ListSubheader>
+              {modes?.map((theme: ModeList) => {
+                const {name, icon} = theme;
+                return (
+                  <MenuItem
+                    className="oxygen-user-dropdown-menu-item"
+                    key={name}
+                    onClick={(): void => handleModeChange(name)}
+                  >
+                    <ListItemIcon>{icon}</ListItemIcon>
+                    <ListItemText primary={capitalize(name)} />
+                    <Radio
+                      className="oxygen-user-dropdown-menu-item-radio"
+                      checked={mode === name}
+                      onChange={(): void => handleModeChange(name)}
+                      value={name}
+                      name="radio-buttons"
+                      inputProps={{'aria-label': `mode-label-${name}`}}
+                    />
+                  </MenuItem>
+                );
+              })}
+            </div>
+          )}
+          {actionText && (
+            <MenuItem className="dropdown-menu-item" onClick={(): void => handleActionTrigger()}>
+              <ListItemIcon>{actionIcon}</ListItemIcon>
+              <ListItemText primary={actionText} />
+            </MenuItem>
+          )}
+          {footerContent && (
+            <>
+              <Divider variant="middle" />
+              <div className="oxygen-user-dropdown-menu-footer">{footerContent}</div>
+            </>
+          )}
+        </Menu>
+      </>
+    );
+  },
+) as ForwardRefExoticComponent<UserDropdownMenuProps> & WithWrapperProps;
 
 UserDropdownMenu.displayName = composeComponentDisplayName(COMPONENT_NAME);
 UserDropdownMenu.muiName = COMPONENT_NAME;
diff --git a/packages/react/src/components/UserDropdownMenu/index.ts b/packages/react/src/components/UserDropdownMenu/index.ts
index f0dd34d2..45a27d80 100644
--- a/packages/react/src/components/UserDropdownMenu/index.ts
+++ b/packages/react/src/components/UserDropdownMenu/index.ts
@@ -17,6 +17,4 @@
  */
 
 export {default} from './UserDropdownMenu';
-export type {UserDropdownMenuProps} from './UserDropdownMenu';
-export type {ModeList} from './UserDropdownMenu';
-export type {UserTemplate} from './UserDropdownMenu';
+export * from './UserDropdownMenu';
diff --git a/packages/react/src/components/Wizard/Wizard.tsx b/packages/react/src/components/Wizard/Wizard.tsx
index 33991d7b..5cdab65a 100644
--- a/packages/react/src/components/Wizard/Wizard.tsx
+++ b/packages/react/src/components/Wizard/Wizard.tsx
@@ -16,11 +16,14 @@
  * under the License.
  */
 
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
-import {FC, HTMLAttributes, ReactElement, useCallback, useMemo, useState} from 'react';
+import {forwardRef, useCallback, useMemo, useState} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
 import type {WithWrapperProps} from '../../models/component';
 import composeComponentDisplayName from '../../utils/compose-component-display-name';
 import Box from '../Box';
+import type {BoxProps, BoxTypeMap} from '../Box';
 import Button from '../Button';
 import Card from '../Card';
 import CardActions from '../CardActions';
@@ -31,7 +34,7 @@ import Stepper from '../Stepper';
 import Typography from '../Typography';
 import './wizard.scss';
 
-export interface WizardProps extends HTMLAttributes<HTMLDivElement> {
+export type WizardProps<C extends ElementType = ElementType> = BoxProps<C> & {
   /**
    * Allow backward navigation. This will show a button allowing you to navigate backwards.
    */
@@ -88,115 +91,132 @@ export interface WizardProps extends HTMLAttributes<HTMLDivElement> {
    * Title of the wizard.
    */
   title: string;
-}
+};
 
 const COMPONENT_NAME: string = 'Wizard';
 
-const Wizard: FC<WizardProps> & WithWrapperProps = (props: WizardProps): ReactElement => {
-  const {
-    allowBackwardNavigation,
-    allowCancel,
-    animateOnSlide,
-    className,
-    title,
-    subtitle,
-    nextButtonText,
-    previousButtonText,
-    cancelButtonText,
-    onCancelButtonClick,
-    onNextButtonClick,
-    onPreviousButtonClick,
-    onFinishButtonClick,
-    finishButtonText,
-    steps,
-  } = props;
-
-  const [currentStep, setCurrentStep] = useState<number>(0);
-
-  const classes: string = clsx('oxygen-wizard', className);
-
-  const isLastStep: boolean = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]);
-  const isFirstStep: boolean = useMemo(() => currentStep === 0, [currentStep]);
-  const displayCurrentStep: number = useMemo(() => currentStep + 1, [currentStep]);
-
-  const handleNextButtonClick: () => Promise<void> = useCallback(async (): Promise<void> => {
-    if (isLastStep) {
-      if (onFinishButtonClick && onFinishButtonClick instanceof Function) {
-        await onFinishButtonClick();
+/**
+ * The Wizard lets you create a step-by-step wizard with a progress bar.
+ *
+ * Demos:
+ *
+ * - [Wizard (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/patterns-wizard)
+ *
+ * API:
+ *
+ * - inherits [Box API](https://mui.com/material-ui/api/box/)
+ *
+ * @remarks
+ * - ✨ This is a custom component that is not available in the Material-UI library.
+ * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Wizard component.
+ * @param ref - The ref to be forwarded to the Box component.
+ * @returns The rendered Wizard component.
+ */
+const Wizard: OverridableComponent<BoxTypeMap<WizardProps>> & WithWrapperProps = forwardRef(
+  <C extends ElementType = ElementType>(
+    {
+      allowBackwardNavigation = true,
+      allowCancel = false,
+      animateOnSlide,
+      className,
+      title,
+      subtitle,
+      nextButtonText = 'Next',
+      previousButtonText = 'Previous',
+      cancelButtonText = 'Cancel',
+      onCancelButtonClick,
+      onNextButtonClick,
+      onPreviousButtonClick,
+      onFinishButtonClick,
+      finishButtonText = 'Finish',
+      steps,
+    }: WizardProps<C>,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const [currentStep, setCurrentStep] = useState<number>(0);
+
+    const classes: string = clsx('oxygen-wizard', className);
+
+    const isLastStep: boolean = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]);
+    const isFirstStep: boolean = useMemo(() => currentStep === 0, [currentStep]);
+    const displayCurrentStep: number = useMemo(() => currentStep + 1, [currentStep]);
+
+    const handleNextButtonClick: () => Promise<void> = useCallback(async (): Promise<void> => {
+      if (isLastStep) {
+        if (onFinishButtonClick && onFinishButtonClick instanceof Function) {
+          await onFinishButtonClick();
+        }
+
+        return;
       }
 
-      return;
-    }
-
-    if (onNextButtonClick && onNextButtonClick instanceof Function) {
-      await onNextButtonClick();
-    }
-
-    setCurrentStep((step: number) => step + 1);
-  }, [isLastStep, onFinishButtonClick, onNextButtonClick]);
+      if (onNextButtonClick && onNextButtonClick instanceof Function) {
+        await onNextButtonClick();
+      }
 
-  const handlePreviousButtonClick: () => Promise<void> = useCallback(async (): Promise<void> => {
-    if (isFirstStep) {
-      return;
-    }
+      setCurrentStep((step: number) => step + 1);
+    }, [isLastStep, onFinishButtonClick, onNextButtonClick]);
 
-    if (onPreviousButtonClick && onPreviousButtonClick instanceof Function) {
-      await onPreviousButtonClick();
-    }
-    setCurrentStep((step: number) => step - 1);
-  }, [isFirstStep, onPreviousButtonClick]);
+    const handlePreviousButtonClick: () => Promise<void> = useCallback(async (): Promise<void> => {
+      if (isFirstStep) {
+        return;
+      }
 
-  return (
-    <Box className={classes}>
-      <Card elevation={1} className="oxygen-wizard-card">
-        <CardHeader title={title} subheader={subtitle} />
-        <CardContent className="oxygen-wizard-card-content">
-          <Stepper animateOnSlide={animateOnSlide} currentStep={currentStep} steps={steps} />
-        </CardContent>
-        <CardActions className="oxygen-wizard-actions">
-          <Box>
-            {allowBackwardNavigation && !isFirstStep && (
-              <Button color="secondary" onClick={handlePreviousButtonClick}>
-                {previousButtonText}
-              </Button>
-            )}
-          </Box>
-          <Box className="oxygen-wizard-right-aligned-buttons">
-            {allowCancel && (
-              <Button variant="contained" color="secondary" onClick={onCancelButtonClick}>
-                {cancelButtonText}
+      if (onPreviousButtonClick && onPreviousButtonClick instanceof Function) {
+        await onPreviousButtonClick();
+      }
+      setCurrentStep((step: number) => step - 1);
+    }, [isFirstStep, onPreviousButtonClick]);
+
+    return (
+      <Box ref={ref} className={classes}>
+        <Card elevation={1} className="oxygen-wizard-card">
+          <CardHeader title={title} subheader={subtitle} />
+          <CardContent className="oxygen-wizard-card-content">
+            <Stepper animateOnSlide={animateOnSlide} currentStep={currentStep} steps={steps} />
+          </CardContent>
+          <CardActions className="oxygen-wizard-actions">
+            <Box>
+              {allowBackwardNavigation && !isFirstStep && (
+                <Button color="secondary" onClick={handlePreviousButtonClick}>
+                  {previousButtonText}
+                </Button>
+              )}
+            </Box>
+            <Box className="oxygen-wizard-right-aligned-buttons">
+              {allowCancel && (
+                <Button variant="contained" color="secondary" onClick={onCancelButtonClick}>
+                  {cancelButtonText}
+                </Button>
+              )}
+              <Button variant="contained" color="primary" onClick={handleNextButtonClick}>
+                {isLastStep ? finishButtonText : nextButtonText}
               </Button>
-            )}
-            <Button variant="contained" color="primary" onClick={handleNextButtonClick}>
-              {isLastStep ? finishButtonText : nextButtonText}
-            </Button>
+            </Box>
+          </CardActions>
+        </Card>
+        <Box className="oxygen-wizard-progress-container">
+          <Typography>{`${displayCurrentStep}/${steps.length}`}</Typography>
+          <Box className="oxygen-wizard-progress-bar-container">
+            <LinearProgress
+              className="oxygen-wizard-progress-bar"
+              variant="determinate"
+              value={(displayCurrentStep / steps.length) * 100}
+              aria-label="Wizard Progress Bar"
+            />
           </Box>
-        </CardActions>
-      </Card>
-      <Box className="oxygen-wizard-progress-container">
-        <Typography>{`${displayCurrentStep}/${steps.length}`}</Typography>
-        <Box className="oxygen-wizard-progress-bar-container">
-          <LinearProgress
-            className="oxygen-wizard-progress-bar"
-            variant="determinate"
-            value={(displayCurrentStep / steps.length) * 100}
-            aria-label="Wizard Progress Bar"
-          />
         </Box>
       </Box>
-    </Box>
-  );
-};
+    );
+  },
+) as OverridableComponent<BoxTypeMap<WizardProps>> & WithWrapperProps;
 
 Wizard.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Wizard.muiName = COMPONENT_NAME;
-Wizard.defaultProps = {
-  allowBackwardNavigation: true,
-  allowCancel: false,
-  cancelButtonText: 'Cancel',
-  finishButtonText: 'Finish',
-  nextButtonText: 'Next',
-  previousButtonText: 'Previous',
-};
 
 export default Wizard;
diff --git a/packages/react/src/components/Wizard/index.ts b/packages/react/src/components/Wizard/index.ts
index 8242fc4f..363db8c0 100644
--- a/packages/react/src/components/Wizard/index.ts
+++ b/packages/react/src/components/Wizard/index.ts
@@ -17,4 +17,4 @@
  */
 
 export {default} from './Wizard';
-export type {WizardProps} from './Wizard';
+export * from './Wizard';
diff --git a/packages/react/src/models/component.ts b/packages/react/src/models/component.ts
index ea61cf6e..72173a53 100644
--- a/packages/react/src/models/component.ts
+++ b/packages/react/src/models/component.ts
@@ -16,9 +16,11 @@
  * under the License.
  */
 
-export type WithWrapperProps = MuiWrapperProps;
+import {NamedExoticComponent} from 'react';
 
-export interface MuiWrapperProps {
+export type WithWrapperProps = MuiWrapperProps & NamedExoticComponent;
+
+interface MuiWrapperProps {
   /**
    * Component name with `Mui` prefix.
    * To provide maximum flexibility and performance, MUI needs a way to know the nature
diff --git a/packages/react/src/theme/ThemeProvider.tsx b/packages/react/src/theme/ThemeProvider.tsx
index 87f234ab..4d1e40ae 100644
--- a/packages/react/src/theme/ThemeProvider.tsx
+++ b/packages/react/src/theme/ThemeProvider.tsx
@@ -51,21 +51,18 @@ export type ThemeProviderProps = Partial<CssVarsProviderConfig<SupportedColorSch
     | undefined;
 };
 
-const ThemeProvider = (props: PropsWithChildren<ThemeProviderProps>): ReactElement => {
-  const {children, theme, ...rest} = props;
-  return (
-    <StyledEngineProvider injectFirst>
-      <CssVarsProvider
-        modeStorageKey="oxygen-mode"
-        colorSchemeStorageKey="oxygen-color-scheme"
-        theme={theme ?? defaultTheme}
-        {...rest}
-      >
-        <CssBaseline />
-        {children}
-      </CssVarsProvider>
-    </StyledEngineProvider>
-  );
-};
+const ThemeProvider = ({children, theme, ...rest}: PropsWithChildren<ThemeProviderProps>): ReactElement => (
+  <StyledEngineProvider injectFirst>
+    <CssVarsProvider
+      modeStorageKey="oxygen-mode"
+      colorSchemeStorageKey="oxygen-color-scheme"
+      theme={theme ?? defaultTheme}
+      {...rest}
+    >
+      <CssBaseline />
+      {children}
+    </CssVarsProvider>
+  </StyledEngineProvider>
+);
 
 export default ThemeProvider;