Component Reference

Full reference for all JSON Render components — layout, form, display, and overlay elements with props and usage examples.

#Layout

#Box

Flex or grid container. Wraps children in a layout.

json

{ "type": "Box", "props": { "direction": "row", "gap": "md", "align": "center" }, "children": [...] }

json

{ "type": "Box", "props": { "display": "grid", "columns": "3", "gap": "lg" }, "children": [...] }

Prop	Type	Default	Description
`display`	`"flex"` \| `"grid"`	`"flex"`	Layout mode
`direction`	`"row"` \| `"column"`	`"column"`	Flex direction (flex only)
`gap`	`"none"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"`	`"none"`	Spacing between children
`align`	`"start"` \| `"center"` \| `"end"` \| `"stretch"` \| `"baseline"`	`"stretch"`	Cross-axis alignment (flex only)
`justify`	`"start"` \| `"center"` \| `"end"` \| `"between"` \| `"around"` \| `"evenly"`	`"start"`	Main-axis alignment (flex only)
`wrap`	`boolean`	`false`	Allow wrapping (flex only)
`padding`	`"none"` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"`	`"none"`	Inner padding
`columns`	`"1"` \| `"2"` \| `"3"` \| `"4"`	`"1"`	Grid columns (grid only, responsive)

#Card

Content group with optional header.

json

{ "type": "Card", "props": { "title": "Account", "description": "Manage your settings" }, "children": [...] }

Prop	Type	Description
`title`	`string`	Card heading
`description`	`string`	Subtitle below the title

#Tabs

Tabbed navigation. Children render inside the active tab.

json

{
  "type": "Tabs",
  "props": {
    "tabs": [
      { "label": "Profile", "value": "profile" },
      { "label": "Security", "value": "security" }
    ],
    "defaultValue": "profile"
  },
  "children": ["profileContent"]
}

Prop	Type	Description
`tabs`	`{ label, value, disabled? }[]`	Tab definitions
`defaultValue`	`string`	Initially active tab value
`value`	bindable `string`	Controlled active tab

#ScrollArea

Scrollable container with custom scrollbars.

json

{ "type": "ScrollArea", "props": { "maxHeight": "300px" }, "children": [...] }

Prop	Type	Default	Description
`maxHeight`	`string`	—	CSS max-height (e.g., `"300px"`)
`orientation`	`"vertical"` \| `"horizontal"` \| `"both"`	`"vertical"`	Scroll direction

#Separator

Horizontal or vertical divider.

json

{ "type": "Separator", "props": { "orientation": "horizontal" } }

#Form

#Input

Text input with optional label and validation.

json

{
  "type": "Input",
  "props": {
    "label": "Email",
    "type": "email",
    "placeholder": "you@example.com",
    "value": { "$bindState": "/form/email" },
    "checks": [{ "type": "required", "message": "Required" }],
    "validateOn": "blur"
  }
}

Prop	Type	Description
`label`	`string`	Field label
`name`	`string`	HTML name attribute
`type`	`"text"` \| `"email"` \| `"password"` \| `"number"` \| `"tel"` \| `"url"`	Input type
`placeholder`	`string`	Placeholder text
`value`	bindable `string`	Current value
`disabled`	`boolean`	Disable the field
`required`	`boolean`	Mark as required
`checks`	`{ type, message, args? }[]`	Validation rules
`validateOn`	`"change"` \| `"blur"` \| `"submit"`	When to validate

#Textarea

Multi-line text input.

json

{
  "type": "Textarea",
  "props": {
    "label": "Message",
    "placeholder": "Type here...",
    "rows": 4,
    "value": { "$bindState": "/form/message" }
  }
}

Prop	Type	Description
`label`	`string`	Field label
`placeholder`	`string`	Placeholder text
`rows`	`number`	Visible rows (default 3)
`value`	bindable `string`	Current value
`disabled`	`boolean`	Disable the field
`checks` / `validateOn`	—	Same as Input

#Checkbox

Boolean toggle for agreements, opt-ins.

json

{
  "type": "Checkbox",
  "props": {
    "label": "I agree to the terms",
    "checked": { "$bindState": "/form/agreed" }
  }
}

Prop	Type	Description
`label`	`string`	Label text
`checked`	bindable `boolean`	Checked state
`disabled`	`boolean`	Disable the checkbox
`checks` / `validateOn`	—	Validation support

#Switch

On/off toggle for settings.

json

{
  "type": "Switch",
  "props": {
    "label": "Dark mode",
    "checked": { "$bindState": "/settings/dark" }
  }
}

Prop	Type	Description
`label`	`string`	Label text
`checked`	bindable `boolean`	On/off state
`disabled`	`boolean`	Disable the switch

#Radio

Single selection from visible options (2–5 items).

json

