@rjsf/shadcn

@rjsf/shadcn

Shadcn theme, fields and widgets for react-jsonschema-form.


Explore the docs »




View Playground
·
Report Bug
·
Request Feature

Table of Contents

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

About The Project

Exports shadcn theme, fields and widgets for react-jsonschema-form.


Live demo

$3

- react-jsonschema-form
- shadcn
- Typescript

Getting Started

$3

- @rjsf/core >= 6
- @rjsf/utils >= 6
- @rjsf/validator-ajv8 >= 6

``bash
yarn add @rjsf/core @rjsf/utils @rjsf/validator-ajv8
`

$3

`bash
yarn add @rjsf/shadcn
`

Usage

`js
import Form from '@rjsf/shadcn';
`

or

`js
import {withTheme} from '@rjsf/core';
import {Theme as shadcnTheme} from '@rjsf/shadcn';

const Form = withTheme(shadcnTheme);
`

Theming

$3

Follow shadCN installation guide here for your application

The color of the RJSF will automatically apply with your shadCN config.

#### Tailwind v3
Add the following line to your tailwind.config.ts
`typescript
content: [
"./src/*/.{html,js}",
"node_modules/@rjsf/shadcn/src/*/.{js,ts,jsx,tsx,mdx}" // Add this line
],
`
#### Tailwind v4
Add the following line to your equivalent global.css
`css
@source "../node_modules/@rjsf/shadcn";
`

$3

#### 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 tweakcn
- 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)

$3

`bash
npm install @radix-ui/react-direction --save
`

$3

1. Wrap your layout with DirectionProvider:

`tsx
import {DirectionProvider as RadixDirectionProvider} from '@radix-ui/react-direction;

function Layout({children, direction}) {
return (

{children}

);
}
`

2. Set HTML direction attribute:

`html

`

3. You can refer to direction-context.tsx, direction-provider.tsx and rtl-toggle.tsx` from 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

[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

[contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg

[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://choosealicense.com/licenses/apache-2.0/

[npm-shield]: https://img.shields.io/npm/v/@rjsf/shadcn/latest.svg?style=flat-square

[npm-url]: https://www.npmjs.com/package/@rjsf/shadcn

[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/shadcn.svg?style=flat-square

[npm-dl-url]: https://www.npmjs.com/package/@rjsf/shadcn

[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/59a8206e148474bea854bbb004f624143fbcbac8/packages/shadcn/screenshot.png