Elements

Generative

Component vocabulary

Intrinsic components the model can emit through the present tool, rendered through the elements theme.

01

Layout

7 components
01

Card

A bordered container grouping related content. Optionally titled. Set asForm to collect named child control values on submit, and confirm/cancel to add a footer with action buttons.

Order summary
Two items ready for checkout.
Total
$48.00
{
  "$type": "Card",
  "title": "Order summary",
  "children": [
    {
      "$type": "Text",
      "value": "Two items ready for checkout.",
      "size": "sm",
      "color": "secondary"
    },
    {
      "$type": "Fact",
      "label": "Total",
      "value": "$48.00"
    }
  ]
}
titlestringOptional card title.
paddingnumberPadding in 4px units (e.g. 2 = 8px). 0 to 8 is the supported range.
backgroundstringBackground color or gradient (any CSS background value). Setting this also switches the card's own text to white, since a custom background makes the card a tinted surface; children can still opt into a different color explicitly.
asFormbooleanRender as a form; submitting it fires confirm.$action with every named child control's value, keyed by name.
confirmobjectConfirm button shown in the footer.
cancelobjectCancel button shown in the footer.
02

Row

A horizontal row; children laid out left to right.

In stockFree shippingShips today
{
  "$type": "Row",
  "gap": 2,
  "align": "center",
  "children": [
    {
      "$type": "Badge",
      "value": "In stock",
      "variant": "success"
    },
    {
      "$type": "Badge",
      "value": "Free shipping",
      "variant": "info"
    },
    {
      "$type": "Text",
      "value": "Ships today",
      "size": "sm",
      "color": "secondary"
    }
  ]
}
gapnumberGap between children in 4px units. 0 to 8 is the supported range.
alignenumstartcenterendCross-axis alignment.
justifyenumstartcenterendbetweenMain-axis distribution.
03

Col

A vertical stack; children laid out top to bottom.

Shipping address

142 Market StreetSan Francisco, CA 94105
{
  "$type": "Col",
  "gap": 2,
  "children": [
    {
      "$type": "Header",
      "text": "Shipping address",
      "size": "md"
    },
    {
      "$type": "Text",
      "value": "142 Market Street",
      "size": "sm"
    },
    {
      "$type": "Text",
      "value": "San Francisco, CA 94105",
      "size": "sm"
    }
  ]
}
gapnumberGap between children in 4px units. 0 to 8 is the supported range.
alignenumstartcenterendCross-axis alignment.
04

Box

A generic container for composition, e.g. a progress bar built from an outer track Box containing a partial-width fill Box. Size, radius, and background accept arbitrary values, so they render as inline styles rather than data-attribute hooks.

{
  "$type": "Box",
  "width": "100%",
  "height": 8,
  "radius": "full",
  "background": "rgba(59, 130, 246, 0.2)",
  "children": {
    "$type": "Box",
    "width": "62%",
    "height": 8,
    "radius": "full",
    "background": "#3b82f6"
  }
}
widthstring | numberWidth; a number is pixels.
heightstring | numberHeight; a number is pixels.
radiusenum | numberfullCorner radius; "full" is a pill/circle, a number is pixels.
backgroundstringBackground color or gradient (any CSS background value).
05

Spacer

Empty space that pushes neighbors apart.

Subtotal
$36.00
{
  "$type": "Row",
  "align": "center",
  "children": [
    {
      "$type": "Text",
      "value": "Subtotal",
      "size": "sm"
    },
    {
      "$type": "Spacer"
    },
    {
      "$type": "Text",
      "value": "$36.00",
      "weight": "medium"
    }
  ]
}
06

Divider

A horizontal rule between sections.

Account settings
Manage how we notify you about activity.
{
  "$type": "Col",
  "gap": 3,
  "children": [
    {
      "$type": "Text",
      "value": "Account settings",
      "weight": "medium"
    },
    {
      "$type": "Divider"
    },
    {
      "$type": "Text",
      "value": "Manage how we notify you about activity.",
      "size": "sm",
      "color": "secondary"
    }
  ]
}
flushbooleanWhether the divider spans the full width with no inset.
02

