diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0c4f19f344..9534259aae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -61,6 +61,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated `CheckboxWidget` to get the `required` state of the checkbox from the `schemaRequiresTrueValue()` utility function rather than the `required` prop, fixing [#3317](https://github.com/rjsf-team/react-jsonschema-form/issues/3317)
   - Also fixed the `CheckboxWidget` missing label issue [#3302](https://github.com/rjsf-team/react-jsonschema-form/issues/3302)
 - Updated the test for the `CheckboxWidget` validating that the `schema.title` is passed as the label, fixing [#3302](https://github.com/rjsf-team/react-jsonschema-form/issues/3302)
+- Updated the theme to accept generic types, exporting `generateXXX` functions for `Form`, `Theme`, `Templates` and `Widgets` to support using the theme with user-specified type generics, partially fixing [#3072](https://github.com/rjsf-team/react-jsonschema-form/issues/3072)
 
 ## @rjsf/utils
 - Updated the `SubmitButtonProps` and `IconButtonProps` to add required `registry` prop, fixing - [#3314](https://github.com/rjsf-team/react-jsonschema-form/issues/3314)
diff --git a/packages/semantic-ui/src/AddButton/AddButton.tsx b/packages/semantic-ui/src/AddButton/AddButton.tsx
index fc025ba2b4..8f5e63a0ce 100644
--- a/packages/semantic-ui/src/AddButton/AddButton.tsx
+++ b/packages/semantic-ui/src/AddButton/AddButton.tsx
@@ -1,8 +1,19 @@
 import React from "react";
-import { IconButtonProps } from "@rjsf/utils";
 import { Button, Icon, ButtonProps } from "semantic-ui-react";
+import {
+  FormContextType,
+  IconButtonProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
-function AddButton({ uiSchema, registry, color, ...props }: IconButtonProps) {
+/** The `AddButton` renders a button that represent the `Add` action on a form
+ */
+export default function AddButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ uiSchema, registry, color, ...props }: IconButtonProps<T, S, F>) {
   return (
     <Button
       title="Add Item"
@@ -15,5 +26,3 @@ function AddButton({ uiSchema, registry, color, ...props }: IconButtonProps) {
     </Button>
   );
 }
-
-export default AddButton;
diff --git a/packages/semantic-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/semantic-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
index a7669ffee8..cba0dfebef 100644
--- a/packages/semantic-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
+++ b/packages/semantic-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -1,7 +1,10 @@
 import React from "react";
 import {
   ArrayFieldTemplateItemType,
+  FormContextType,
   GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
   getUiOptions,
 } from "@rjsf/utils";
 import { Button, Grid, Segment } from "semantic-ui-react";
@@ -13,7 +16,15 @@ const gridStyle = (vertical: boolean) => ({
   gridTemplateColumns: `1fr ${vertical ? 65 : 110}px`,
 });
 
-const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
   const {
     children,
     disabled,
@@ -30,7 +41,7 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
   } = props;
   const { MoveDownButton, MoveUpButton, RemoveButton } =
     registry.templates.ButtonTemplates;
-  const uiOptions = getUiOptions(uiSchema);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
   // Pull the semantic props out of the uiOptions that were put in via the ArrayFieldTemplate
   const { horizontalButtons = false, wrapItem = false } =
     uiOptions.semantic as GenericObjectType;
@@ -86,6 +97,4 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
       </MaybeWrap>
     </div>
   );
-};
-
-export default ArrayFieldItemTemplate;
+}
diff --git a/packages/semantic-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/semantic-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
index 0f52e63fe8..f698b82116 100644
--- a/packages/semantic-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
+++ b/packages/semantic-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -4,52 +4,66 @@ import {
   getUiOptions,
   isFixedItems,
   ArrayFieldTemplateProps,
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
   UI_OPTIONS_KEY,
 } from "@rjsf/utils";
 
 import { cleanClassNames, getSemanticProps } from "../util";
 
-function ArrayFieldTemplate({
-  uiSchema,
-  idSchema,
-  canAdd,
-  className,
-  // classNames, This is not part of the type, so it is likely never passed in
-  disabled,
-  formContext,
-  items,
-  onAddClick,
-  // options, This is not part of the type, so it is likely never passed in
-  readonly,
-  required,
-  schema,
-  title,
-  registry,
-}: ArrayFieldTemplateProps) {
-  const semanticProps = getSemanticProps({
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+  const {
+    uiSchema,
+    idSchema,
+    canAdd,
+    className,
+    // classNames, This is not part of the type, so it is likely never passed in
+    disabled,
+    formContext,
+    items,
+    onAddClick,
+    // options, This is not part of the type, so it is likely never passed in
+    readonly,
+    required,
+    schema,
+    title,
+    registry,
+  } = props;
+  const semanticProps = getSemanticProps<T, S, F>({
     uiSchema,
     formContext,
     defaultSchemaProps: { horizontalButtons: false, wrapItem: false },
   });
   const { horizontalButtons, wrapItem } = semanticProps;
   const semantic = { horizontalButtons, wrapItem };
-  const uiOptions = getUiOptions(uiSchema);
-  const ArrayFieldDescriptionTemplate =
-    getTemplate<"ArrayFieldDescriptionTemplate">(
-      "ArrayFieldDescriptionTemplate",
-      registry,
-      uiOptions
-    );
-  const ArrayFieldItemTemplate = getTemplate<"ArrayFieldItemTemplate">(
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<
+    "ArrayFieldDescriptionTemplate",
+    T,
+    S,
+    F
+  >("ArrayFieldDescriptionTemplate", registry, uiOptions);
+  const ArrayFieldItemTemplate = getTemplate<"ArrayFieldItemTemplate", T, S, F>(
     "ArrayFieldItemTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldTitleTemplate = getTemplate<"ArrayFieldTitleTemplate">(
+  const ArrayFieldTitleTemplate = getTemplate<
     "ArrayFieldTitleTemplate",
-    registry,
-    uiOptions
-  );
+    T,
+    S,
+    F
+  >("ArrayFieldTitleTemplate", registry, uiOptions);
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -58,7 +72,7 @@ function ArrayFieldTemplate({
     <div
       className={cleanClassNames([
         className,
-        isFixedItems(schema) ? "" : "sortable-form-fields",
+        isFixedItems<S>(schema) ? "" : "sortable-form-fields",
       ])}
     >
       <ArrayFieldTitleTemplate
@@ -79,23 +93,29 @@ function ArrayFieldTemplate({
       <div key={`array-item-list-${idSchema.$id}`}>
         <div className="row array-item-list">
           {items &&
-            items.map(({ key, uiSchema: itemUiSchema = {}, ...props }) => {
-              // Merge in the semantic props from the ArrayFieldTemplate into each of the items
-              const mergedUiSchema = {
-                ...itemUiSchema,
-                [UI_OPTIONS_KEY]: {
-                  ...itemUiSchema[UI_OPTIONS_KEY],
-                  semantic,
-                },
-              };
-              return (
-                <ArrayFieldItemTemplate
-                  key={key}
-                  {...props}
-                  uiSchema={mergedUiSchema}
-                />
-              );
-            })}
+            items.map(
+              ({
+                key,
+                uiSchema: itemUiSchema = {},
+                ...props
+              }: ArrayFieldTemplateItemType<T, S, F>) => {
+                // Merge in the semantic props from the ArrayFieldTemplate into each of the items
+                const mergedUiSchema = {
+                  ...itemUiSchema,
+                  [UI_OPTIONS_KEY]: {
+                    ...itemUiSchema[UI_OPTIONS_KEY],
+                    semantic,
+                  },
+                };
+                return (
+                  <ArrayFieldItemTemplate
+                    key={key}
+                    {...props}
+                    uiSchema={mergedUiSchema}
+                  />
+                );
+              }
+            )}
         </div>
         {canAdd && (
           <div
@@ -117,5 +137,3 @@ function ArrayFieldTemplate({
     </div>
   );
 }
-
-export default ArrayFieldTemplate;
diff --git a/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx
index fa1bd8bd2c..e0944f2cee 100644
--- a/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx
+++ b/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -1,9 +1,25 @@
 import React from "react";
 import { Form } from "semantic-ui-react";
 import { getSemanticProps } from "../util";
-import { getInputProps, WidgetProps } from "@rjsf/utils";
+import {
+  getInputProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
 
-function BaseInputTemplate(props: WidgetProps) {
+/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+ * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+ * It can be customized/overridden for other themes or individual implementations as needed.
+ *
+ * @param props - The `WidgetProps` for this template
+ */
+export default function BaseInputTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
   const {
     id,
     placeholder,
@@ -24,8 +40,8 @@ function BaseInputTemplate(props: WidgetProps) {
     registry,
     rawErrors = [],
   } = props;
-  const inputProps = getInputProps(schema, type, options);
-  const semanticProps = getSemanticProps({
+  const inputProps = getInputProps<T, S, F>(schema, type, options);
+  const semanticProps = getSemanticProps<T, S, F>({
     uiSchema,
     formContext,
     options,
@@ -71,4 +87,3 @@ function BaseInputTemplate(props: WidgetProps) {
     </>
   );
 }
-export default BaseInputTemplate;
diff --git a/packages/semantic-ui/src/CheckboxWidget/CheckboxWidget.tsx b/packages/semantic-ui/src/CheckboxWidget/CheckboxWidget.tsx
index ddf2b510e6..6d966da0b4 100644
--- a/packages/semantic-ui/src/CheckboxWidget/CheckboxWidget.tsx
+++ b/packages/semantic-ui/src/CheckboxWidget/CheckboxWidget.tsx
@@ -1,9 +1,24 @@
 import React from "react";
-import { WidgetProps, schemaRequiresTrueValue } from "@rjsf/utils";
+import {
+  schemaRequiresTrueValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
 import { Form, CheckboxProps } from "semantic-ui-react";
 import { getSemanticProps } from "../util";
 
-function CheckboxWidget(props: WidgetProps) {
+/** The `CheckBoxWidget` is a widget for rendering boolean properties.
+ *  It is typically used to represent a boolean.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
   const {
     id,
     value,
@@ -20,7 +35,7 @@ function CheckboxWidget(props: WidgetProps) {
     uiSchema,
     rawErrors = [],
   } = props;
-  const semanticProps = getSemanticProps({
+  const semanticProps = getSemanticProps<T, S, F>({
     options,
     formContext,
     uiSchema,
@@ -31,7 +46,7 @@ function CheckboxWidget(props: WidgetProps) {
   // Because an unchecked checkbox will cause html5 validation to fail, only add
   // the "required" attribute if the field value must be "true", due to the
   // "const" or "enum" keywords
-  const required = schemaRequiresTrueValue(schema);
+  const required = schemaRequiresTrueValue<S>(schema);
   const _onChange = (
     _: React.FormEvent<HTMLInputElement>,
     data: CheckboxProps
@@ -56,4 +71,3 @@ function CheckboxWidget(props: WidgetProps) {
     />
   );
 }
-export default CheckboxWidget;
diff --git a/packages/semantic-ui/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/semantic-ui/src/CheckboxesWidget/CheckboxesWidget.tsx
index b6de9f924a..d642f16a30 100644
--- a/packages/semantic-ui/src/CheckboxesWidget/CheckboxesWidget.tsx
+++ b/packages/semantic-ui/src/CheckboxesWidget/CheckboxesWidget.tsx
@@ -1,10 +1,17 @@
 import React from "react";
 import { Form } from "semantic-ui-react";
-import { getTemplate, WidgetProps, EnumOptionsType } from "@rjsf/utils";
+import {
+  getTemplate,
+  EnumOptionsType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
 import { getSemanticProps } from "../util";
 
-function selectValue(
-  value: EnumOptionsType["value"],
+function selectValue<S extends StrictRJSFSchema = RJSFSchema>(
+  value: EnumOptionsType<S>["value"],
   selected: any,
   all: any[]
 ) {
@@ -15,11 +22,23 @@ function selectValue(
   return updated.sort((a: any, b: any) => all.indexOf(a) > all.indexOf(b));
 }
 
-function deselectValue(value: EnumOptionsType["value"], selected: any) {
+function deselectValue<S extends StrictRJSFSchema = RJSFSchema>(
+  value: EnumOptionsType<S>["value"],
+  selected: any
+) {
   return selected.filter((v: any) => v !== value);
 }
 
-function CheckboxesWidget(props: WidgetProps) {
+/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+ *  It is typically used to represent an array of enums.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxesWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
   const {
     id,
     disabled,
@@ -36,14 +55,14 @@ function CheckboxesWidget(props: WidgetProps) {
     rawErrors = [],
     registry,
   } = props;
-  const TitleFieldTemplate = getTemplate<"TitleFieldTemplate">(
+  const TitleFieldTemplate = getTemplate<"TitleFieldTemplate", T, S, F>(
     "TitleFieldTemplate",
     registry,
     options
   );
   const { enumOptions, enumDisabled, inline } = options;
   const { title } = schema;
-  const semanticProps = getSemanticProps({
+  const semanticProps = getSemanticProps<T, S, F>({
     options,
     formContext,
     uiSchema,
@@ -57,9 +76,9 @@ function CheckboxesWidget(props: WidgetProps) {
       // eslint-disable-next-line no-shadow
       const all = enumOptions ? enumOptions.map(({ value }) => value) : [];
       if (checked) {
-        onChange(selectValue(option.value, value, all));
+        onChange(selectValue<S>(option.value, value, all));
       } else {
-        onChange(deselectValue(option.value, value));
+        onChange(deselectValue<S>(option.value, value));
       }
     };
 
@@ -67,7 +86,7 @@ function CheckboxesWidget(props: WidgetProps) {
   const _onFocus = () => onFocus && onFocus(id, value);
   const inlineOption = inline ? { inline: true } : { grouped: true };
   return (
-    <React.Fragment>
+    <>
       {title && (
         <TitleFieldTemplate
           id={`${id}-title`}
@@ -102,7 +121,6 @@ function CheckboxesWidget(props: WidgetProps) {
             );
           })}
       </Form.Group>
-    </React.Fragment>
+    </>
   );
 }
-export default CheckboxesWidget;
diff --git a/packages/semantic-ui/src/DescriptionField/DescriptionField.tsx b/packages/semantic-ui/src/DescriptionField/DescriptionField.tsx
index de25939926..3785fb8454 100644
--- a/packages/semantic-ui/src/DescriptionField/DescriptionField.tsx
+++ b/packages/semantic-ui/src/DescriptionField/DescriptionField.tsx
@@ -1,7 +1,21 @@
 import React from "react";
-import { DescriptionFieldProps } from "@rjsf/utils";
+import {
+  DescriptionFieldProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
-function DescriptionField({ description, id }: DescriptionFieldProps) {
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: DescriptionFieldProps<T, S, F>) {
+  const { id, description } = props;
   if (!description) {
     return null;
   }
@@ -11,5 +25,3 @@ function DescriptionField({ description, id }: DescriptionFieldProps) {
     </p>
   );
 }
-
-export default DescriptionField;
diff --git a/packages/semantic-ui/src/ErrorList/ErrorList.tsx b/packages/semantic-ui/src/ErrorList/ErrorList.tsx
index 8442aa54ba..e809dff7e2 100644
--- a/packages/semantic-ui/src/ErrorList/ErrorList.tsx
+++ b/packages/semantic-ui/src/ErrorList/ErrorList.tsx
@@ -1,14 +1,21 @@
 import React from "react";
-import { ErrorListProps } from "@rjsf/utils";
 import { Message } from "semantic-ui-react";
+import {
+  ErrorListProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
-/**
+/** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
  *
- * @param errors
- * @returns {*}
- * @constructor
+ * @param props - The `ErrorListProps` for this component
  */
-function ErrorList({ errors }: ErrorListProps) {
+export default function ErrorList<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ errors }: ErrorListProps<T, S, F>) {
   return (
     <Message negative>
       <Message.Header>Errors</Message.Header>
@@ -20,5 +27,3 @@ function ErrorList({ errors }: ErrorListProps) {
     </Message>
   );
 }
-
-export default ErrorList;
diff --git a/packages/semantic-ui/src/FieldErrorTemplate/FieldErrorTemplate.tsx b/packages/semantic-ui/src/FieldErrorTemplate/FieldErrorTemplate.tsx
index c890cd6a70..f5eb35a194 100644
--- a/packages/semantic-ui/src/FieldErrorTemplate/FieldErrorTemplate.tsx
+++ b/packages/semantic-ui/src/FieldErrorTemplate/FieldErrorTemplate.tsx
@@ -1,5 +1,10 @@
 import React from "react";
-import { FieldErrorProps } from "@rjsf/utils";
+import {
+  FieldErrorProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 import { nanoid } from "nanoid";
 import { Label, List } from "semantic-ui-react";
 
@@ -12,22 +17,17 @@ const DEFAULT_OPTIONS = {
   },
 };
 
-/**
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
  *
- * @param errors
- * @param displayError
- * @returns {*}
- * @constructor
- * @return {null}
+ * @param props - The `FieldErrorProps` for the errors being rendered
  */
-function FieldErrorTemplate({
-  errors,
-  idSchema,
-  uiSchema,
-  registry,
-}: FieldErrorProps) {
+export default function FieldErrorTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ errors, idSchema, uiSchema, registry }: FieldErrorProps<T, S, F>) {
   const { formContext } = registry;
-  const options = getSemanticErrorProps({
+  const options = getSemanticErrorProps<T, S, F>({
     formContext,
     uiSchema,
     defaultProps: DEFAULT_OPTIONS,
@@ -53,5 +53,3 @@ function FieldErrorTemplate({
   }
   return null;
 }
-
-export default FieldErrorTemplate;
diff --git a/packages/semantic-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx b/packages/semantic-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
index 248ace21b3..2dee895e18 100644
--- a/packages/semantic-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
+++ b/packages/semantic-ui/src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -1,16 +1,25 @@
 import React from "react";
-import { FieldHelpProps } from "@rjsf/utils";
 import { Message } from "semantic-ui-react";
+import {
+  FieldHelpProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
-/**
- * @return {null}
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
  */
-function FieldHelpTemplate({ help, idSchema }: FieldHelpProps) {
+export default function FieldHelpTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldHelpProps<T, S, F>) {
+  const { idSchema, help } = props;
   if (help) {
     const id = `${idSchema.$id}__help`;
     return <Message size="mini" info id={id} content={help} />;
   }
   return null;
 }
-
-export default FieldHelpTemplate;
diff --git a/packages/semantic-ui/src/FieldTemplate/FieldTemplate.tsx b/packages/semantic-ui/src/FieldTemplate/FieldTemplate.tsx
index cd31ae33a0..038747dc6b 100644
--- a/packages/semantic-ui/src/FieldTemplate/FieldTemplate.tsx
+++ b/packages/semantic-ui/src/FieldTemplate/FieldTemplate.tsx
@@ -1,36 +1,55 @@
 import React from "react";
-import { getTemplate, getUiOptions, FieldTemplateProps } from "@rjsf/utils";
+import {
+  FieldTemplateProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getTemplate,
+  getUiOptions,
+} from "@rjsf/utils";
 import { Form } from "semantic-ui-react";
 import { getSemanticProps, MaybeWrap } from "../util";
 
-function FieldTemplate({
-  id,
-  children,
-  classNames,
-  displayLabel,
-  label,
-  errors,
-  help,
-  hidden,
-  rawDescription,
-  registry,
-  schema,
-  uiSchema,
-  ...props
-}: FieldTemplateProps) {
-  const semanticProps = getSemanticProps(props);
+/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+ * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+ *
+ * @param props - The `FieldTemplateProps` for this component
+ */
+export default function FieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldTemplateProps<T, S, F>) {
+  const {
+    id,
+    children,
+    classNames,
+    displayLabel,
+    label,
+    errors,
+    help,
+    hidden,
+    rawDescription,
+    registry,
+    schema,
+    uiSchema,
+    ...otherProps
+  } = props;
+  const semanticProps = getSemanticProps<T, S, F>(otherProps);
   const { wrapLabel, wrapContent } = semanticProps;
-  const uiOptions = getUiOptions(uiSchema);
-  const WrapIfAdditionalTemplate = getTemplate<"WrapIfAdditionalTemplate">(
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<
     "WrapIfAdditionalTemplate",
-    registry,
-    uiOptions
-  );
-  const DescriptionFieldTemplate = getTemplate<"DescriptionFieldTemplate">(
+    T,
+    S,
+    F
+  >("WrapIfAdditionalTemplate", registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate<
     "DescriptionFieldTemplate",
-    registry,
-    uiOptions
-  );
+    T,
+    S,
+    F
+  >("DescriptionFieldTemplate", registry, uiOptions);
 
   if (hidden) {
     return <div style={{ display: "none" }}>{children}</div>;
@@ -44,7 +63,7 @@ function FieldTemplate({
       registry={registry}
       schema={schema}
       uiSchema={uiSchema}
-      {...props}
+      {...otherProps}
     >
       <Form.Group key={id} widths="equal" grouped>
         <MaybeWrap wrap={wrapContent} className="sui-field-content">
@@ -69,5 +88,3 @@ function FieldTemplate({
     </WrapIfAdditionalTemplate>
   );
 }
-
-export default FieldTemplate;
diff --git a/packages/semantic-ui/src/IconButton/IconButton.tsx b/packages/semantic-ui/src/IconButton/IconButton.tsx
index e0fb87d50d..8e020822c9 100644
--- a/packages/semantic-ui/src/IconButton/IconButton.tsx
+++ b/packages/semantic-ui/src/IconButton/IconButton.tsx
@@ -1,8 +1,17 @@
 import React from "react";
-import { IconButtonProps } from "@rjsf/utils";
 import { Button, ButtonProps } from "semantic-ui-react";
+import {
+  FormContextType,
+  IconButtonProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 
-function IconButton(props: IconButtonProps) {
+function IconButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
   const {
     icon,
     iconType,
@@ -25,14 +34,26 @@ function IconButton(props: IconButtonProps) {
 
 export default IconButton;
 
-export function MoveDownButton(props: IconButtonProps) {
+export function MoveDownButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
   return <IconButton title="Move down" {...props} icon="angle down" />;
 }
 
-export function MoveUpButton(props: IconButtonProps) {
+export function MoveUpButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
   return <IconButton title="Move up" {...props} icon="angle up" />;
 }
 
-export function RemoveButton(props: IconButtonProps) {
+export function RemoveButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
   return <IconButton title="Remove" {...props} icon="trash" />;
 }
diff --git a/packages/semantic-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/semantic-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
index 10cdedbb1d..e34449f259 100644
--- a/packages/semantic-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
+++ b/packages/semantic-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -1,33 +1,52 @@
 import React from "react";
-import { ObjectFieldTemplateProps } from "@rjsf/utils";
 import { Grid } from "semantic-ui-react";
-import { canExpand, getTemplate, getUiOptions } from "@rjsf/utils";
+import {
+  FormContextType,
+  ObjectFieldTemplateProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  canExpand,
+  getTemplate,
+  getUiOptions,
+} from "@rjsf/utils";
 
-function ObjectFieldTemplate({
-  description,
-  onAddClick,
-  title,
-  properties,
-  disabled,
-  readonly,
-  required,
-  uiSchema,
-  schema,
-  formData,
-  idSchema,
-  registry,
-}: ObjectFieldTemplateProps) {
-  const uiOptions = getUiOptions(uiSchema);
-  const TitleFieldTemplate = getTemplate<"TitleFieldTemplate">(
+/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
+ * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
+ * the properties.
+ *
+ * @param props - The `ObjectFieldTemplateProps` for this component
+ */
+export default function ObjectFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ObjectFieldTemplateProps<T, S, F>) {
+  const {
+    description,
+    onAddClick,
+    title,
+    properties,
+    disabled,
+    readonly,
+    required,
+    uiSchema,
+    schema,
+    formData,
+    idSchema,
+    registry,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const TitleFieldTemplate = getTemplate<"TitleFieldTemplate", T, S, F>(
     "TitleFieldTemplate",
     registry,
     uiOptions
   );
-  const DescriptionFieldTemplate = getTemplate<"DescriptionFieldTemplate">(
+  const DescriptionFieldTemplate = getTemplate<
     "DescriptionFieldTemplate",
-    registry,
-    uiOptions
-  );
+    T,
+    S,
+    F
+  >("DescriptionFieldTemplate", registry, uiOptions);
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -35,7 +54,7 @@ function ObjectFieldTemplate({
   const fieldTitle = uiOptions.title || title;
   const fieldDescription = uiOptions.description || description;
   return (
-    <React.Fragment>
+    <>
       {fieldTitle && (
         <TitleFieldTemplate
           id={`${idSchema.$id}-title`}
@@ -56,7 +75,7 @@ function ObjectFieldTemplate({
         />
       )}
       {properties.map((prop) => prop.content)}
-      {canExpand(schema, uiSchema, formData) && (
+      {canExpand<T, S, F>(schema, uiSchema, formData) && (
         <Grid.Column width={16} verticalAlign="middle">
           <Grid.Row>
             <div
@@ -76,8 +95,6 @@ function ObjectFieldTemplate({
           </Grid.Row>
         </Grid.Column>
       )}
-    </React.Fragment>
+    </>
   );
 }
-
-export default ObjectFieldTemplate;
diff --git a/packages/semantic-ui/src/RadioWidget/RadioWidget.tsx b/packages/semantic-ui/src/RadioWidget/RadioWidget.tsx
index 31d5057f3b..3a41eb6259 100644
--- a/packages/semantic-ui/src/RadioWidget/RadioWidget.tsx
+++ b/packages/semantic-ui/src/RadioWidget/RadioWidget.tsx
@@ -1,9 +1,23 @@
 import React from "react";
-import { WidgetProps } from "@rjsf/utils";
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
 import { CheckboxProps, Form, Radio } from "semantic-ui-react";
 import { getSemanticProps } from "../util";
 
-function RadioWidget(props: WidgetProps) {
+/** The `RadioWidget` is a widget for rendering a radio group.
+ *  It is typically used with a string property constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RadioWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
   const {
     id,
     value,
@@ -20,7 +34,11 @@ function RadioWidget(props: WidgetProps) {
     rawErrors = [],
   } = props;
   const { enumOptions, enumDisabled } = options;
-  const semanticProps = getSemanticProps({ formContext, options, uiSchema });
+  const semanticProps = getSemanticProps<T, S, F>({
+    formContext,
+    options,
+    uiSchema,
+  });
   // eslint-disable-next-line no-shadow
   const _onChange = (
     _: React.FormEvent<HTMLInputElement>,
@@ -63,4 +81,3 @@ function RadioWidget(props: WidgetProps) {
     </Form.Group>
   );
 }
-export default RadioWidget;
diff --git a/packages/semantic-ui/src/RangeWidget/RangeWidget.tsx b/packages/semantic-ui/src/RangeWidget/RangeWidget.tsx
index 0a4c14c209..2fba07745b 100644
--- a/packages/semantic-ui/src/RangeWidget/RangeWidget.tsx
+++ b/packages/semantic-ui/src/RangeWidget/RangeWidget.tsx
@@ -1,9 +1,24 @@
 import React from "react";
 import { Input } from "semantic-ui-react";
-import { rangeSpec, WidgetProps } from "@rjsf/utils";
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  rangeSpec,
+} from "@rjsf/utils";
 import { getSemanticProps } from "../util";
 
-function RangeWidget(props: WidgetProps) {
+/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+ * in a div, with the value along side it.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RangeWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
   const {
     id,
     value,
@@ -19,7 +34,7 @@ function RangeWidget(props: WidgetProps) {
     formContext,
     rawErrors = [],
   } = props;
-  const semanticProps = getSemanticProps({
+  const semanticProps = getSemanticProps<T, S, F>({
     formContext,
     options,
     uiSchema,
@@ -37,7 +52,7 @@ function RangeWidget(props: WidgetProps) {
   const _onFocus = () => onFocus && onFocus(id, value);
 
   return (
-    <React.Fragment>
+    <>
       <Input
         id={id}
         key={id}
@@ -45,7 +60,7 @@ function RangeWidget(props: WidgetProps) {
         type="range"
         required={required}
         disabled={disabled || readonly}
-        {...rangeSpec(schema)}
+        {...rangeSpec<S>(schema)}
         {...semanticProps}
         value={value || ""}
         error={rawErrors.length > 0}
@@ -54,7 +69,6 @@ function RangeWidget(props: WidgetProps) {
         onFocus={_onFocus}
       />
       <span>{value}</span>
-    </React.Fragment>
+    </>
   );
 }
-export default RangeWidget;
diff --git a/packages/semantic-ui/src/SelectWidget/SelectWidget.tsx b/packages/semantic-ui/src/SelectWidget/SelectWidget.tsx
index fc280fd84a..544bfeb3a1 100644
--- a/packages/semantic-ui/src/SelectWidget/SelectWidget.tsx
+++ b/packages/semantic-ui/src/SelectWidget/SelectWidget.tsx
@@ -2,6 +2,9 @@ import React from "react";
 import {
   EnumOptionsType,
   processSelectValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
   WidgetProps,
   UIOptionsType,
 } from "@rjsf/utils";
@@ -10,13 +13,15 @@ import { Form, DropdownProps } from "semantic-ui-react";
 import { getSemanticProps } from "../util";
 
 /**
- * * Returns and creates an array format required for semantic drop down
+ * Returns and creates an array format required for semantic drop down
  * @param {array} enumOptions- array of items for the dropdown
  * @param {array} enumDisabled - array of enum option values to disable
  * @returns {*}
  */
-function createDefaultValueOptionsForDropDown(
-  enumOptions?: EnumOptionsType[],
+function createDefaultValueOptionsForDropDown<
+  S extends StrictRJSFSchema = RJSFSchema
+>(
+  enumOptions?: EnumOptionsType<S>[],
   enumDisabled?: UIOptionsType["enumDisabled"]
 ) {
   const disabledOptions = enumDisabled || [];
@@ -29,7 +34,16 @@ function createDefaultValueOptionsForDropDown(
   return options;
 }
 
-function SelectWidget(props: WidgetProps) {
+/** The `SelectWidget` is a widget for rendering dropdowns.
+ *  It is typically used with string properties constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function SelectWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
   const {
     schema,
     uiSchema,
@@ -49,7 +63,7 @@ function SelectWidget(props: WidgetProps) {
     onFocus,
     rawErrors = [],
   } = props;
-  const semanticProps = getSemanticProps({
+  const semanticProps = getSemanticProps<T, S, F>({
     uiSchema,
     formContext,
     options,
@@ -63,7 +77,7 @@ function SelectWidget(props: WidgetProps) {
   });
   const { enumDisabled, enumOptions } = options;
   const emptyValue = multiple ? [] : "";
-  const dropdownOptions = createDefaultValueOptionsForDropDown(
+  const dropdownOptions = createDefaultValueOptionsForDropDown<S>(
     enumOptions,
     enumDisabled
   );
@@ -106,4 +120,3 @@ function SelectWidget(props: WidgetProps) {
     />
   );
 }
-export default SelectWidget;
diff --git a/packages/semantic-ui/src/SemanticUIForm/SemanticUIForm.ts b/packages/semantic-ui/src/SemanticUIForm/SemanticUIForm.ts
index 448a3a10a9..ca5f1aae84 100644
--- a/packages/semantic-ui/src/SemanticUIForm/SemanticUIForm.ts
+++ b/packages/semantic-ui/src/SemanticUIForm/SemanticUIForm.ts
@@ -1,8 +1,15 @@
-import React from "react";
+import { ComponentType } from "react";
 import { withTheme, FormProps } from "@rjsf/core";
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils";
 
-import Theme from "../Theme";
+import { generateTheme } from "../Theme";
 
-const SemanticUIForm: React.ComponentType<FormProps> = withTheme(Theme);
+export function generateForm<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): ComponentType<FormProps<T, S, F>> {
+  return withTheme<T, S, F>(generateTheme<T, S, F>());
+}
 
-export default SemanticUIForm;
+export default generateForm();
diff --git a/packages/semantic-ui/src/SubmitButton/SubmitButton.tsx b/packages/semantic-ui/src/SubmitButton/SubmitButton.tsx
index f88b63bd56..51a68a163d 100644
--- a/packages/semantic-ui/src/SubmitButton/SubmitButton.tsx
+++ b/packages/semantic-ui/src/SubmitButton/SubmitButton.tsx
@@ -1,13 +1,25 @@
-import { getSubmitButtonOptions, SubmitButtonProps } from "@rjsf/utils";
 import React from "react";
 import { Button } from "semantic-ui-react";
+import {
+  getSubmitButtonOptions,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  SubmitButtonProps,
+} from "@rjsf/utils";
 
-export default ({ uiSchema }: SubmitButtonProps) => {
+/** The `SubmitButton` renders a button that represent the `Submit` action on a form
+ */
+export default function SubmitButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ uiSchema }: SubmitButtonProps<T, S, F>) {
   const {
     submitText,
     norender,
-    props: submitButtonProps,
-  } = getSubmitButtonOptions(uiSchema);
+    props: submitButtonProps = {},
+  } = getSubmitButtonOptions<T, S, F>(uiSchema);
   if (norender) {
     return null;
   }
@@ -16,4 +28,4 @@ export default ({ uiSchema }: SubmitButtonProps) => {
       {submitText}
     </Button>
   );
-};
+}
diff --git a/packages/semantic-ui/src/Templates/Templates.ts b/packages/semantic-ui/src/Templates/Templates.ts
index 668826bc57..357980042a 100644
--- a/packages/semantic-ui/src/Templates/Templates.ts
+++ b/packages/semantic-ui/src/Templates/Templates.ts
@@ -1,4 +1,9 @@
-import { TemplatesType } from "@rjsf/utils";
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TemplatesType,
+} from "@rjsf/utils";
 
 import AddButton from "../AddButton";
 import ArrayFieldItemTemplate from "../ArrayFieldItemTemplate";
@@ -15,25 +20,31 @@ import SubmitButton from "../SubmitButton";
 import TitleField from "../TitleField";
 import WrapIfAdditionalTemplate from "../WrapIfAdditionalTemplate";
 
-const Templates: Partial<TemplatesType> = {
-  ArrayFieldItemTemplate,
-  ArrayFieldTemplate,
-  BaseInputTemplate,
-  ButtonTemplates: {
-    AddButton,
-    MoveDownButton,
-    MoveUpButton,
-    RemoveButton,
-    SubmitButton,
-  },
-  DescriptionFieldTemplate: DescriptionField,
-  ErrorListTemplate: ErrorList,
-  FieldErrorTemplate,
-  FieldHelpTemplate,
-  FieldTemplate,
-  ObjectFieldTemplate,
-  TitleFieldTemplate: TitleField,
-  WrapIfAdditionalTemplate,
-};
+export function generateTemplates<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): Partial<TemplatesType<T, S, F>> {
+  return {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    BaseInputTemplate,
+    ButtonTemplates: {
+      AddButton,
+      MoveDownButton,
+      MoveUpButton,
+      RemoveButton,
+      SubmitButton,
+    },
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldErrorTemplate,
+    FieldHelpTemplate,
+    FieldTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    WrapIfAdditionalTemplate,
+  };
+}
 
-export default Templates;
+export default generateTemplates();
diff --git a/packages/semantic-ui/src/TextareaWidget/TextareaWidget.tsx b/packages/semantic-ui/src/TextareaWidget/TextareaWidget.tsx
index a5aba27039..9774897c45 100644
--- a/packages/semantic-ui/src/TextareaWidget/TextareaWidget.tsx
+++ b/packages/semantic-ui/src/TextareaWidget/TextareaWidget.tsx
@@ -1,9 +1,22 @@
 import React from "react";
-import { WidgetProps } from "@rjsf/utils";
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
 import { Form } from "semantic-ui-react";
 import { getSemanticProps } from "../util";
 
-function TextareaWidget(props: WidgetProps) {
+/** The `TextareaWidget` is a widget for rendering input fields as textarea.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function TextareaWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
   const {
     id,
     placeholder,
@@ -23,7 +36,7 @@ function TextareaWidget(props: WidgetProps) {
     registry,
     rawErrors = [],
   } = props;
-  const semanticProps = getSemanticProps({
+  const semanticProps = getSemanticProps<T, S, F>({
     formContext,
     options,
     defaultSchemaProps: { inverted: false },
@@ -57,4 +70,3 @@ function TextareaWidget(props: WidgetProps) {
     />
   );
 }
-export default TextareaWidget;
diff --git a/packages/semantic-ui/src/Theme/Theme.ts b/packages/semantic-ui/src/Theme/Theme.ts
index 26316dc0ce..1b23dc3802 100644
--- a/packages/semantic-ui/src/Theme/Theme.ts
+++ b/packages/semantic-ui/src/Theme/Theme.ts
@@ -1,13 +1,20 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils";
 import { ThemeProps } from "@rjsf/core";
 import { Form as SuiForm } from "semantic-ui-react";
 
-import Templates from "../Templates";
-import Widgets from "../Widgets";
+import { generateTemplates } from "../Templates";
+import { generateWidgets } from "../Widgets";
 
-const Theme: ThemeProps = {
-  templates: Templates,
-  widgets: Widgets,
-  _internalFormWrapper: SuiForm,
-};
+export function generateTheme<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): ThemeProps<T, S, F> {
+  return {
+    templates: generateTemplates<T, S, F>(),
+    widgets: generateWidgets<T, S, F>(),
+    _internalFormWrapper: SuiForm,
+  };
+}
 
-export default Theme;
+export default generateTheme();
diff --git a/packages/semantic-ui/src/TitleField/TitleField.tsx b/packages/semantic-ui/src/TitleField/TitleField.tsx
index a633966ffe..0e1de44671 100644
--- a/packages/semantic-ui/src/TitleField/TitleField.tsx
+++ b/packages/semantic-ui/src/TitleField/TitleField.tsx
@@ -1,5 +1,10 @@
 import React from "react";
-import { TitleFieldProps } from "@rjsf/utils";
+import {
+  FormContextType,
+  TitleFieldProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
 import { Header } from "semantic-ui-react";
 
 import { getSemanticProps } from "../util";
@@ -9,8 +14,16 @@ const DEFAULT_OPTIONS = {
   dividing: true,
 };
 
-function TitleField({ id, title, uiSchema }: TitleFieldProps) {
-  const semanticProps = getSemanticProps({
+/** The `TitleField` is the template to use to render the title of a field
+ *
+ * @param props - The `TitleFieldProps` for this component
+ */
+export default function TitleField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ id, title, uiSchema }: TitleFieldProps<T, S, F>) {
+  const semanticProps = getSemanticProps<T, S, F>({
     uiSchema,
     defaultSchemaProps: DEFAULT_OPTIONS,
   });
@@ -23,5 +36,3 @@ function TitleField({ id, title, uiSchema }: TitleFieldProps) {
     </Header>
   );
 }
-
-export default TitleField;
diff --git a/packages/semantic-ui/src/Widgets/Widgets.tsx b/packages/semantic-ui/src/Widgets/Widgets.tsx
index f861d2cfd6..6fe835ead8 100644
--- a/packages/semantic-ui/src/Widgets/Widgets.tsx
+++ b/packages/semantic-ui/src/Widgets/Widgets.tsx
@@ -1,3 +1,10 @@
+import {
+  FormContextType,
+  RegistryWidgetsType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
+
 import CheckboxWidget from "../CheckboxWidget/CheckboxWidget";
 import CheckboxesWidget from "../CheckboxesWidget/CheckboxesWidget";
 import RadioWidget from "../RadioWidget/RadioWidget";
@@ -5,11 +12,19 @@ import RangeWidget from "../RangeWidget/RangeWidget";
 import SelectWidget from "../SelectWidget/SelectWidget";
 import TextareaWidget from "../TextareaWidget/TextareaWidget";
 
-export default {
-  CheckboxWidget,
-  CheckboxesWidget,
-  RadioWidget,
-  RangeWidget,
-  SelectWidget,
-  TextareaWidget,
-};
+export function generateWidgets<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): RegistryWidgetsType<T, S, F> {
+  return {
+    CheckboxWidget,
+    CheckboxesWidget,
+    RadioWidget,
+    RangeWidget,
+    SelectWidget,
+    TextareaWidget,
+  };
+}
+
+export default generateWidgets();
diff --git a/packages/semantic-ui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx b/packages/semantic-ui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
index 32d3767204..c7b4fe4588 100644
--- a/packages/semantic-ui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
+++ b/packages/semantic-ui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
@@ -1,24 +1,37 @@
 import React from "react";
 import {
   ADDITIONAL_PROPERTY_FLAG,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
   WrapIfAdditionalTemplateProps,
 } from "@rjsf/utils";
 import { Form, Grid } from "semantic-ui-react";
 
-const WrapIfAdditionalTemplate = ({
-  children,
-  classNames,
-  disabled,
-  id,
-  label,
-  onDropPropertyClick,
-  onKeyChange,
-  readonly,
-  required,
-  schema,
-  uiSchema,
-  registry,
-}: WrapIfAdditionalTemplateProps) => {
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
+export default function WrapIfAdditionalTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WrapIfAdditionalTemplateProps<T, S, F>) {
+  const {
+    children,
+    classNames,
+    disabled,
+    id,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    schema,
+    uiSchema,
+    registry,
+  } = props;
   // Button templates are not overridden in the uiSchema
   const { RemoveButton } = registry.templates.ButtonTemplates;
   const { readonlyAsDisabled = true, wrapperStyle } = registry.formContext;
@@ -73,6 +86,4 @@ const WrapIfAdditionalTemplate = ({
       </Grid>
     </div>
   );
-};
-
-export default WrapIfAdditionalTemplate;
+}
diff --git a/packages/semantic-ui/src/index.ts b/packages/semantic-ui/src/index.ts
index 166be2e02b..c089b7f177 100644
--- a/packages/semantic-ui/src/index.ts
+++ b/packages/semantic-ui/src/index.ts
@@ -1,8 +1,8 @@
 import SemanticUIForm from "./SemanticUIForm/SemanticUIForm";
 
-export { default as Templates } from "./Templates";
-export { default as Form } from "./SemanticUIForm";
-export { default as Theme } from "./Theme";
-export { default as Widgets } from "./Widgets";
+export { default as Templates, generateTemplates } from "./Templates";
+export { default as Form, generateForm } from "./SemanticUIForm";
+export { default as Theme, generateTheme } from "./Theme";
+export { default as Widgets, generateWidgets } from "./Widgets";
 
 export default SemanticUIForm;
diff --git a/packages/semantic-ui/src/util.tsx b/packages/semantic-ui/src/util.tsx
index fe9d692b78..3d1908fa55 100644
--- a/packages/semantic-ui/src/util.tsx
+++ b/packages/semantic-ui/src/util.tsx
@@ -3,21 +3,32 @@ import {
   UiSchema,
   GenericObjectType,
   getUiOptions,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
   UIOptionsType,
 } from "@rjsf/utils";
 
-export type SemanticPropsTypes = {
-  formContext?: GenericObjectType;
-  uiSchema?: UiSchema;
-  options?: UIOptionsType;
+export type SemanticPropsTypes<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+> = {
+  formContext?: F;
+  uiSchema?: UiSchema<T, S, F>;
+  options?: UIOptionsType<T, S, F>;
   defaultSchemaProps?: GenericObjectType;
   defaultContextProps?: GenericObjectType;
 };
 
-export type SemanticErrorPropsType = {
-  formContext?: GenericObjectType;
-  uiSchema?: UiSchema;
-  options?: UIOptionsType;
+export type SemanticErrorPropsType<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+> = {
+  formContext?: F;
+  uiSchema?: UiSchema<T, S, F>;
+  options?: UIOptionsType<T, S, F>;
   defaultProps?: GenericObjectType;
 };
 
@@ -37,15 +48,19 @@ export type WrapProps = GenericObjectType & {
  * @param {Object?} params.defaultContextProps
  * @returns {any}
  */
-export function getSemanticProps({
-  formContext = {},
+export function getSemanticProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  formContext = {} as F,
   uiSchema = {},
   options = {},
   defaultSchemaProps = { fluid: true, inverted: false },
   defaultContextProps = {},
-}: SemanticPropsTypes) {
+}: SemanticPropsTypes<T, S, F>) {
   const formContextProps = formContext.semantic;
-  const schemaProps = getUiOptions(uiSchema).semantic;
+  const schemaProps = getUiOptions<T, S, F>(uiSchema).semantic;
   const optionProps = options.semantic;
   // formContext props should overide other props
   return Object.assign(
@@ -67,15 +82,19 @@ export function getSemanticProps({
  * @param {Object?} params.defaultProps
  * @returns {any}
  */
-export function getSemanticErrorProps({
-  formContext = {},
+export function getSemanticErrorProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  formContext = {} as F,
   uiSchema = {},
   options = {},
   defaultProps = { size: "small", pointing: "above" },
-}: SemanticErrorPropsType) {
+}: SemanticErrorPropsType<T, S, F>) {
   const formContextProps =
     formContext.semantic && formContext.semantic.errorOptions;
-  const semanticOptions: GenericObjectType = getUiOptions(uiSchema)
+  const semanticOptions: GenericObjectType = getUiOptions<T, S, F>(uiSchema)
     .semantic as GenericObjectType;
   const schemaProps = semanticOptions && semanticOptions.errorOptions;
   const optionProps =
diff --git a/packages/utils/src/types.ts b/packages/utils/src/types.ts
index 4c05a7530f..77402ac57d 100644
--- a/packages/utils/src/types.ts
+++ b/packages/utils/src/types.ts
@@ -680,7 +680,7 @@ export interface WidgetProps<
    */
   options: NonNullable<UIOptionsType<T, S, F>> & {
     /** The enum options list for a type that supports them */
-    enumOptions?: EnumOptionsType[];
+    enumOptions?: EnumOptionsType<S>[];
   };
   /** The `formContext` object that you passed to `Form` */
   formContext?: F;