widgets-ui

--- name: widgets-ui description: "Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes. Use for: agent-generated UIs, dynamic forms, data display, interactive cards. Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets, dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui" --- # Widget Renderer Declarative UI from JSON via [ui.inference.sh](https://ui.inference.sh).  ## Quick Start ```bash npx shadcn@latest add https://ui.inference.sh/r/widgets.json ``` ## Basic Usage ```tsx import { WidgetRenderer } from "@/registry/blocks/widgets/widget-renderer" import type { Widget, WidgetAction } from "@/registry/blocks/widgets/types" const widget: Widget = { type: 'ui', title: 'My Widget', children: [ { type: 'text', value: 'Hello World' }, { type: 'button', label: 'Click me', onClickAction: { type: 'click' } }, ], } <WidgetRenderer widget={widget} onAction={(action, formData) => console.log(action, formData)} /> ``` ## Widget Types ### Layout ```json { "type": "row", "gap": 2, "children": [...] } { "type": "col", "gap": 2, "children": [...] } { "type": "box", "background": "gradient-ocean", "padding": 4, "radius": "lg", "children": [...] } ``` ### Typography ```json { "type": "title", "value": "Heading", "size": "2xl", "weight": "bold" } { "type": "text", "value": "Body text", "variant": "bold" } { "type": "caption", "value": "Small text" } { "type": "label", "value": "Field label", "fieldName": "email" } ``` ### Interactive ```json { "type": "button", "label": "Submit", "variant": "default", "onClickAction": { "type": "submit" } } { "type": "input", "name": "email", "placeholder": "Enter email" } { "type": "textarea", "name": "message", [... prompt truncated for preview ...]