Typography

4 components
09

Text

A run of text. Use for paragraphs, labels, or inline copy.

Primary body copy at the default size.Emphasized supporting line.
{
  "$type": "Col",
  "gap": 2,
  "children": [
    {
      "$type": "Text",
      "value": "Primary body copy at the default size.",
      "size": "md",
      "weight": "normal"
    },
    {
      "$type": "Text",
      "value": "Emphasized supporting line.",
      "size": "sm",
      "weight": "semibold",
      "color": "secondary"
    }
  ]
}
value*stringThe text content.
sizeenumsmmdlgxl2xl3xlText size; defaults to md.
weightenumnormalmediumsemiboldboldFont weight.
colorenumemphasissecondaryalpha-70whitewhite-70white-50Foreground color token.
10

Caption

Secondary, de-emphasized text under a primary element.

Last updated 2 hours ago

{
  "$type": "Caption",
  "value": "Last updated 2 hours ago"
}
value*stringThe caption text.
11

Markdown

A markdown string. Rendered as-is by default; override this component for a full markdown renderer.

Refund approved. Your card ending in 4242 will be credited within 3 to 5 business days.

{
  "$type": "Markdown",
  "value": "**Refund approved.** Your card ending in 4242 will be credited within **3 to 5 business days**."
}
value*stringMarkdown source.
03

Data

4 components
12

Fact

A label/value pair, rendered as a key followed by its value. Use for compact metadata.

Status
Shipped
{
  "$type": "Fact",
  "label": "Status",
  "value": "Shipped"
}
label*stringThe fact label (key).
value*stringThe fact value.
13

Table

Tabular data. Provide columns and rows; each row is an array of cells matching the columns.

SymbolSharesPriceValue
ACME40$182.10$7,284.00
GLBX25$94.55$2,363.75
NORT15$310.20$4,653.00
{
  "$type": "Table",
  "columns": [
    {
      "label": "Symbol"
    },
    {
      "label": "Shares"
    },
    {
      "label": "Price"
    },
    {
      "label": "Value"
    }
  ],
  "rows": [
    [
      "ACME",
      40,
      "$182.10",
      "$7,284.00"
    ],
    [
      "GLBX",
      25,
      "$94.55",
      "$2,363.75"
    ],
    [
      "NORT",
      15,
      "$310.20",
      "$4,653.00"
    ]
  ]
}
columnsobject[]Column definitions.
rowsstring | number | boolean[][]Rows of cells.
14

Chart

A chart. variant selects bar, line, sparkline, or area rendering. Provide data for a single series, or series for multiple named series (series takes precedence over data when both are present). Set stacked to accumulate series values instead of overlaying them, and showAxis/showLegend to add y-axis ticks, x-axis point labels, and a legend.

100
75
50
25
0
W1
W2
W3
W4
EmailChatPhone
{
  "$type": "Chart",
  "variant": "bar",
  "stacked": true,
  "showAxis": true,
  "showLegend": true,
  "series": [
    {
      "label": "Email",
      "data": [
        {
          "label": "W1",
          "value": 42
        },
        {
          "label": "W2",
          "value": 38
        },
        {
          "label": "W3",
          "value": 51
        },
        {
          "label": "W4",
          "value": 35
        }
      ]
    },
    {
      "label": "Chat",
      "data": [
        {
          "label": "W1",
          "value": 28
        },
        {
          "label": "W2",
          "value": 33
        },
        {
          "label": "W3",
          "value": 25
        },
        {
          "label": "W4",
          "value": 40
        }
      ]
    },
    {
      "label": "Phone",
      "data": [
        {
          "label": "W1",
          "value": 12
        },
        {
          "label": "W2",
          "value": 9
        },
        {
          "label": "W3",
          "value": 15
        },
        {
          "label": "W4",
          "value": 11
        }
      ]
    }
  ]
}
variant*enumbarlinesparklineareaChart variant.
dataobject[]Data points for a single series.
seriesobject[]Multiple named series; takes precedence over data when present.
stackedbooleanAccumulate series values instead of overlaying them (bar and area variants; ignored for line and sparkline).
showAxisbooleanShow y-axis ticks and x-axis point labels.
showLegendbooleanShow a legend mapping each series to its color.
colorstringSeries color (single-series mode only). One of emphasis, secondary, alpha-70, white, white-70, or white-50, matching Text's color tokens; other values have no visual effect.
15