{
  "type": "Radio",
  "props": {
    "label": "Size",
    "options": [
      { "label": "Small", "value": "sm" },
      { "label": "Medium", "value": "md" },
      { "label": "Large", "value": "lg" }
    ],
    "value": { "$bindState": "/form/size" }
  }
}

Prop	Type	Description
`label`	`string`	Group label
`options`	`{ label, value, disabled? }[]`	Radio options
`value`	bindable `string`	Selected value
`checks` / `validateOn`	—	Validation support

#Select

Dropdown for many options (6+).

json

{
  "type": "Select",
  "props": {
    "label": "Country",
    "placeholder": "Select country",
    "options": [
      { "label": "United States", "value": "us" },
      { "label": "Canada", "value": "ca" }
    ],
    "value": { "$bindState": "/form/country" }
  }
}

Prop	Type	Description
`label`	`string`	Field label
`placeholder`	`string`	Placeholder text
`options`	`{ label, value, disabled? }[]`	Select options
`value`	bindable `string`	Selected value
`disabled`	`boolean`	Disable the select
`checks` / `validateOn`	—	Validation support

#Slider

Range input for approximate numeric selection.

json

{
  "type": "Slider",
  "props": {
    "label": "Volume",
    "min": 0,
    "max": 100,
    "step": 5,
    "value": { "$bindState": "/settings/volume" }
  }
}

Prop	Type	Description
`label`	`string`	Field label
`min` / `max`	`number`	Range bounds
`step`	`number`	Step increment
`value`	bindable `number`	Current value
`disabled`	`boolean`	Disable the slider

#NumberField

Precise numeric input with increment/decrement buttons.

json

{
  "type": "NumberField",
  "props": {
    "label": "Quantity",
    "min": 1,
    "max": 99,
    "step": 1,
    "value": { "$bindState": "/cart/quantity" }
  }
}

Prop	Type	Description
`label`	`string`	Field label
`min` / `max`	`number`	Range bounds
`step`	`number`	Step increment
`value`	bindable `number`	Current value
`disabled`	`boolean`	Disable the field
`checks` / `validateOn`	—	Validation support

#Toggle

Pressable button for binary states (bold, favorite).

json

{
  "type": "Toggle",
  "props": {
    "label": "Bold",
    "variant": "outline",
    "pressed": { "$bindState": "/editor/bold" }
  }
}

Prop	Type	Description
`label`	`string`	Button text
`variant`	`"default"` \| `"outline"`	Visual style
`size`	`"default"` \| `"sm"` \| `"lg"`	Size
`pressed`	bindable `boolean`	Pressed state

#ToggleGroup

Compact visual selector for 2–4 options.

json

{
  "type": "ToggleGroup",
  "props": {
    "options": [
      { "label": "Grid", "value": "grid" },
      { "label": "List", "value": "list" }
    ],
    "value": { "$bindState": "/view/mode" }
  }
}

Prop	Type	Description
`options`	`{ label, value }[]`	Toggle options
`variant`	`"default"` \| `"outline"`	Visual style
`size`	`"default"` \| `"sm"` \| `"lg"`	Size
`value`	bindable `string`	Selected value

#Label

Standalone form label. Most components have a built-in label prop — only use this for custom layouts.

json

{ "type": "Label", "props": { "text": "Email address", "htmlFor": "email" } }

#Fieldset

Groups related form fields with an optional legend.

json

{ "type": "Fieldset", "props": { "legend": "Personal Information" }, "children": [...] }

Prop	Type	Description
`legend`	`string`	Group heading
`disabled`	`boolean`	Disable all fields inside

#Button

Clickable button. Emits press.

json

{
  "type": "Button",
  "props": { "label": "Submit", "variant": "default" },
  "on": { "press": { "action": "submit" } }
}

Prop	Type	Description
`label`	`string`	Button text
`variant`	`"default"` \| `"destructive"` \| `"outline"` \| `"secondary"` \| `"ghost"` \| `"link"`	Visual style
`size`	`"default"` \| `"sm"` \| `"lg"` \| `"icon"`	Size
`disabled`	`boolean`	Disable the button

#Display

#Text

Renders text with semantic variants.

json

{ "type": "Text", "props": { "content": "Welcome back", "variant": "h2" } }

Prop	Type	Description
`content`	`string`	Text content
`variant`	`"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"p"` \| `"large"` \| `"small"` \| `"lead"` \| `"muted"` \| `"blockquote"` \| `"code"` \| `"span"`	Semantic variant (default `"p"`)

#Badge

Status indicator or tag.

json

{ "type": "Badge", "props": { "text": "Active", "variant": "success" } }

Prop	Type	Description
`text`	`string`	Badge text
`variant`	`"default"` \| `"secondary"` \| `"destructive"` \| `"outline"` \| `"success"` \| `"warning"` \| `"info"`	Color variant
`size`	`"sm"` \| `"default"` \| `"lg"`	Size
`rounded`	`"default"` \| `"sm"` \| `"md"` \| `"lg"` \| `"none"`	Border radius

