+ );
+}
diff --git a/packages/shadcn/src/CheckboxesWidget/index.ts b/packages/shadcn/src/CheckboxesWidget/index.ts
new file mode 100644
index 0000000000..97152004fa
--- /dev/null
+++ b/packages/shadcn/src/CheckboxesWidget/index.ts
@@ -0,0 +1,2 @@
+export { default } from './CheckboxesWidget';
+export * from './CheckboxesWidget';
diff --git a/packages/shadcn/src/DescriptionField/DescriptionField.tsx b/packages/shadcn/src/DescriptionField/DescriptionField.tsx
new file mode 100644
index 0000000000..f36ca7ff90
--- /dev/null
+++ b/packages/shadcn/src/DescriptionField/DescriptionField.tsx
@@ -0,0 +1,23 @@
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** 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
+>({ id, description }: DescriptionFieldProps) {
+ if (description) {
+ return (
+
+
+ {description}
+
+
+ );
+ }
+
+ return null;
+}
diff --git a/packages/shadcn/src/DescriptionField/index.ts b/packages/shadcn/src/DescriptionField/index.ts
new file mode 100644
index 0000000000..401540d99b
--- /dev/null
+++ b/packages/shadcn/src/DescriptionField/index.ts
@@ -0,0 +1,2 @@
+export { default } from './DescriptionField';
+export * from './DescriptionField';
diff --git a/packages/shadcn/src/ErrorList/ErrorList.tsx b/packages/shadcn/src/ErrorList/ErrorList.tsx
new file mode 100644
index 0000000000..31e07ad745
--- /dev/null
+++ b/packages/shadcn/src/ErrorList/ErrorList.tsx
@@ -0,0 +1,26 @@
+import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import { AlertCircle } from 'lucide-react';
+
+import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
+
+/** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
+ *
+ * @param props - The `ErrorListProps` for this component
+ */
+export default function ErrorList({
+ errors,
+ registry,
+}: ErrorListProps) {
+ const { translateString } = registry;
+ return (
+
+
+ {translateString(TranslatableString.ErrorsLabel)}
+
+ {errors.map((error, i: number) => {
+ return • {error.stack};
+ })}
+
+
+ );
+}
diff --git a/packages/shadcn/src/ErrorList/index.ts b/packages/shadcn/src/ErrorList/index.ts
new file mode 100644
index 0000000000..79376ace11
--- /dev/null
+++ b/packages/shadcn/src/ErrorList/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ErrorList';
+export * from './ErrorList';
diff --git a/packages/shadcn/src/FieldErrorTemplate/FieldErrorTemplate.tsx b/packages/shadcn/src/FieldErrorTemplate/FieldErrorTemplate.tsx
new file mode 100644
index 0000000000..cc30c9aac4
--- /dev/null
+++ b/packages/shadcn/src/FieldErrorTemplate/FieldErrorTemplate.tsx
@@ -0,0 +1,29 @@
+import { FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema, errorId } from '@rjsf/utils';
+
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
+export default function FieldErrorTemplate<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any
+>(props: FieldErrorProps) {
+ const { errors = [], idSchema } = props;
+ if (errors.length === 0) {
+ return null;
+ }
+ const id = errorId(idSchema);
+
+ return (
+
+
+ );
+}
diff --git a/packages/shadcn/src/FieldTemplate/index.ts b/packages/shadcn/src/FieldTemplate/index.ts
new file mode 100644
index 0000000000..6f7dc3861c
--- /dev/null
+++ b/packages/shadcn/src/FieldTemplate/index.ts
@@ -0,0 +1,2 @@
+export { default } from './FieldTemplate';
+export * from './FieldTemplate';
diff --git a/packages/shadcn/src/Form/Form.tsx b/packages/shadcn/src/Form/Form.tsx
new file mode 100644
index 0000000000..c5a0167a8f
--- /dev/null
+++ b/packages/shadcn/src/Form/Form.tsx
@@ -0,0 +1,16 @@
+import { ComponentType } from 'react';
+
+import { FormProps, withTheme } from '@rjsf/core';
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import { generateTheme } from '../Theme';
+
+export function generateForm<
+ T = any,
+ S extends StrictRJSFSchema = RJSFSchema,
+ F extends FormContextType = any
+>(): ComponentType> {
+ return withTheme(generateTheme());
+}
+
+export default generateForm();
diff --git a/packages/shadcn/src/Form/index.ts b/packages/shadcn/src/Form/index.ts
new file mode 100644
index 0000000000..60f008b592
--- /dev/null
+++ b/packages/shadcn/src/Form/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Form';
+export * from './Form';
diff --git a/packages/shadcn/src/GridTemplate/GridTemplate.tsx b/packages/shadcn/src/GridTemplate/GridTemplate.tsx
new file mode 100644
index 0000000000..193ffe1fe5
--- /dev/null
+++ b/packages/shadcn/src/GridTemplate/GridTemplate.tsx
@@ -0,0 +1,19 @@
+import { GridTemplateProps } from '@rjsf/utils';
+import { cn } from '../lib/utils';
+
+/** Renders a `GridTemplate` for mui, which is expecting the column sizing information coming in via the
+ * extra props provided by the caller, which are spread directly on the `Grid2`.
+ *
+ * @param props - The GridTemplateProps, including the extra props containing the mui grid positioning details
+ */
+export default function GridTemplate(props: GridTemplateProps) {
+ const { children, column, ...rest } = props;
+ return (
+
+ {children}
+
+ );
+}
diff --git a/packages/shadcn/src/GridTemplate/index.ts b/packages/shadcn/src/GridTemplate/index.ts
new file mode 100644
index 0000000000..ed6c2c4fc5
--- /dev/null
+++ b/packages/shadcn/src/GridTemplate/index.ts
@@ -0,0 +1,2 @@
+export { default } from './GridTemplate';
+export * from './GridTemplate';
diff --git a/packages/shadcn/src/IconButton/IconButton.tsx b/packages/shadcn/src/IconButton/IconButton.tsx
new file mode 100644
index 0000000000..72b2e296f9
--- /dev/null
+++ b/packages/shadcn/src/IconButton/IconButton.tsx
@@ -0,0 +1,104 @@
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import { ChevronDown, ChevronUp, Copy, Trash2 } from 'lucide-react';
+
+import { Button, ButtonProps } from '../components/ui/button';
+
+/** Base button component that renders a Shadcn button with an icon for RJSF form actions.
+ * This component serves as the foundation for other specialized buttons used in array operations.
+ * It combines RJSF's IconButtonProps with Shadcn's ButtonProps to provide a consistent styling
+ * and behavior across the form.
+ *
+ * @param props - The combined props from RJSF IconButtonProps and Shadcn ButtonProps, including icon and event handlers
+ */
+export default function IconButton(
+ props: IconButtonProps & ButtonProps
+) {
+ const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
+ return (
+
+ );
+}
+
+/** Renders a copy button for RJSF array fields that allows users to duplicate array items.
+ * The button includes a copy icon and uses the RJSF translation system for the tooltip text.
+ * This is used within ArrayField to provide item duplication functionality.
+ *
+ * @param props - The RJSF icon button properties, including registry for translations and event handlers
+ */
+export function CopyButton(
+ props: IconButtonProps
+) {
+ const {
+ registry: { translateString },
+ } = props;
+ return (
+ } />
+ );
+}
+
+/** Renders a move down button for RJSF array fields that allows reordering of array items.
+ * The button includes a chevron-down icon and uses the RJSF translation system for the tooltip text.
+ * This is used within ArrayField to allow moving items to a lower index in the array.
+ *
+ * @param props - The RJSF icon button properties, including registry for translations and event handlers
+ */
+export function MoveDownButton(
+ props: IconButtonProps
+) {
+ const {
+ registry: { translateString },
+ } = props;
+ return (
+ }
+ />
+ );
+}
+
+/** Renders a move up button for RJSF array fields that allows reordering of array items.
+ * The button includes a chevron-up icon and uses the RJSF translation system for the tooltip text.
+ * This is used within ArrayField to allow moving items to a higher index in the array.
+ *
+ * @param props - The RJSF icon button properties, including registry for translations and event handlers
+ */
+export function MoveUpButton(
+ props: IconButtonProps
+) {
+ const {
+ registry: { translateString },
+ } = props;
+ return (
+ }
+ />
+ );
+}
+
+/** Renders a remove button for RJSF array fields that allows deletion of array items.
+ * The button includes a trash icon and uses the RJSF translation system for the tooltip text.
+ * It has special styling with destructive colors to indicate its dangerous action.
+ * This is used within ArrayField to provide item removal functionality.
+ *
+ * @param props - The RJSF icon button properties, including registry for translations and event handlers
+ */
+export function RemoveButton(
+ props: IconButtonProps
+) {
+ const {
+ registry: { translateString },
+ } = props;
+ return (
+ }
+ />
+ );
+}
diff --git a/packages/shadcn/src/IconButton/index.ts b/packages/shadcn/src/IconButton/index.ts
new file mode 100644
index 0000000000..655ec4c488
--- /dev/null
+++ b/packages/shadcn/src/IconButton/index.ts
@@ -0,0 +1,2 @@
+export { default } from './IconButton';
+export * from './IconButton';
diff --git a/packages/shadcn/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/shadcn/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
new file mode 100644
index 0000000000..324276be55
--- /dev/null
+++ b/packages/shadcn/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -0,0 +1,89 @@
+import {
+ buttonId,
+ canExpand,
+ descriptionId,
+ FormContextType,
+ getTemplate,
+ getUiOptions,
+ ObjectFieldTemplateProps,
+ RJSFSchema,
+ StrictRJSFSchema,
+ titleId,
+} from '@rjsf/utils';
+
+/** 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
+>({
+ description,
+ title,
+ properties,
+ required,
+ uiSchema,
+ idSchema,
+ schema,
+ formData,
+ onAddClick,
+ disabled,
+ readonly,
+ registry,
+}: ObjectFieldTemplateProps) {
+ const uiOptions = getUiOptions(uiSchema);
+ const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, uiOptions);
+ const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+ 'DescriptionFieldTemplate',
+ registry,
+ uiOptions
+ );
+ // Button templates are not overridden in the uiSchema
+ const {
+ ButtonTemplates: { AddButton },
+ } = registry.templates;
+ return (
+ <>
+ {title && (
+ (idSchema)}
+ title={title}
+ required={required}
+ schema={schema}
+ uiSchema={uiSchema}
+ registry={registry}
+ />
+ )}
+ {description && (
+ (idSchema)}
+ description={description}
+ schema={schema}
+ uiSchema={uiSchema}
+ registry={registry}
+ />
+ )}
+
+
+
+