\n\n\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [About The Project](#about-the-project)\n - [Built With](#built-with)\n- [Getting Started](#getting-started)\n - [Prerequisites](#prerequisites)\n - [Installation](#installation)\n- [Usage](#usage)\n- [Contributing](#contributing)\n- [Contact](#contact)\n\n\n\n## About The Project\n\nExports `shadcn` theme, fields and widgets for `react-jsonschema-form`.\n\n[](https://rjsf-team.github.io/@rjsf/shadcn)\n\n[Live demo](https://react-jsonschema-form-shadcn-boilerplate.vercel.app/)\n\n### Built With\n\n- [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form/)\n- [shadcn](https://ui.shadcn.com/)\n- [Typescript](https://www.typescriptlang.org/)\n\n\n\n## Getting Started\n\n### Prerequisites\n\n- `@rjsf/core >= 6`\n- `@rjsf/utils >= 6`\n- `@rjsf/validator-ajv8 >= 6`\n\n```bash\nyarn add @rjsf/core @rjsf/utils @rjsf/validator-ajv8\n```\n\n### Installation\n\n```bash\nyarn add @rjsf/shadcn\n```\n\n## Usage\n\n```js\nimport Form from '@rjsf/shadcn';\n```\n\nor\n\n```js\nimport {withTheme} from '@rjsf/core';\nimport {Theme as shadcnTheme} from '@rjsf/shadcn';\n\nconst Form = withTheme(shadcnTheme);\n```\n\n\n\n## Theming\n\n### Using Tailwind\n\nFollow shadCN installation guide [here](https://ui.shadcn.com/docs/installation) for your application\n\nThe color of the RJSF will automatically apply with your shadCN config.\n\n#### Tailwind v3\nAdd the following line to your tailwind.config.ts\n```typescript\n content: [\n \"./src/**/*.{html,js}\",\n \"node_modules/@rjsf/shadcn/src/**/*.{js,ts,jsx,tsx,mdx}\" // Add this line\n ],\n```\n#### Tailwind v4\nAdd the following line to your equivalent global.css\n```css\n@source \"../node_modules/@rjsf/shadcn\";\n```\n\n### Not using Tailwind\n\n#### Use the theme on demo site\n\nA prebuilt stylesheet for each bundled theme is included in the npm package. Simply do\n\n```\nimport '@rjsf/shadcn/dist/[theme].css';\ne.g:\nimport '@rjsf/shadcn/dist/default.css';\n```\n\nNote that these stylesheets are complete Tailwind builds and include Tailwind's preflight reset, so importing one\nwill also restyle the rest of your page. If your application already builds Tailwind, use the\n[Using Tailwind](#using-tailwind) section above instead.\n\nSupported themes are:\n\n- default\n- amethyst-haze\n- caffeine\n- claude\n- clean-slate\n- neo-brutalism\n- pastel-dreams\n- soft-pop\n- twitter\n- vercel\n\n#### Coloring\n\n- Generate a theme from [official shadCN site](https://ui.shadcn.com/themes)\n or [tweakcn](https://tweakcn.com/editor/theme)\n- Navigate to `packages/shadcn/src/css`, create a new file called [your-theme].css\n- Replace the base layer code with your new color\n- Follow the next section to build your CSS file\n\n#### Build your CSS file\n\nIf you are not using tailwind but still wants to use this theme, you can follow these steps:\n\n- Clone the repository\n\n```\ncd packages/shadcn\nnpm i\nnpm run build:css\n```\n\n- Include the built `dist/[your-theme].css` in your application\n\n## Dark mode (Tailwind only)\n\nCheck out this section by [shadCN](https://ui.shadcn.com/docs/dark-mode)\n\n## RTL (Tailwind only)\n\n### Installation\n\n```bash\nnpm install @radix-ui/react-direction --save\n```\n\n### Implementation\n\n1. Wrap your layout with DirectionProvider:\n\n ```tsx\n import {DirectionProvider as RadixDirectionProvider} from '@radix-ui/react-direction;\n \n function Layout({children, direction}) {\n return (\n \n {children}\n \n );\n }\n ```\n\n2. Set HTML direction attribute:\n\n ```html\n \n ```\n\n3. You can refer to `direction-context.tsx`, `direction-provider.tsx` and `rtl-toggle.tsx` from demo repository for\n implementation.\n\n## Updating to latest shadCN version\n\n- Simply copy the shadcn components into shadcn/src/components/ui and rebuilt the packages or using the shadcn CLI at\n the root level with the components.json\n- For RTL version, you might need component from [here](https://github.com/shadcn-ui/ui/pull/1638)\n by [nahasco](https://github.com/nahasco)\n- [Fancy multi-select](https://craft.mxkaske.dev/post/fancy-multi-select)\n\n\n\n## Contributing\n\nRead our [contributors' guide](https://rjsf-team.github.io/react-jsonschema-form/docs/contributing/) to get started.\n\n\n\n## Contact\n\nrjsf team: [https://github.com/orgs/rjsf-team/people](https://github.com/orgs/rjsf-team/people)\n\nGitHub\nrepository: [https://github.com/rjsf-team/react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form)\n\n\n\n\n[build-shield]: https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg\n\n[build-url]: https://github.com/rjsf-team/react-jsonschema-form/actions\n\n[contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg\n\n[contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors\n\n[license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square\n\n[license-url]: https://choosealicense.com/licenses/apache-2.0/\n\n[npm-shield]: https://img.shields.io/npm/v/@rjsf/shadcn/latest.svg?style=flat-square\n\n[npm-url]: https://www.npmjs.com/package/@rjsf/shadcn\n\n[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/shadcn.svg?style=flat-square\n\n[npm-dl-url]: https://www.npmjs.com/package/@rjsf/shadcn\n\n[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/59a8206e148474bea854bbb004f624143fbcbac8/packages/shadcn/screenshot.png\n","readmeFilename":"README.md"}
![\"Logo\"](\"./shadcn.png\")
\n \n\n