Fluent UI theme, fields and widgets for react-jsonschema-form.
Explore the docs »

View Playground · Report Bug · Request Feature

• Table of Contents
• About The Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contributing
• Contact

Fluent UI theme, fields and widgets for react-jsonschema-form.

• react-jsonschema-form
• Fluent UI
• Typescript

• @fluentui/react >= 7.114.2
• @rjsf/core >= 2.0.0

yarn add @fluentui/react @rjsf/core

For the Fluent UI grid to work, add the following CSS tag to the main HTML page:

<link
  rel="stylesheet"
  href="//static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
/>

yarn add @rjsf/fluent-ui

import Form from '@rjsf/fluent-ui';

or

import { withTheme } from '@rjsf/core';
import { Theme as FluentUITheme } from '@rjsf/fluent-ui';

// Make modifications to the theme with your own fields and widgets

const Form = withTheme(FluentUITheme);

See the open issues for a list of proposed features (and known issues).

Read our contributors' guide to get started.

rjsf team: https://github.com/orgs/rjsf-team/people

GitHub repository: https://github.com/rjsf-team/react-jsonschema-form