From 82e5a076f50db8cc998fadb93c7c1a29403e8b48 Mon Sep 17 00:00:00 2001
From: tphung <tuanphung2308@gmail.com>
Date: Fri, 22 Aug 2025 22:29:16 +0700
Subject: [PATCH 1/5] chore: update readme for image showcase and better
 theming alternative

---
 packages/shadcn/README.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/shadcn/README.md b/packages/shadcn/README.md
index 2b789140ef..c6233126e1 100644
--- a/packages/shadcn/README.md
+++ b/packages/shadcn/README.md
@@ -20,6 +20,11 @@
     <a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Request Feature</a>
   </p>
 
+
+<p align="center">
+<img src="https://github.com/tuanphung2308/rjsf-shadcn-css/blob/main/shadcn-demo.png?raw=true" alt="Logo" width="720" height="240">
+</p>
+
 <!-- TABLE OF CONTENTS -->
 
 ## Table of Contents
@@ -134,8 +139,7 @@ Supported colors are:
 #### Coloring
 
 - Generate a theme from [official shadCN site](https://ui.shadcn.com/themes)
-  or  [zippy starter's shadcn/ui theme generator](https://zippystarter.com/tools/shadcn-ui-theme-generator)
-  or [Railly](https://customizer.railly.dev/)
+  or  [tweakcn](https://tweakcn.com/editor/theme)
 - Navigate to shadcn/css, create a new file called [your-theme].css
 - Replace the base layer code with your new color
 - Follow the next section to build your CSS file

From 039c76ce9dad36da8d83cf49ba8e10126fb76bd4 Mon Sep 17 00:00:00 2001
From: tphung <tuanphung2308@gmail.com>
Date: Fri, 22 Aug 2025 22:51:02 +0700
Subject: [PATCH 2/5] feat: allow className props to be passed for custom
 tailwind class styling on widget

---
 packages/shadcn/src/AddButton/AddButton.tsx       |  7 ++++++-
 .../src/BaseInputTemplate/BaseInputTemplate.tsx   |  3 ++-
 .../shadcn/src/CheckboxWidget/CheckboxWidget.tsx  |  2 ++
 .../src/CheckboxesWidget/CheckboxesWidget.tsx     | 15 ++++++++++++++-
 packages/shadcn/src/RadioWidget/RadioWidget.tsx   |  3 ++-
 packages/shadcn/src/SelectWidget/SelectWidget.tsx |  7 +++++--
 packages/shadcn/src/SubmitButton/SubmitButton.tsx |  3 ++-
 .../shadcn/src/TextareaWidget/TextareaWidget.tsx  |  2 ++
 8 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/packages/shadcn/src/AddButton/AddButton.tsx b/packages/shadcn/src/AddButton/AddButton.tsx
index 6130db998f..5f9a3cfea1 100644
--- a/packages/shadcn/src/AddButton/AddButton.tsx
+++ b/packages/shadcn/src/AddButton/AddButton.tsx
@@ -2,20 +2,25 @@ import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, Transla
 import { PlusCircle } from 'lucide-react';
 
 import { Button } from '../components/ui/button';
+import { cn } from '../lib/utils';
 
 /**
  * A button component for adding new items in a form
+ * @param uiSchema - The UI schema for the form, which can include custom properties
+ * @param registry - The registry object containing the form's configuration and utilities
+ * @param className - Allow custom class names to be passed for Tailwind CSS styling
  * @param props - The component properties
  */
 export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   uiSchema,
   registry,
+  className,
   ...props
 }: IconButtonProps<T, S, F>) {
   const { translateString } = registry;
   return (
     <div className='p-0 m-0'>
-      <Button {...props} className='w-fit gap-2' variant='outline' type='button'>
+      <Button {...props} className={cn('w-fit gap-2', className)} variant='outline' type='button'>
         <PlusCircle size={16} /> {translateString(TranslatableString.AddItemButton)}
       </Button>
     </div>
diff --git a/packages/shadcn/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/shadcn/src/BaseInputTemplate/BaseInputTemplate.tsx
index e37ff32132..77893c6aec 100644
--- a/packages/shadcn/src/BaseInputTemplate/BaseInputTemplate.tsx
+++ b/packages/shadcn/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -40,6 +40,7 @@ export default function BaseInputTemplate<
   rawErrors = [],
   children,
   extraProps,
+  className,
 }: BaseInputTemplateProps<T, S, F>) {
   const inputProps = {
     ...extraProps,
@@ -61,7 +62,7 @@ export default function BaseInputTemplate<
         required={required}
         disabled={disabled}
         readOnly={readonly}
-        className={cn({ 'border-destructive focus-visible:ring-0': rawErrors.length > 0 })}
+        className={cn({ 'border-destructive focus-visible:ring-0': rawErrors.length > 0 }, className)}
         list={schema.examples ? examplesId<T>(id) : undefined}
         {...inputProps}
         value={value || value === 0 ? value : ''}
diff --git a/packages/shadcn/src/CheckboxWidget/CheckboxWidget.tsx b/packages/shadcn/src/CheckboxWidget/CheckboxWidget.tsx
index b1588c3f60..559f8a7c92 100644
--- a/packages/shadcn/src/CheckboxWidget/CheckboxWidget.tsx
+++ b/packages/shadcn/src/CheckboxWidget/CheckboxWidget.tsx
@@ -37,6 +37,7 @@ export default function CheckboxWidget<
     onFocus,
     registry,
     uiSchema,
+    className,
   } = props;
   // 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
@@ -78,6 +79,7 @@ export default function CheckboxWidget<
           onCheckedChange={_onChange}
           onBlur={_onBlur}
           onFocus={_onFocus}
+          className={className}
         />
         <Label className='leading-tight' htmlFor={id}>
           {labelValue(label, hideLabel || !label)}
diff --git a/packages/shadcn/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/shadcn/src/CheckboxesWidget/CheckboxesWidget.tsx
index f634d7dac4..0eae56855b 100644
--- a/packages/shadcn/src/CheckboxesWidget/CheckboxesWidget.tsx
+++ b/packages/shadcn/src/CheckboxesWidget/CheckboxesWidget.tsx
@@ -25,7 +25,19 @@ export default function CheckboxesWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({ id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus }: WidgetProps<T, S, F>) {
+>({
+  id,
+  disabled,
+  options,
+  value,
+  autofocus,
+  readonly,
+  required,
+  onChange,
+  onBlur,
+  onFocus,
+  className,
+}: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
@@ -56,6 +68,7 @@ export default function CheckboxesWidget<
                     onChange(enumOptionsDeselectValue<S>(index, checkboxesValues, enumOptions));
                   }
                 }}
+                className={className}
                 checked={checked}
                 autoFocus={autofocus && index === 0}
                 onBlur={_onBlur}
diff --git a/packages/shadcn/src/RadioWidget/RadioWidget.tsx b/packages/shadcn/src/RadioWidget/RadioWidget.tsx
index bac1f251a2..12160b6161 100644
--- a/packages/shadcn/src/RadioWidget/RadioWidget.tsx
+++ b/packages/shadcn/src/RadioWidget/RadioWidget.tsx
@@ -29,6 +29,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   onChange,
   onBlur,
   onFocus,
+  className,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue } = options;
 
@@ -53,7 +54,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         onFocus={_onFocus}
         aria-describedby={ariaDescribedByIds<T>(id)}
         orientation={inline ? 'horizontal' : 'vertical'}
-        className={cn('flex flex-wrap', { 'flex-col': !inline })}
+        className={cn('flex flex-wrap', { 'flex-col': !inline }, className)}
       >
         {Array.isArray(enumOptions) &&
           enumOptions.map((option, index) => {
diff --git a/packages/shadcn/src/SelectWidget/SelectWidget.tsx b/packages/shadcn/src/SelectWidget/SelectWidget.tsx
index be62104c46..1229924500 100644
--- a/packages/shadcn/src/SelectWidget/SelectWidget.tsx
+++ b/packages/shadcn/src/SelectWidget/SelectWidget.tsx
@@ -36,6 +36,7 @@ export default function SelectWidget<
   defaultValue,
   placeholder,
   rawErrors = [],
+  className,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
 
@@ -54,6 +55,8 @@ export default function SelectWidget<
     disabled: Array.isArray(enumDisabled) && enumDisabled.includes(value),
   }));
 
+  const cnClassName = cn({ 'border-destructive': rawErrors.length > 0 }, className);
+
   return (
     <div className='p-0.5'>
       {!multiple ? (
@@ -67,7 +70,7 @@ export default function SelectWidget<
           disabled={disabled || readonly}
           required={required}
           placeholder={placeholder}
-          className={cn({ 'border-destructive': rawErrors.length > 0 })}
+          className={cnClassName}
           onFocus={_onFancyFocus}
           onBlur={_onFancyBlur}
           ariaDescribedby={ariaDescribedByIds<T>(id)}
@@ -78,7 +81,7 @@ export default function SelectWidget<
           autoFocus={autofocus}
           disabled={disabled || readonly}
           multiple
-          className={rawErrors.length > 0 ? 'border-destructive' : ''}
+          className={cnClassName}
           items={items}
           selected={value}
           onValueChange={(values) => {
diff --git a/packages/shadcn/src/SubmitButton/SubmitButton.tsx b/packages/shadcn/src/SubmitButton/SubmitButton.tsx
index ab39a7267f..3ac76219a6 100644
--- a/packages/shadcn/src/SubmitButton/SubmitButton.tsx
+++ b/packages/shadcn/src/SubmitButton/SubmitButton.tsx
@@ -1,6 +1,7 @@
 import { FormContextType, getSubmitButtonOptions, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
 
 import { Button } from '../components/ui/button';
+import { cn } from '../lib/utils';
 
 /** The `SubmitButton` renders a button that represent the `Submit` action on a form
  */
@@ -13,7 +14,7 @@ export default function SubmitButton<T = any, S extends StrictRJSFSchema = RJSFS
   }
   return (
     <div>
-      <Button type='submit' {...submitButtonProps} className='my-2'>
+      <Button type='submit' {...submitButtonProps} className={cn('my-2', submitButtonProps?.className)}>
         {submitText}
       </Button>
     </div>
diff --git a/packages/shadcn/src/TextareaWidget/TextareaWidget.tsx b/packages/shadcn/src/TextareaWidget/TextareaWidget.tsx
index 0d417386d8..5a9bec55dc 100644
--- a/packages/shadcn/src/TextareaWidget/TextareaWidget.tsx
+++ b/packages/shadcn/src/TextareaWidget/TextareaWidget.tsx
@@ -31,6 +31,7 @@ export default function TextareaWidget<
   onFocus,
   onChange,
   options,
+  className,
 }: CustomWidgetProps<T, S, F>) {
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
     onChange(value === '' ? options.emptyValue : value);
@@ -53,6 +54,7 @@ export default function TextareaWidget<
         onBlur={_onBlur}
         onFocus={_onFocus}
         aria-describedby={ariaDescribedByIds<T>(id)}
+        className={className}
       />
     </div>
   );

From d721fd92ab723b28e28dcf77aa6fe6074a202d43 Mon Sep 17 00:00:00 2001
From: tphung <tuanphung2308@gmail.com>
Date: Fri, 22 Aug 2025 22:51:35 +0700
Subject: [PATCH 3/5] test: update test snapshots to cover for missing class on
 renders for updated elements

---
 .../test/__snapshots__/Array.test.tsx.snap    | 20 +++++++++----------
 .../test/__snapshots__/Object.test.tsx.snap   | 18 ++++++++---------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/shadcn/test/__snapshots__/Array.test.tsx.snap b/packages/shadcn/test/__snapshots__/Array.test.tsx.snap
index 6ad8e30f01..dbeedcd212 100644
--- a/packages/shadcn/test/__snapshots__/Array.test.tsx.snap
+++ b/packages/shadcn/test/__snapshots__/Array.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`array fields array 1`] = `
                   className="p-0 m-0"
                 >
                   <button
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-array-item-add"
                     data-slot="button"
                     disabled={false}
                     id="root__add"
@@ -476,7 +476,7 @@ exports[`array fields array icons 1`] = `
                   className="p-0 m-0"
                 >
                   <button
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-array-item-add"
                     data-slot="button"
                     disabled={false}
                     id="root__add"
@@ -1107,7 +1107,7 @@ exports[`with title and description array 1`] = `
                   className="p-0 m-0"
                 >
                   <button
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-array-item-add"
                     data-slot="button"
                     disabled={false}
                     id="root__add"
@@ -1608,7 +1608,7 @@ exports[`with title and description array icons 1`] = `
                   className="p-0 m-0"
                 >
                   <button
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-array-item-add"
                     data-slot="button"
                     disabled={false}
                     id="root__add"
@@ -2020,7 +2020,7 @@ exports[`with title and description from both array 1`] = `
                   className="p-0 m-0"
                 >
                   <button
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-array-item-add"
                     data-slot="button"
                     disabled={false}
                     id="root__add"
@@ -2521,7 +2521,7 @@ exports[`with title and description from both array icons 1`] = `
                   className="p-0 m-0"
                 >
                   <button
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-array-item-add"
                     data-slot="button"
                     disabled={false}
                     id="root__add"
@@ -2933,7 +2933,7 @@ exports[`with title and description from uiSchema array 1`] = `
                   className="p-0 m-0"
                 >
                   <button
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-array-item-add"
                     data-slot="button"
                     disabled={false}
                     id="root__add"
@@ -3434,7 +3434,7 @@ exports[`with title and description from uiSchema array icons 1`] = `
                   className="p-0 m-0"
                 >
                   <button
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-array-item-add"
                     data-slot="button"
                     disabled={false}
                     id="root__add"
@@ -3818,7 +3818,7 @@ exports[`with title and description with global label off array 1`] = `
                   className="p-0 m-0"
                 >
                   <button
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-array-item-add"
                     data-slot="button"
                     disabled={false}
                     id="root__add"
@@ -4253,7 +4253,7 @@ exports[`with title and description with global label off array icons 1`] = `
                   className="p-0 m-0"
                 >
                   <button
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-array-item-add"
                     data-slot="button"
                     disabled={false}
                     id="root__add"
diff --git a/packages/shadcn/test/__snapshots__/Object.test.tsx.snap b/packages/shadcn/test/__snapshots__/Object.test.tsx.snap
index a722e9211e..1f93e35a76 100644
--- a/packages/shadcn/test/__snapshots__/Object.test.tsx.snap
+++ b/packages/shadcn/test/__snapshots__/Object.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`object fields additionalProperties 1`] = `
           className="p-0 m-0"
         >
           <button
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-object-property-expand"
             data-slot="button"
             disabled={false}
             id="root__add"
@@ -456,7 +456,7 @@ exports[`object fields show add button and fields if additionalProperties is tru
           className="p-0 m-0"
         >
           <button
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-object-property-expand"
             data-slot="button"
             disabled={false}
             id="root__add"
@@ -678,7 +678,7 @@ exports[`object fields with title and description additionalProperties 1`] = `
           className="p-0 m-0"
         >
           <button
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-object-property-expand"
             data-slot="button"
             disabled={false}
             id="root__add"
@@ -900,7 +900,7 @@ exports[`object fields with title and description from both additionalProperties
           className="p-0 m-0"
         >
           <button
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-object-property-expand"
             data-slot="button"
             disabled={false}
             id="root__add"
@@ -1294,7 +1294,7 @@ exports[`object fields with title and description from uiSchema additionalProper
           className="p-0 m-0"
         >
           <button
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-object-property-expand"
             data-slot="button"
             disabled={false}
             id="root__add"
@@ -1688,7 +1688,7 @@ exports[`object fields with title and description from uiSchema show add button
           className="p-0 m-0"
         >
           <button
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-object-property-expand"
             data-slot="button"
             disabled={false}
             id="root__add"
@@ -2082,7 +2082,7 @@ exports[`object fields with title and description show add button and fields if
           className="p-0 m-0"
         >
           <button
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-object-property-expand"
             data-slot="button"
             disabled={false}
             id="root__add"
@@ -2270,7 +2270,7 @@ exports[`object fields with title and description with global label off addition
           className="p-0 m-0"
         >
           <button
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-object-property-expand"
             data-slot="button"
             disabled={false}
             id="root__add"
@@ -2566,7 +2566,7 @@ exports[`object fields with title and description with global label off show add
           className="p-0 m-0"
         >
           <button
-            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2"
+            className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3 w-fit gap-2 rjsf-object-property-expand"
             data-slot="button"
             disabled={false}
             id="root__add"

From 5aa991e95cdf2602bc8d93369aad81570527d13f Mon Sep 17 00:00:00 2001
From: tphung <tuanphung2308@gmail.com>
Date: Fri, 22 Aug 2025 22:54:50 +0700
Subject: [PATCH 4/5] chore: Update changelog with new changes

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0915ddb19d..2de4c314b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -58,11 +58,13 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## @rjsf/shadcn
 
+- Update `README.md` with picture of the theme!
 - Bump `@shadcn/ui` components to use latest version from https://ui.shadcn.com/
 - Bump `tailwindcss` to using v4 and css compiling process to use latest `@tailwindcss/cli`
 - Remove `postcss` due to new Oxide compiler of tailwindcss
 - Update playground themes with `default`, `Amethyst Haze`, `Caffeine`, `Claude`, `Neo Brutalism`, `Pastel Dreams`, `Soft Pop`, `Twitter`, `Vercel`
 - Radio widget labels are now accessible and can be clicked on to select the associated option.
+- Allow passing `className` props to `AddButton`, `BaseInputTemplate`, `CheckboxWidget`, `CheckboxesWidget`, `RadioWidget`, `SelectWidget`, `SubmitButton`, `TextareaWidget` for extra Tailwind CSS customization through `ui:className`
 
 ## @rjsf/utils
 

From 8f7494edf62235bc344c3e6f68f4f5744d3c20b6 Mon Sep 17 00:00:00 2001
From: Heath C <51679588+heath-freenome@users.noreply.github.com>
Date: Fri, 22 Aug 2025 17:14:19 -0700
Subject: [PATCH 5/5] Update CHANGELOG.md

---
 CHANGELOG.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2de4c314b1..6aadd8c793 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,13 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# 6.0.0-beta.15
+
+## @rjsf/shadcn
+
+- Update `README.md` with picture of the theme!
+- Allow passing `className` props to `AddButton`, `BaseInputTemplate`, `CheckboxWidget`, `CheckboxesWidget`, `RadioWidget`, `SelectWidget`, `SubmitButton`, `TextareaWidget` for extra Tailwind CSS customization through `ui:className`
+
 # 6.0.0-beta.14
 
 ## @rjsf/core
@@ -58,13 +65,11 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## @rjsf/shadcn
 
-- Update `README.md` with picture of the theme!
 - Bump `@shadcn/ui` components to use latest version from https://ui.shadcn.com/
 - Bump `tailwindcss` to using v4 and css compiling process to use latest `@tailwindcss/cli`
 - Remove `postcss` due to new Oxide compiler of tailwindcss
 - Update playground themes with `default`, `Amethyst Haze`, `Caffeine`, `Claude`, `Neo Brutalism`, `Pastel Dreams`, `Soft Pop`, `Twitter`, `Vercel`
 - Radio widget labels are now accessible and can be clicked on to select the associated option.
-- Allow passing `className` props to `AddButton`, `BaseInputTemplate`, `CheckboxWidget`, `CheckboxesWidget`, `RadioWidget`, `SelectWidget`, `SubmitButton`, `TextareaWidget` for extra Tailwind CSS customization through `ui:className`
 
 ## @rjsf/utils