JSONForms ShadCN Renderer

Install

pnpm add @fragno-dev/jsonforms-shadcn-renderers \
         @jsonforms/react

Make sure you have all of these shadcn components added to your project:

pnpm dlx shadcn@latest add button \
        calendar \
        card \
        checkbox \
        field \
        input \
        label \
        popover \
        radio-group \
        select \
        slider \
        switch \
        tabs \
        textarea

Configure

Vite:

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?

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;

Tailwind

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

@source "../node_modules/@fragno-dev/jsonforms-shadcn-renderers";

Usage

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

function MyDynamicForm() {
  return (
    <JsonForms
      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.