22
33A [ DaisyUI] ( https://daisyui.com/ ) theme for [ react-jsonschema-form] ( https://github.com/rjsf-team/react-jsonschema-form/ ) .
44
5- ** Warning: ** This integrates DaisyUI v5.0.0-beta.7. This is not yet released and is subject to change. It also integrates tailwindcss v4.0.6 .
5+ This package integrates DaisyUI v6, Tailwind CSS v4, and RJSF v6 to provide a modern, customizable form experience .
66
77## Features
88
9- - Complete DaisyUI styling for all form elements
10- - Support for custom themes via DaisyUI theme system
11- - Responsive form layouts
9+ - Complete DaisyUI v6 styling for all RJSF form elements
10+ - Responsive design with mobile-friendly layouts
11+ - Connected card styling for nested elements and arrays
12+ - Consistent visual hierarchy for complex forms
1213- Support for all RJSF field types including:
13- - Text inputs
14- - Select dropdowns (with examples support)
15- - Checkboxes and radio buttons
16- - Arrays and objects
17- - Enumerated objects
18- - Custom array handling
14+ - Text inputs with proper styling and validation states
15+ - Select dropdowns with customizable option rendering
16+ - Checkboxes and radio buttons with optimized layouts
17+ - Arrays with add/remove/reorder functionality
18+ - Objects with proper nesting and visual hierarchy
19+ - Date/time inputs with cross-browser compatibility
20+ - Support for custom themes via DaisyUI's theme system
21+ - Accessible form components following WAI-ARIA practices
1922
2023## Installation
2124
2225``` bash
23- npm install @rjsf/daisyui @rjsf/core @rjsf/utils
26+ npm install @rjsf/daisyui @rjsf/core @rjsf/utils tailwindcss@^4.0.0 daisyui@^6.0.0
2427```
2528
2629## Usage
@@ -52,6 +55,28 @@ The form components use DaisyUI's theme system. You can customize the theme by a
5255</html >
5356```
5457
58+ For dynamic theme switching, you can change the data-theme attribute in your application code.
59+
60+ ## Tailwind Configuration
61+
62+ Make sure your ` tailwind.config.js ` includes the DaisyUI plugin:
63+
64+ ``` js
65+ /** @type {import('tailwindcss').Config} */
66+ module .exports = {
67+ content: [
68+ " ./src/**/*.{js,jsx,ts,tsx}" ,
69+ ],
70+ theme: {
71+ extend: {},
72+ },
73+ plugins: [require (" daisyui" )],
74+ daisyui: {
75+ themes: true ,
76+ },
77+ }
78+ ```
79+
5580## Development
5681
5782``` bash
@@ -61,8 +86,8 @@ npm install
6186# Build the package
6287npm run build
6388
64- # Run tests
65- npm test
89+ # Run the development server
90+ npm run dev
6691```
6792
6893## License
0 commit comments