@rjsf/daisyui
Advanced tools
A DaisyUI theme for react-jsonschema-form.
This package integrates DaisyUI, Tailwind CSS, and RJSF to provide a modern, customizable form experience.
daisyui >= 5@fluentui/react-icons >= 2@fluentui/react-migration-v0-v9 >= 9@rjsf/core >= 6@rjsf/utils >= 6@rjsf/validator-ajv8 >= 6npm install @rjsf/daisyui @rjsf/core @rjsf/utils @rjsf/validator-ajv8 tailwindcss daisyui
import { Form } from '@rjsf/daisyui';
import validator from '@rjsf/validator-ajv8';
function App() {
return (
<Form schema={schema} uiSchema={uiSchema} validator={validator} onChange={console.log} onSubmit={console.log} />
);
}
The form components use DaisyUI's theme system. You can customize the theme by adding DaisyUI theme classes to your HTML:
<html data-theme="light">
<!-- or any other DaisyUI theme -->
</html>
For dynamic theme switching, you can change the data-theme attribute in your application code.
Make sure your tailwind.config.js includes the DaisyUI plugin:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [require('daisyui')],
daisyui: {
themes: true,
},
};
The DaisyUI theme supports the standard RJSF layout grid system. You can use grid layouts by incorporating the LayoutGridField in your UI schema:
import { RJSFSchema, UiSchema } from '@rjsf/utils';
import Form from '@rjsf/daisyui';
import validator from '@rjsf/validator-ajv8';
const schema = {
type: 'object',
properties: {
firstName: { type: 'string', title: 'First Name' },
lastName: { type: 'string', title: 'Last Name' },
email: { type: 'string', format: 'email', title: 'Email' },
phone: { type: 'string', title: 'Phone' },
},
};
// Use grid layout for the form
const uiSchema = {
'ui:field': 'LayoutGridField',
'ui:layoutGrid': {
'ui:row': {
children: [
{
'ui:row': {
children: [
{
'ui:col': {
xs: 12,
sm: 6,
children: ['firstName'],
},
},
{
'ui:col': {
xs: 12,
sm: 6,
children: ['lastName'],
},
},
],
},
},
{
'ui:row': {
children: [
{
'ui:col': {
xs: 12,
sm: 6,
children: ['email'],
},
},
{
'ui:col': {
xs: 12,
sm: 6,
children: ['phone'],
},
},
],
},
},
],
},
},
};
const MyForm = () => <Form schema={schema} uiSchema={uiSchema} validator={validator} />;
The DaisyUI theme uses a flexible grid system based on Tailwind CSS's flex utilities. This grid layout integrates with the standard RJSF layout system, providing a consistent experience across all themes.
DaisyUI itself provides a variety of themes. To use a specific theme, add the data-theme attribute to your root element:
<div data-theme='dark'>
<Form schema={schema} validator={validator} />
</div>
You can also dynamically change themes in your application:
import { useState } from 'react';
import { Form } from '@rjsf/daisyui';
import validator from '@rjsf/validator-ajv8';
function App() {
const [theme, setTheme] = useState('light');
return (
<div data-theme={theme}>
<select value={theme} onChange={(e) => setTheme(e.target.value)}>
<option value='light'>Light</option>
<option value='dark'>Dark</option>
<option value='cupcake'>Cupcake</option>
<option value='cyberpunk'>Cyberpunk</option>
<option value='synthwave'>Synthwave</option>
{/* Add more themes as needed */}
</select>
<Form schema={schema} validator={validator} />
</div>
);
}
To develop locally:
# Clone the repository
git clone https://github.com/rjsf-team/react-jsonschema-form.git
cd react-jsonschema-form
# Install dependencies
npm install
# Build packages
npm run build
# Run playground
npm run start:playground
To test the DaisyUI theme specifically, select it from the themes dropdown in the playground.
Apache-2.0
6.0.0-beta.10
tsc-alias replacer that was adding /index.js onto the @mui/Xxxx imports since MUI 7 has proper ESM supportFAQs
Daisy UI components for react-jsonschema-form
We found that @rjsf/daisyui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.