Shadcn theme, fields and widgets for react-jsonschema-form.
Explore the docs »
View Playground
·
Report Bug
·
Request Feature
Exports shadcn theme, fields and widgets for react-jsonschema-form.
@rjsf/core >= 6@rjsf/utils >= 6@rjsf/validator-ajv8 >= 6
yarn add @rjsf/core @rjsf/utils @rjsf/validator-ajv8yarn add @rjsf/shadcnimport Form from '@rjsf/shadcn';or
import {withTheme} from '@rjsf/core';
import {Theme as shadcnTheme} from '@rjsf/shadcn';
const Form = withTheme(shadcnTheme);Follow shadCN installation guide here for your application
The color of the RJSF will automatically apply with your shadCN config.
Add the following line to your tailwind.config.ts
content: [
"./src/**/*.{html,js}",
"node_modules/@rjsf/shadcn/src/**/*.{js,ts,jsx,tsx,mdx}" // Add this line
],Add the following line to your equivalent global.css
@source "../node_modules/@rjsf/shadcn";All shadcn's default color theme are included in the npm packages. Simply do
import '@rjsf/shadcn/dist/[color].css';
e.g:
import '@rjsf/shadcn/dist/zinc.css';
Supported colors are:
- default
- zinc
- red
- rose
- orange
- green
- blue
- yellow
- violet
- Generate a theme from official shadCN site or zippy starter's shadcn/ui theme generator or Railly
- Navigate to shadcn/css, create a new file called [your-theme].css
- Replace the base layer code with your new color
- Follow the next section to build your CSS file
If you are not using tailwind but still wants to use this theme, you can follow these steps:
- Clone the repository
cd packages/shadcn
npm i
npm run build:css
- Include the built file in /dist/rjsf-shadcn.css in your application
Check out this section by shadCN
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" lang="en">
-
You can refer to
direction-context.tsx,direction-provider.tsxandrtl-toggle.tsxfrom demo repository for implementation.
- Simply copy the shadcn components into shadcn/src/components/ui and rebuilt the packages or using the shadcn CLI at the root level with the components.json
- For RTL version, you might need component from here by nahasco
- Fancy multi-select
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