feat: Allow passing className props to shadcn custom widgets

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
 

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

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>

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 : ''}

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)}

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}

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) => {

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) => {

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>

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>
   );