Badge

A small labeled tag, e.g. for status or category.

DefaultSecondaryInfoSuccessWarning
{
  "$type": "Row",
  "gap": 2,
  "children": [
    {
      "$type": "Badge",
      "value": "Default"
    },
    {
      "$type": "Badge",
      "value": "Secondary",
      "variant": "secondary"
    },
    {
      "$type": "Badge",
      "value": "Info",
      "variant": "info"
    },
    {
      "$type": "Badge",
      "value": "Success",
      "variant": "success"
    },
    {
      "$type": "Badge",
      "value": "Warning",
      "variant": "warning"
    }
  ]
}
value*stringBadge text.
variantstringVisual variant token.
04

Media

2 components
16

Image

An image. Provide src and alt for accessibility.

Bright loft living room with large windows and a sofa
{
  "$type": "Image",
  "src": "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=640&q=80",
  "alt": "Bright loft living room with large windows and a sofa",
  "size": "md"
}
src*stringImage URL.
alt*stringAlt text for accessibility.
sizeenum | numbersmmdlgSize token or pixel value.
roundbooleanRender as a circular avatar (fully rounded, cropped to a square).
17

Icon

A small line icon from the built-in set. size controls the rendered pixel size.

{
  "$type": "Row",
  "gap": 4,
  "align": "center",
  "children": [
    {
      "$type": "Icon",
      "name": "sun",
      "size": "md"
    },
    {
      "$type": "Icon",
      "name": "plane",
      "size": "md"
    },
    {
      "$type": "Icon",
      "name": "map-pin",
      "size": "md"
    },
    {
      "$type": "Icon",
      "name": "credit-card",
      "size": "md"
    },
    {
      "$type": "Icon",
      "name": "bell",
      "size": "md"
    }
  ]
}
name*enumsunmooncloudrainsnowwindplaypausecheckxstarheartarrow-rightarrow-up-rightchevron-rightcalendarclockmap-pinplanetruckcredit-cardusersearchbellWhich built-in icon to render.
sizeenumsmmdlgIcon size; defaults to md (16px).

Built-in icon set

sun
moon
cloud
rain
snow
wind
play
pause
check
x
star
heart
arrow-right
arrow-up-right
chevron-right
calendar
clock
map-pin
plane
truck
credit-card
user
search
bell
05

Controls

7 components
18

Button

A clickable button. Carries $action describing the side effect or resume value. Set submit to submit an ancestor Form/Card instead of firing $action on click.

{
  "$type": "Row",
  "gap": 2,
  "children": [
    {
      "$type": "Button",
      "label": "Add to cart",
      "buttonStyle": "primary",
      "$action": {
        "type": "add_to_cart",
        "sku": "headphone-pro-1"
      }
    },
    {
      "$type": "Button",
      "label": "Save",
      "buttonStyle": "secondary",
      "$action": {
        "type": "save_item",
        "sku": "headphone-pro-1"
      }
    },
    {
      "$type": "Button",
      "label": "Details",
      "buttonStyle": "outline",
      "$action": {
        "type": "view_details",
        "sku": "headphone-pro-1"
      }
    },
    {
      "$type": "Button",
      "label": "Share",
      "buttonStyle": "ghost",
      "$action": {
        "type": "share_item",
        "sku": "headphone-pro-1"
      }
    },
    {
      "$type": "Button",
      "label": "Remove",
      "buttonStyle": "danger",
      "$action": {
        "type": "remove_item",
        "sku": "headphone-pro-1"
      }
    }
  ]
}
label*stringButton label.
buttonStyleenumprimarysecondaryoutlineghostdangerVisual style.
blockbooleanWhether the button spans the full width.
submitbooleanRender as a submit button for an ancestor Form/Card instead of a click button.
19

