```npm pnpm add @fragno-dev/jsonforms-shadcn-renderers \ @jsonforms/react ```
npm install @fragno-dev/jsonforms-shadcn-renderers``npm`
pnpm add @fragno-dev/jsonforms-shadcn-renderers \
@jsonforms/react
Make sure you have all of these shadcn components added to your project:
`bash`
pnpm dlx shadcn@latest add button \
calendar \
card \
checkbox \
field \
input \
label \
popover \
radio-group \
select \
slider \
switch \
tabs \
textarea
Because you need to bring your own ShadCN components, these imports must be resolvable in Vite.
If you get this error, it means vite cannot find your components.
``
[vite] Internal server error: Failed to resolve import "@/components/ui/slider" from "jsonforms-shadcn-renderers/src/shadcn-controls/ShadcnSlider.tsx". Does the file exist?
`ts
import { defineConfig } from "vite";
import path from "path";
const config = defineConfig({
resolve: {
alias: {
"@/components": path.resolve(__dirname, "./src/components"),
"@/lib": path.resolve(__dirname, "./src/lib"),
},
},
ssr: {
noExternal: ["@fragno-dev/jsonforms-shadcn-renderers"],
},
});
export default config;
`
Be sure to include this library as a tailwind source, otherwise it will not include the classes used
in your final build!
https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources
`css`
@source "../node_modules/@fragno-dev/jsonforms-shadcn-renderers";
`ts
import { JsonForms } from "@jsonforms/react";
import {
shadcnRenderers,
shadcnCells,
} from "@fragno-dev/jsonforms-shadcn-renderers";
function MyDynamicForm() {
return (
uischema={uiSchema}
data={data}
renderers={shadcnRenderers}
cells={shadcnCells}
onChange={({ data }) => setData(data)}
/>
);
}
``
See this page on our docs for
all JSONforms primitives we support.