Package Exports
- rjsf-shadcn
- rjsf-shadcn/dist
- rjsf-shadcn/dist/AddButton/AddButton.js
- rjsf-shadcn/dist/AddButton/index.js
- rjsf-shadcn/dist/ArrayFieldItemTemplate/ArrayFieldItemTemplate.js
- rjsf-shadcn/dist/ArrayFieldItemTemplate/index.js
- rjsf-shadcn/dist/ArrayFieldTemplate/ArrayFieldTemplate.js
- rjsf-shadcn/dist/ArrayFieldTemplate/index.js
- rjsf-shadcn/dist/BaseInputTemplate/BaseInputTemplate.js
- rjsf-shadcn/dist/BaseInputTemplate/index.js
- rjsf-shadcn/dist/CheckboxWidget/CheckboxWidget.js
- rjsf-shadcn/dist/CheckboxWidget/index.js
- rjsf-shadcn/dist/CheckboxesWidget/CheckboxesWidget.js
- rjsf-shadcn/dist/CheckboxesWidget/index.js
- rjsf-shadcn/dist/DescriptionField/DescriptionField.js
- rjsf-shadcn/dist/DescriptionField/index.js
- rjsf-shadcn/dist/ErrorList/ErrorList.js
- rjsf-shadcn/dist/ErrorList/index.js
- rjsf-shadcn/dist/FieldErrorTemplate/FieldErrorTemplate.js
- rjsf-shadcn/dist/FieldErrorTemplate/index.js
- rjsf-shadcn/dist/FieldHelpTemplate/FieldHelpTemplate.js
- rjsf-shadcn/dist/FieldHelpTemplate/index.js
- rjsf-shadcn/dist/FieldTemplate/FieldTemplate.js
- rjsf-shadcn/dist/FieldTemplate/index.js
- rjsf-shadcn/dist/Form/Form.js
- rjsf-shadcn/dist/Form/index.js
- rjsf-shadcn/dist/GridTemplate/GridTemplate.js
- rjsf-shadcn/dist/GridTemplate/index.js
- rjsf-shadcn/dist/IconButton/IconButton.js
- rjsf-shadcn/dist/IconButton/index.js
- rjsf-shadcn/dist/ObjectFieldTemplate/ObjectFieldTemplate.js
- rjsf-shadcn/dist/ObjectFieldTemplate/index.js
- rjsf-shadcn/dist/RadioWidget/RadioWidget.js
- rjsf-shadcn/dist/RadioWidget/index.js
- rjsf-shadcn/dist/RangeWidget/RangeWidget.js
- rjsf-shadcn/dist/RangeWidget/index.js
- rjsf-shadcn/dist/SelectWidget/SelectWidget.js
- rjsf-shadcn/dist/SelectWidget/index.js
- rjsf-shadcn/dist/SubmitButton/SubmitButton.js
- rjsf-shadcn/dist/SubmitButton/index.js
- rjsf-shadcn/dist/Templates/Templates.js
- rjsf-shadcn/dist/Templates/index.js
- rjsf-shadcn/dist/TextareaWidget/TextareaWidget.js
- rjsf-shadcn/dist/TextareaWidget/index.js
- rjsf-shadcn/dist/Theme/Theme.js
- rjsf-shadcn/dist/Theme/index.js
- rjsf-shadcn/dist/TitleField/TitleField.js
- rjsf-shadcn/dist/TitleField/index.js
- rjsf-shadcn/dist/Widgets/Widgets.js
- rjsf-shadcn/dist/Widgets/index.js
- rjsf-shadcn/dist/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js
- rjsf-shadcn/dist/WrapIfAdditionalTemplate/index.js
- rjsf-shadcn/dist/components/ui/alert.js
- rjsf-shadcn/dist/components/ui/badge.js
- rjsf-shadcn/dist/components/ui/button.js
- rjsf-shadcn/dist/components/ui/checkbox.js
- rjsf-shadcn/dist/components/ui/command.js
- rjsf-shadcn/dist/components/ui/dialog.js
- rjsf-shadcn/dist/components/ui/fancy-multi-select.js
- rjsf-shadcn/dist/components/ui/fancy-select.js
- rjsf-shadcn/dist/components/ui/input.js
- rjsf-shadcn/dist/components/ui/label.js
- rjsf-shadcn/dist/components/ui/radio-group.js
- rjsf-shadcn/dist/components/ui/select.js
- rjsf-shadcn/dist/components/ui/separator.js
- rjsf-shadcn/dist/components/ui/slider.js
- rjsf-shadcn/dist/components/ui/textarea.js
- rjsf-shadcn/dist/index.js
- rjsf-shadcn/dist/lib/utils.js
- rjsf-shadcn/dist/rjsf-shadcn.esm.js
- rjsf-shadcn/dist/rjsf-shadcn.umd.js
- rjsf-shadcn/lib
- rjsf-shadcn/lib/AddButton/AddButton.js
- rjsf-shadcn/lib/AddButton/index.js
- rjsf-shadcn/lib/ArrayFieldItemTemplate/ArrayFieldItemTemplate.js
- rjsf-shadcn/lib/ArrayFieldItemTemplate/index.js
- rjsf-shadcn/lib/ArrayFieldTemplate/ArrayFieldTemplate.js
- rjsf-shadcn/lib/ArrayFieldTemplate/index.js
- rjsf-shadcn/lib/BaseInputTemplate/BaseInputTemplate.js
- rjsf-shadcn/lib/BaseInputTemplate/index.js
- rjsf-shadcn/lib/CheckboxWidget/CheckboxWidget.js
- rjsf-shadcn/lib/CheckboxWidget/index.js
- rjsf-shadcn/lib/CheckboxesWidget/CheckboxesWidget.js
- rjsf-shadcn/lib/CheckboxesWidget/index.js
- rjsf-shadcn/lib/DescriptionField/DescriptionField.js
- rjsf-shadcn/lib/DescriptionField/index.js
- rjsf-shadcn/lib/ErrorList/ErrorList.js
- rjsf-shadcn/lib/ErrorList/index.js
- rjsf-shadcn/lib/FieldErrorTemplate/FieldErrorTemplate.js
- rjsf-shadcn/lib/FieldErrorTemplate/index.js
- rjsf-shadcn/lib/FieldHelpTemplate/FieldHelpTemplate.js
- rjsf-shadcn/lib/FieldHelpTemplate/index.js
- rjsf-shadcn/lib/FieldTemplate/FieldTemplate.js
- rjsf-shadcn/lib/FieldTemplate/index.js
- rjsf-shadcn/lib/Form/Form.js
- rjsf-shadcn/lib/Form/index.js
- rjsf-shadcn/lib/GridTemplate/GridTemplate.js
- rjsf-shadcn/lib/GridTemplate/index.js
- rjsf-shadcn/lib/IconButton/IconButton.js
- rjsf-shadcn/lib/IconButton/index.js
- rjsf-shadcn/lib/ObjectFieldTemplate/ObjectFieldTemplate.js
- rjsf-shadcn/lib/ObjectFieldTemplate/index.js
- rjsf-shadcn/lib/RadioWidget/RadioWidget.js
- rjsf-shadcn/lib/RadioWidget/index.js
- rjsf-shadcn/lib/RangeWidget/RangeWidget.js
- rjsf-shadcn/lib/RangeWidget/index.js
- rjsf-shadcn/lib/SelectWidget/SelectWidget.js
- rjsf-shadcn/lib/SelectWidget/index.js
- rjsf-shadcn/lib/SubmitButton/SubmitButton.js
- rjsf-shadcn/lib/SubmitButton/index.js
- rjsf-shadcn/lib/Templates/Templates.js
- rjsf-shadcn/lib/Templates/index.js
- rjsf-shadcn/lib/TextareaWidget/TextareaWidget.js
- rjsf-shadcn/lib/TextareaWidget/index.js
- rjsf-shadcn/lib/Theme/Theme.js
- rjsf-shadcn/lib/Theme/index.js
- rjsf-shadcn/lib/TitleField/TitleField.js
- rjsf-shadcn/lib/TitleField/index.js
- rjsf-shadcn/lib/Widgets/Widgets.js
- rjsf-shadcn/lib/Widgets/index.js
- rjsf-shadcn/lib/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js
- rjsf-shadcn/lib/WrapIfAdditionalTemplate/index.js
- rjsf-shadcn/lib/components/ui/alert.js
- rjsf-shadcn/lib/components/ui/badge.js
- rjsf-shadcn/lib/components/ui/button.js
- rjsf-shadcn/lib/components/ui/checkbox.js
- rjsf-shadcn/lib/components/ui/command.js
- rjsf-shadcn/lib/components/ui/dialog.js
- rjsf-shadcn/lib/components/ui/fancy-multi-select.js
- rjsf-shadcn/lib/components/ui/fancy-select.js
- rjsf-shadcn/lib/components/ui/input.js
- rjsf-shadcn/lib/components/ui/label.js
- rjsf-shadcn/lib/components/ui/radio-group.js
- rjsf-shadcn/lib/components/ui/select.js
- rjsf-shadcn/lib/components/ui/separator.js
- rjsf-shadcn/lib/components/ui/slider.js
- rjsf-shadcn/lib/components/ui/textarea.js
- rjsf-shadcn/lib/index.js
- rjsf-shadcn/lib/lib/utils.js
- rjsf-shadcn/lib/rjsf-shadcn.esm.js
- rjsf-shadcn/lib/rjsf-shadcn.umd.js
Readme
@rjsf/shadcn
Shadcn theme, fields and widgets for react-jsonschema-form.
Explore the docs »
View Playground
·
Report Bug
·
Request Feature
Table of Contents
About The Project
Exports shadcn theme, fields and widgets for react-jsonschema-form.
Built With
Getting Started
Prerequisites
@rjsf/core >= 6tailwindcss (optional)
yarn add @rjsf/coreInstallation
yarn add @rjsf/shadcnUsage
import Form from '@rjsf/shadcn';or
import {withTheme} from '@rjsf/core';
import {Theme as shadcnTheme} from '@rjsf/shadcn';
const Form = withTheme(shadcnTheme);Theming
Using Tailwind
Follow shadCN installation guide here for your application
The color of the RJSF will automatically apply with your shadCN config.
Not using Tailwind
Use the theme on demo site
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
Coloring
- 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
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
Dark mode (Tailwind only)
Check out this section by shadCN
RTL (Tailwind only)
Installation
npm install @radix-ui/react-direction --saveImplementation
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.
Updating to latest shadCN version
- 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
Contributing
Read our contributors' guide to get started.
Contact
rjsf team: https://github.com/orgs/rjsf-team/people
GitHub repository: https://github.com/rjsf-team/react-jsonschema-form