#Avatar

User avatar with image and fallback initials.

json

{ "type": "Avatar", "props": { "src": "/avatar.jpg", "fallback": "JD", "size": "md" } }

Prop	Type	Description
`src`	`string`	Image URL
`fallback`	`string`	Fallback text (initials)
`alt`	`string`	Alt text
`size`	`"sm"` \| `"md"` \| `"lg"`	Size

#Progress

Progress bar for completion tracking.

json

{ "type": "Progress", "props": { "value": 65, "label": "Upload progress" } }

Prop	Type	Description
`value`	`number`	Progress value (0–100)
`label`	`string`	Accessible label

#Skeleton

Loading placeholder.

json

{ "type": "Skeleton", "props": { "width": "200px", "height": "20px" } }

#Accordion

Collapsible sections for FAQ or grouped info.

json

{
  "type": "Accordion",
  "props": {
    "items": [
      { "title": "What is Dinachi?", "content": "An accessible UI library.", "value": "q1" },
      { "title": "How to install?", "content": "Run dinachi init.", "value": "q2" }
    ],
    "collapsible": true,
    "multiple": true
  }
}

Prop	Type	Description
`items`	`{ title, content, value, disabled? }[]`	Accordion items
`multiple`	`boolean`	Allow multiple open sections
`collapsible`	`boolean`	Allow closing all sections

#Collapsible

Single expandable section.

json

{ "type": "Collapsible", "props": { "triggerText": "Show details" }, "children": [...] }

Prop	Type	Description
`triggerText`	`string`	Toggle button text
`defaultOpen`	`boolean`	Start expanded

Hover tooltip for supplementary info.

json

{ "type": "Tooltip", "props": { "text": "Hover me", "content": "More details here" } }

Prop	Type	Description
`text`	`string`	Trigger text
`content`	`string`	Tooltip content
`side`	`"top"` \| `"right"` \| `"bottom"` \| `"left"`	Tooltip position
`align`	`"start"` \| `"center"` \| `"end"`	Alignment

#Overlay

#Dialog

Centered modal for focused tasks.

json

{
  "type": "Dialog",
  "props": {
    "title": "Edit Profile",
    "description": "Make changes to your profile.",
    "open": { "$bindState": "/ui/dialogOpen" }
  },
  "children": ["editForm"]
}

Prop	Type	Description
`title`	`string`	Dialog heading
`description`	`string`	Subtitle
`open`	bindable `boolean`	Open state

#Drawer

Slide-in side panel for longer content.

json

{
  "type": "Drawer",
  "props": {
    "title": "Filters",
    "side": "right",
    "open": { "$bindState": "/ui/drawerOpen" }
  },
  "children": ["filterForm"]
}

Prop	Type	Description
`title`	`string`	Drawer heading
`description`	`string`	Subtitle
`side`	`"top"` \| `"right"` \| `"bottom"` \| `"left"`	Slide direction (default `"right"`)
`open`	bindable `boolean`	Open state

Click-triggered floating panel.

json

{ "type": "Popover", "props": { "triggerText": "More info", "side": "bottom" }, "children": [...] }

Prop	Type	Description
`triggerText`	`string`	Trigger button text
`side`	`"top"` \| `"right"` \| `"bottom"` \| `"left"`	Position
`align`	`"start"` \| `"center"` \| `"end"`	Alignment

#AlertDialog

Confirmation dialog for destructive actions. Emits confirm and cancel.

json

{
  "type": "AlertDialog",
  "props": {
    "title": "Delete account?",
    "description": "This action cannot be undone.",
    "actionLabel": "Delete",
    "cancelLabel": "Cancel",
    "open": { "$bindState": "/ui/confirmOpen" }
  },
  "on": {
    "confirm": { "action": "showToast", "params": { "title": "Deleted", "variant": "error" } }
  }
}

Prop	Type	Description
`title`	`string`	Dialog heading
`description`	`string`	Explanation text
`actionLabel`	`string`	Confirm button text (default `"Continue"`)
`cancelLabel`	`string`	Cancel button text (default `"Cancel"`)
`open`	bindable `boolean`	Open state

Component Reference

#Layout

#Box

#Card

#Tabs

#ScrollArea

#Separator

#Form

#Input

#Textarea

#Checkbox

#Switch

#Radio

#Select

#Slider

#NumberField

#Toggle

#ToggleGroup

#Label

#Fieldset

#Button

#Display

#Text

#Badge

#Avatar

#Progress

#Skeleton

#Accordion

#Collapsible

#Tooltip

#Overlay

#Dialog

#Drawer

#Popover

#AlertDialog