@rjsf/daisyui
v6.2.5TypeScript
Daisy UI components for react-jsonschema-form
0/weekUpdated 3 weeks agoApache-2.0Unpacked: 1.1 MB
Published by Jason Vertrees
npm install @rjsf/daisyui@rjsf/daisyui
[![Build Status][build-shield]][build-url]
[![npm][npm-shield]][npm-url]
[![npm downloads][npm-dl-shield]][npm-dl-url]
[![Contributors][contributors-shield]][contributors-url]
[![License][license-shield]][license-url]
A DaisyUI theme for react-jsonschema-form.
This package integrates DaisyUI, Tailwind CSS, and RJSF to provide a modern, customizable form experience.
Screenshots
Features
- Complete DaisyUI styling for all RJSF form elements
- Responsive design with mobile-friendly layouts
- Connected card styling for nested elements and arrays
- Consistent visual hierarchy for complex forms
- Support for all RJSF field types including:
- Text inputs with proper styling and validation states
- Select dropdowns with customizable option rendering
- Checkboxes and radio buttons with optimized layouts
- Arrays with add/remove/reorder functionality
- Objects with proper nesting and visual hierarchy
- Date/time inputs with cross-browser compatibility
- Support for custom themes via DaisyUI's theme system
- Accessible form components following WAI-ARIA practices
Getting Started
$3
- daisyui >= 5
- @fluentui/react-icons >= 2
- @fluentui/react-migration-v0-v9 >= 9
- @rjsf/core >= 6
- @rjsf/utils >= 6
- @rjsf/validator-ajv8 >= 6
$3
``bash`
npm install @rjsf/daisyui @rjsf/core @rjsf/utils @rjsf/validator-ajv8 tailwindcss daisyui
Usage
`jsx
import { Form } from '@rjsf/daisyui';
import validator from '@rjsf/validator-ajv8';
function App() {
return (
);
}
`
Theme Customization
The form components use DaisyUI's theme system. You can customize the theme by adding DaisyUI theme classes to your HTML:
html
`For dynamic theme switching, you can change the data-theme attribute in your application code.
Tailwind Configuration
Make sure your
includes the DaisyUI plugin:`css
@import 'tailwindcss';
@source "../node_modules/@rjsf/daisyui";
@plugin "daisyui" {
themes: all;
}
`
It's necessary to explicitely include the library as a source, as tailwindcss by default ignores everything in
Customization
$3
The DaisyUI theme supports the standard RJSF layout grid system. You can use grid layouts by incorporating the
LayoutGridField in your UI schema:`jsx
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 = () =>
;
`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.
Theme Configuration
DaisyUI itself provides a variety of themes. To use a specific theme, add the
attribute to your root element:`jsx
`You can also dynamically change themes in your application:
jsx
import { useState } from 'react';
import { Form } from '@rjsf/daisyui';
import validator from '@rjsf/validator-ajv8';function App() {
const [theme, setTheme] = useState('light');
return (
);
}
`Development
To develop locally:
bash
Clone the repository
git clone https://github.com/rjsf-team/react-jsonschema-form.git
cd react-jsonschema-formInstall dependencies
npm installBuild packages
npm run buildRun playground
npm run start:playground
``To test the DaisyUI theme specifically, select it from the themes dropdown in the playground.
License
Apache-2.0
[build-shield]: https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg
[build-url]: https://github.com/rjsf-team/react-jsonschema-form/actions
[npm-shield]: https://img.shields.io/npm/v/@rjsf/daisyui/latest.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@rjsf/daisyui
[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/daisyui.svg?style=flat-square
[npm-dl-url]: https://www.npmjs.com/package/@rjsf/daisyui
[contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg?style=flat-square
[contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors
[license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square
[license-url]: https://github.com/rjsf-team/react-jsonschema-form/blob/main/LICENSE