JSONForms ShadCN Renderer

Install

``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
`

Configure

$3

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;
`

$3

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";
`

Usage

`ts
import { JsonForms } from "@jsonforms/react";
import {
shadcnRenderers,
shadcnCells,
} from "@fragno-dev/jsonforms-shadcn-renderers";

function MyDynamicForm() {
return (
schema={schema}
uischema={uiSchema}
data={data}
renderers={shadcnRenderers}
cells={shadcnCells}
onChange={({ data }) => setData(data)}
/>
);
}
``

Compatibility

See this page on our docs for
all JSONforms primitives we support.