Select

A dropdown selector. Carries $action describing the on-select behavior.

{
  "$type": "Select",
  "name": "partySize",
  "label": "Party size",
  "placeholder": "Select party size",
  "options": [
    {
      "label": "1 guest",
      "value": "1"
    },
    {
      "label": "2 guests",
      "value": "2"
    },
    {
      "label": "3 guests",
      "value": "3"
    },
    {
      "label": "4+ guests",
      "value": "4"
    }
  ],
  "$action": {
    "type": "set_party_size"
  }
}
options*object[]Selectable options.
placeholderstringPlaceholder shown when nothing is selected.
labelstringAccessible label for the control.
namestringField name used inside a Form.
20

Input

A text input. Carries $action describing the on-submit behavior.

{
  "$type": "Input",
  "name": "email",
  "label": "Email",
  "placeholder": "[email protected]",
  "$action": {
    "type": "submit_email"
  }
}
placeholderstringPlaceholder text.
multilinebooleanRender a textarea instead of a single-line input.
labelstringAccessible label for the control.
namestringField name used inside a Form.
21

DatePicker

A date input. Carries $action describing the on-select behavior.

{
  "$type": "DatePicker",
  "name": "checkIn",
  "label": "Check-in date",
  "value": "2026-07-15",
  "min": "2026-07-01",
  "max": "2026-12-31",
  "$action": {
    "type": "set_check_in"
  }
}
valuestringInitial date (YYYY-MM-DD).
minstringMinimum date (YYYY-MM-DD).
maxstringMaximum date (YYYY-MM-DD).
labelstringAccessible label for the control.
namestringField name used inside a Form.
22

Checkbox

A checkbox with a label. Carries $action describing the on-change behavior.

{
  "$type": "Checkbox",
  "name": "reminder",
  "label": "Send a reminder 1 hour before",
  "defaultChecked": true,
  "$action": {
    "type": "toggle_reminder"
  }
}
label*stringLabel text next to the checkbox.
namestringField name used inside a Form.
defaultCheckedbooleanWhether the checkbox starts checked.
23

RadioGroup

A group of mutually exclusive radio options. Carries $action describing the on-change behavior.

{
  "$type": "RadioGroup",
  "name": "seating",
  "label": "Seating preference",
  "defaultValue": "indoor",
  "options": [
    {
      "label": "Indoor",
      "value": "indoor"
    },
    {
      "label": "Patio",
      "value": "patio"
    },
    {
      "label": "Bar",
      "value": "bar"
    }
  ],
  "$action": {
    "type": "set_seating"
  }
}
options*object[]Selectable options.
namestringField name used inside a Form.
labelstringAccessible name for the group.
defaultValuestringInitially selected value.
24

Form

Wraps named child controls (Select/Input/Checkbox/RadioGroup/DatePicker with a name). Carries $action; on submit it fires with every named control's value, keyed by name.

{
  "$type": "Form",
  "gap": 3,
  "$action": {
    "type": "submit_newsletter"
  },
  "children": [
    {
      "$type": "Input",
      "name": "name",
      "label": "Name",
      "placeholder": "Full name"
    },
    {
      "$type": "Input",
      "name": "email",
      "label": "Email",
      "placeholder": "[email protected]"
    },
    {
      "$type": "Button",
      "label": "Subscribe",
      "buttonStyle": "primary",
      "submit": true
    }
  ]
}
gapnumberGap between children in 4px units. 0 to 8 is the supported range.
06

Lists

2 components
25

ListView

