@json-render/shadcn

Pre-built shadcn/ui component definitions and implementations for json-render. Provides 36 components built on Radix UI + Tailwind CSS.

Two Entry Points

Entry Point Exports Use For

@json-render/shadcn/catalog

shadcnComponentDefinitions

Catalog schemas (no React dependency, safe for server)

@json-render/shadcn

shadcnComponents

React implementations

Usage Pattern

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 by ActionProvider automatically. No need to declare them.

Extending with Custom Components

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>, }, });

Available Components

Layout

• Card - Container with optional title, description, maxWidth, centered

• Stack - Flex container with direction, gap, align, justify

• Grid - Grid layout with columns (number) and gap

• Separator - Visual divider with orientation

Navigation

• Tabs - Tabbed navigation with tabs array, defaultValue, value

• Accordion - Collapsible sections with items array and type (single/multiple)

• Collapsible - Single collapsible section with title

• Pagination - Page navigation with totalPages and page

Overlay

• Dialog - Modal dialog with title, description, openPath

• Drawer - Bottom drawer with title, description, openPath

• Tooltip - Hover tooltip with content and text

• Popover - Click-triggered popover with trigger and content

• DropdownMenu - Dropdown with label and items array

Content

• Heading - Heading text with level (h1-h4)

• Text - Paragraph with variant (body, caption, muted, lead, code)

• Image - Image with alt, width, height

• Avatar - User avatar with src, name, size

• Badge - Status badge with text and variant (default, secondary, destructive, outline)

• Alert - Alert banner with title, message, type (success, warning, info, error)

• Carousel - Scrollable carousel with items array

• Table - Data table with columns (string[]) and rows (string[][])

Feedback

• Progress - Progress bar with value, max, label

• Skeleton - Loading placeholder with width, height, rounded

• Spinner - Loading spinner with size and label

Input

• Button - Button with label, variant (primary, secondary, danger), disabled

• Link - Anchor link with label and href

• Input - Text input with label, name, type, placeholder, value, checks

• Textarea - Multi-line input with label, name, placeholder, rows, value, checks

• Select - Dropdown select with label, name, options (string[]), value, checks

• Checkbox - Checkbox with label, name, checked, checks, validateOn

• Radio - Radio group with label, name, options (string[]), value, checks, validateOn

• Switch - Toggle switch with label, name, checked, checks, validateOn

• Slider - Range slider with label, min, max, step, value

• Toggle - Toggle button with label, pressed, variant

• ToggleGroup - Group of toggles with items, type, value

• ButtonGroup - Button group with buttons array and selected

Built-in Actions (from @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.

• setState - Set a value at a state path ({ statePath, value } )

• pushState - Push a value onto an array ({ statePath, value, clearStatePath? } )

• removeState - Remove an array item by index ({ statePath, index } )

• validateForm - Validate all fields, write { valid, errors } to state ({ statePath? } )

Validation Timing (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

Important Notes

• The /catalog entry point has no React dependency -- use it for server-side prompt generation

• Components use Tailwind CSS classes -- your app must have Tailwind configured

• Component implementations use bundled shadcn/ui primitives (not your app's components/ui/ )

• All form inputs support checks for validation (type + message pairs) and validateOn for timing

• Events: inputs emit change /submit /focus /blur ; buttons emit press ; selects emit change /select