A complete setup guide for using React JSONSchema Form with Vite, Tailwind CSS, and Shadcn theme.
We are getting official support for v6 here. This is for v5.
npm create vite@latest myapp -- --template react-tsInstall RJSF core packages:
npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8 @rjsf/shadcn --save- Install Tailwind:
npm install -D tailwindcss@3
npx tailwindcss init- Configure Tailwind (
tailwind.config.ts):
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{html,js}",
"node_modules/@rjsf/shadcn/src/**/*.{js,ts,jsx,tsx,mdx}"
],
theme: {
extend: {},
},
plugins: [],
}- Add Tailwind directives to your CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;- Update
tsconfig.json:
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}- Update
tsconfig.app.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}- Install required dependency:
npm install -D @types/node- Update
vite.config.ts:
import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})Basic implementation example:
import { withTheme } from '@rjsf/core';
import { Theme as shadcnTheme } from '@rjsf/shadcn';
import { RJSFSchema } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';
const Form = withTheme(shadcnTheme);
const schema: RJSFSchema = {}; // Your schema
export default function App() {
return <Form schema={schema} validator={validator} />;
}
## RTL Support
### Installation
```bash
npm install @radix-ui/react-direction --save- Wrap your layout with DirectionProvider:
import { DirectionProvider as RadixDirectionProvider } from '@radix-ui/react-direction;
function Layout({ children, direction }) {
return (
<RadixDirectionProvider dir={direction}>
{children}
</RadixDirectionProvider>
);
}- Set HTML direction attribute:
<html dir="rtl">- You can refer to
direction-context.tsx,direction-provider.tsxandrtl-toggle.tsxfor implementation.
Add the following line to your equivalent global.css
@source "../node_modules/@rjsf/shadcn";