Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components.
Pre-built shadcn/ui component definitions and implementations for json-render. Provides 36 components built on Radix UI + Tailwind CSS.
| Entry Point | Exports | Use For |
|---|---|---|
@json-render/shadcn/catalog | shadcnComponentDefinitions | Catalog schemas (no React dependency, safe for server) |
@json-render/shadcn | shadcnComponents | React implementations |
Pick the components you need from the standard definitions. Do not spread all definitions -- explicitly select what your app uses:
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
import { defineRegistry } from "@json-render/react";
import { shadcnComponents } from "@json-render/shadcn";
// Catalog: pick definitions
const catalog = defineCatalog(schema, {
components: {
Card: shadcnComponentDefinitions.Card,
Stack: shadcnComponentDefinitions.Stack,
Heading: shadcnComponentDefinitions.Heading,
Button: shadcnComponentDefinitions.Button,
Input: shadcnComponentDefinitions.Input,
},
actions: {},
});
// Registry: pick matching implementations
const { registry } = defineRegistry(catalog, {
components: {
Card: shadcnComponents.Card,
Stack: shadcnComponents.Stack,
Heading: shadcnComponents.Heading,
Button: shadcnComponents.Button,
Input: shadcnComponents.Input,
},
});
State actions (
setState,pushState,removeState) are built into the React schema and handled byActionProviderautomatically. No need to declare them.
Add custom components alongside standard ones:
const catalog = defineCatalog(schema, {
components: {
// Standard
Card: shadcnComponentDefinitions.Card,
Stack: shadcnComponentDefinitions.Stack,
// Custom
Metric: {
props: z.object({
label: z.string(),
value: z.string(),
trend: z.enum(["up", "down", "neutral"]).nullable(),
}),
description: "KPI metric display",
},
},
actions: {},
});
const { registry } = defineRegistry(catalog, {
components: {
Card: shadcnComponents.Card,
Stack: shadcnComponents.Stack,
Metric: ({ props }) => <div>{props.label}: {props.value}</div>,
},
});
@json-render/react)These are built into the React schema and handled by ActionProvider automatically. They appear in prompts without needing to be declared in the catalog.
{ statePath, value }){ statePath, value, clearStatePath? }){ statePath, index }){ valid, errors } to state ({ statePath? })validateOn)All form components support validateOn to control when validation runs:
"change" — validate on every input change (default for Select, Checkbox, Radio, Switch)"blur" — validate when field loses focus (default for Input, Textarea)"submit" — validate only on form submission/catalog entry point has no React dependency -- use it for server-side prompt generationcomponents/ui/)checks for validation (type + message pairs) and validateOn for timingchange/submit/focus/blur; buttons emit press; selects emit change/select