A vertical list container. Wrap ListViewItem children as rows.

  • Over-ear headphones on a desk
    Morning Light

    Aria Sol

    3:42
  • Vinyl records stacked on a shelf
    City After Rain

    Northline

    4:18
  • Singer performing under stage lights
    Quiet Hours

    Lumen

    2:55
{
  "$type": "ListView",
  "children": [
    {
      "$type": "ListViewItem",
      "$action": {
        "type": "play_track",
        "trackId": "t1"
      },
      "children": {
        "$type": "Row",
        "align": "center",
        "gap": 3,
        "children": [
          {
            "$type": "Image",
            "src": "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=640&q=80",
            "alt": "Over-ear headphones on a desk",
            "size": "sm",
            "round": true
          },
          {
            "$type": "Col",
            "gap": 0,
            "children": [
              {
                "$type": "Text",
                "value": "Morning Light",
                "weight": "medium"
              },
              {
                "$type": "Caption",
                "value": "Aria Sol"
              }
            ]
          },
          {
            "$type": "Spacer"
          },
          {
            "$type": "Text",
            "value": "3:42",
            "size": "sm",
            "color": "secondary"
          }
        ]
      }
    },
    {
      "$type": "ListViewItem",
      "$action": {
        "type": "play_track",
        "trackId": "t2"
      },
      "children": {
        "$type": "Row",
        "align": "center",
        "gap": 3,
        "children": [
          {
            "$type": "Image",
            "src": "https://images.unsplash.com/photo-1471478331149-c72f17e33c73?w=640&q=80",
            "alt": "Vinyl records stacked on a shelf",
            "size": "sm",
            "round": true
          },
          {
            "$type": "Col",
            "gap": 0,
            "children": [
              {
                "$type": "Text",
                "value": "City After Rain",
                "weight": "medium"
              },
              {
                "$type": "Caption",
                "value": "Northline"
              }
            ]
          },
          {
            "$type": "Spacer"
          },
          {
            "$type": "Text",
            "value": "4:18",
            "size": "sm",
            "color": "secondary"
          }
        ]
      }
    },
    {
      "$type": "ListViewItem",
      "$action": {
        "type": "play_track",
        "trackId": "t3"
      },
      "children": {
        "$type": "Row",
        "align": "center",
        "gap": 3,
        "children": [
          {
            "$type": "Image",
            "src": "https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=640&q=80",
            "alt": "Singer performing under stage lights",
            "size": "sm",
            "round": true
          },
          {
            "$type": "Col",
            "gap": 0,
            "children": [
              {
                "$type": "Text",
                "value": "Quiet Hours",
                "weight": "medium"
              },
              {
                "$type": "Caption",
                "value": "Lumen"
              }
            ]
          },
          {
            "$type": "Spacer"
          },
          {
            "$type": "Text",
            "value": "2:55",
            "size": "sm",
            "color": "secondary"
          }
        ]
      }
    }
  ]
}
26

ListViewItem

A row inside a ListView. Carries $action to make the whole row clickable and keyboard-activatable.

  • Out for delivery

    Estimated 2:00 to 4:00 PM

    In progress
    • {
  "$type": "ListViewItem",
  "$action": {
    "type": "view_order_event",
    "eventId": "transit"
  },
  "children": {
    "$type": "Row",
    "justify": "between",
    "align": "center",
    "children": [
      {
        "$type": "Col",
        "gap": 1,
        "children": [
          {
            "$type": "Text",
            "value": "Out for delivery",
            "weight": "medium"
          },
          {
            "$type": "Caption",
            "value": "Estimated 2:00 to 4:00 PM"
          }
        ]
      },
      {
        "$type": "Badge",
        "value": "In progress",
        "variant": "info"
      }
    ]
  }
}
    07

    Feedback

    1 components
    27

    Alert

    A highlighted message conveying urgency. tone drives the severity.

    Payment received

    Invoice #1842 was paid in full on July 12.

    Card expiring soon

    Update the card on file before July 31 to avoid failed charges.

    {
  "$type": "Col",
  "gap": 3,
  "children": [
    {
      "$type": "Alert",
      "tone": "info",
      "title": "Payment received",
      "description": "Invoice #1842 was paid in full on July 12."
    },
    {
      "$type": "Alert",
      "tone": "warning",
      "title": "Card expiring soon",
      "description": "Update the card on file before July 31 to avoid failed charges."
    }
  ]
}
    titlestringAlert title.
    descriptionstringSupporting description text.
    toneenuminfosuccesswarningdangerSeverity tone; defaults to info.