Render Components

Catalog view of each component definition used by the renderer.

AlertDialog

AlertDialog component for layout. Bind on.open for handler

Slots: default | Events: none

{
  "title": "Alert Dialog Title",
  "description": "Alert Dialog Description",
  "openPath": "/dialogOpen",
  "triggerButtonProps": {
    "label": "Open dialog",
    "variant": "soft"
  },
  "actionButtonProps": {
    "label": "Confirm"
  },
  "cancelButtonProps": {
    "label": "Cancel",
    "variant": "soft",
    "color": "gray"
  }
}

AspectRatio

AspectRatio component for layout. Bind on.ratio for handler

Slots: default | Events: none

{
  "ratio": 1.7777777777777777
}

Avatar

Avatar component for layout. Bind on.src for handler

Slots: default | Events: none

{
  "src": "https://github.com/shadcn.png",
  "size": "1",
  "variant": "soft",
  "color": "gray",
  "highContrast": false,
  "radius": "full",
  "fallback": "User"
}

Badge

Badge component for layout. Bind on.variant for handler

Slots: default | Events: none

{
  "variant": "soft",
  "size": "1"
}

Blockquote

Blockquote component for layout. Bind on.size for handler

Slots: default | Events: none

{
  "size": "1"
}

Box

Box component for layout. Bind on.as for handler

Slots: default | Events: none

{
  "as": "div"
}

Button

Clickable button. Bind on.press for handler.

Slots: none | Events: press

{
  "label": "Submit"
}

Callout

Callout component for layout. Bind on.variant for handler

Slots: default | Events: none

{
  "variant": "soft"
}

Card

Card component for layout. Bind on.variant for handler

Slots: default | Events: none

{
  "variant": "surface",
  "size": "1"
}

Checkbox

Checkbox component for layout. Bind on.checked for handler

Slots: default | Events: none

{
  "label": "Checkbox",
  "name": "checkbox",
  "checked": false,
  "checks": [],
  "validateOn": "change"
}

CheckboxCards

CheckboxCards composed from Root and Item. Use items for selectable cards.

Slots: default | Events: none

{
  "name": "stack",
  "columns": "3",
  "items": [
    {
      "value": "starter",
      "label": "Starter"
    },
    {
      "value": "pro",
      "label": "Pro"
    },
    {
      "value": "enterprise",
      "label": "Enterprise",
      "disabled": true
    }
  ],
  "size": "2",
  "variant": "surface"
}

CheckboxGroup

CheckboxGroup composed from Root and Item. Use items for options.

Slots: default | Events: none

{
  "name": "features",
  "items": [
    {
      "value": "analytics",
      "label": "Analytics"
    },
    {
      "value": "alerts",
      "label": "Alerts"
    }
  ],
  "size": "2",
  "variant": "surface"
}

Code

Code component for layout. Bind on.size for handler

Slots: default | Events: none

{}

Container

Container component for layout. Bind on.size for handler

Slots: default | Events: none

{
  "size": "3"
}

ContextMenu

ContextMenu composed from Trigger, Content, and Item. Use items to define menu entries.

Slots: default | Events: none

{
  "triggerLabel": "Right click options",
  "content": [
    {
      "type": "label",
      "label": "Actions"
    },
    {
      "type": "item",
      "item": {
        "label": "Edit",
        "value": "edit"
      }
    },
    {
      "type": "item",
      "item": {
        "label": "Duplicate",
        "value": "duplicate"
      }
    },
    {
      "type": "separator"
    },
    {
      "type": "sub",
      "label": "More",
      "children": [
        {
          "type": "item",
          "item": {
            "label": "Rename",
            "value": "rename"
          }
        },
        {
          "type": "item",
          "item": {
            "label": "Delete",
            "value": "delete",
            "color": "red"
          }
        }
      ]
    }
  ],
  "size": "2",
  "variant": "soft"
}

DataList

DataList key-value metadata pairs.

Slots: default | Events: none

{
  "orientation": "horizontal",
  "size": "2",
  "items": [
    {
      "label": "Status",
      "value": "Active"
    },
    {
      "label": "Plan",
      "value": "Pro",
      "labelColor": "indigo"
    }
  ]
}

Dialog

Dialog component with state-bound open control via openPath.

Slots: default | Events: none

{
  "title": "Edit profile",
  "description": "Update your account details.",
  "openPath": "/dialogOpen",
  "triggerButtonProps": {
    "label": "Open dialog",
    "variant": "soft"
  },
  "closeButtonProps": {
    "label": "Done"
  }
}

DropdownMenu

DropdownMenu composed from Trigger, Content, and menu nodes (item/group/sub/radio/checkbox).

Slots: default | Events: none

{
  "triggerLabel": "Open actions",
  "showTriggerIcon": true,
  "content": [
    {
      "type": "item",
      "item": {
        "label": "Edit",
        "value": "edit"
      }
    },
    {
      "type": "item",
      "item": {
        "label": "Share",
        "value": "share"
      }
    },
    {
      "type": "separator"
    },
    {
      "type": "radioGroup",
      "value": "comfortable",
      "items": [
        {
          "label": "Compact",
          "value": "compact"
        },
        {
          "label": "Comfortable",
          "value": "comfortable"
        }
      ]
    }
  ],
  "size": "2",
  "variant": "soft"
}

Em

Em component for layout. Bind on.size for handler

Slots: default | Events: none

{}

Flex

Flex component for layout. Bind on.direction for handler

Slots: default | Events: none

{
  "direction": "row"
}

Grid

Grid component for layout. Bind on.columns for handler

Slots: default | Events: none

{
  "columns": "3"
}

Heading

Heading component for layout. Bind on.size for handler

Slots: default | Events: none

{}

HoverCard

HoverCard with trigger and content.

Slots: default | Events: none

{
  "triggerLabel": "@shadcn",
  "title": "shadcn",
  "description": "Design engineer building modern interfaces.",
  "width": "320px"
}

Icon

Icon component that renders an SVG source.

Slots: none | Events: none

{
  "size": "3"
}

IconButton

Clickable button. Bind on.press for handler.

Slots: none | Events: press

{
  "label": "Search"
}

Inset

Inset layout primitive for edge-clipped content.

Slots: default | Events: none

{
  "clip": "padding-box"
}

Kbd

Kbd component for layout. Bind on.size for handler

Slots: default | Events: none

{}

Link

Link component for layout. Bind on.size for handler

Slots: default | Events: none

{}

Popover

Popover with trigger, content, and optional close button.

Slots: default | Events: none

{
  "title": "Quick actions",
  "description": "Popover content can include text and children.",
  "triggerButtonProps": {
    "label": "Open popover",
    "variant": "soft"
  },
  "closeButtonProps": {
    "label": "Done"
  }
}

Progress

Progress component for layout. Bind on.variant for handler

Slots: none | Events: none

{
  "value": 50,
  "min": 0,
  "max": 100,
  "step": 1,
  "size": "2",
  "variant": "surface",
  "color": "blue",
  "highContrast": true,
  "radius": "full",
  "duration": 1000
}

Quote

Quote component for layout. Bind on.size for handler

Slots: default | Events: none

{}

Radio

Single Radio control.

Slots: default | Events: none

{
  "value": "option-a",
  "size": "2",
  "color": "indigo"
}

RadioCards

RadioCards composed from Root and Item.

Slots: default | Events: none

{
  "name": "plan",
  "value": "pro",
  "columns": "3",
  "items": [
    {
      "value": "starter",
      "label": "Starter"
    },
    {
      "value": "pro",
      "label": "Pro"
    },
    {
      "value": "enterprise",
      "label": "Enterprise",
      "disabled": true
    }
  ],
  "size": "2",
  "variant": "surface"
}

RadioGroup

RadioGroup composed from Root and Item.

Slots: default | Events: none

{
  "name": "density",
  "value": "comfortable",
  "items": [
    {
      "value": "compact",
      "label": "Compact"
    },
    {
      "value": "comfortable",
      "label": "Comfortable"
    }
  ],
  "size": "2",
  "color": "indigo"
}

Section

Section component for layout. Bind on.as for handler

Slots: default | Events: none

{}

SegmentedControl

No description provided.

Slots: default | Events: none

{}

Select

Select composed from Root, Trigger, Content, Group, and Item.

Slots: default | Events: none

{
  "placeholder": "Pick an option",
  "size": "2",
  "groups": [
    {
      "label": "Plan",
      "items": [
        {
          "value": "starter",
          "label": "Starter"
        },
        {
          "value": "pro",
          "label": "Pro"
        }
      ]
    }
  ]
}

Separator

No description provided.

Slots: default | Events: none

{}

Shader

Render any @paper-design/shaders-react export by componentName. Use top-level common shader props and pass component-specific params in props.

Slots: none | Events: none

{
  "componentName": "MeshGradient",
  "speed": 0.4,
  "style": {
    "width": 480,
    "height": 320
  },
  "props": {
    "colors": [
      "#5100ff",
      "#00ff80",
      "#ffcc00",
      "#ea00ff"
    ],
    "distortion": 1,
    "swirl": 0.8
  }
}

Skeleton

Skeleton component for layout. Bind on.variant for handler

Slots: default | Events: none

{
  "loading": true,
  "width": "100%",
  "height": "100px"
}

Slider

No description provided.

Slots: default | Events: none

{}

Spinner

Spinner component for loading state.

Slots: default | Events: none

{
  "size": "2"
}

Strong

Strong component for layout. Bind on.size for handler

Slots: default | Events: none

{}

Switch

No description provided.

Slots: default | Events: none

{}

Table

Composed table with optional headerRows and rows using Radix Themes props.

Slots: default | Events: none

{
  "size": "2",
  "variant": "ghost",
  "layout": "auto",
  "headerRows": [
    {
      "cells": [
        {
          "type": "columnHeader",
          "content": "Name"
        },
        {
          "type": "columnHeader",
          "content": "Role",
          "justify": "end"
        }
      ]
    }
  ],
  "rows": [
    {
      "cells": [
        {
          "type": "rowHeader",
          "content": "Ada"
        },
        {
          "content": "Admin"
        }
      ]
    }
  ]
}

TabNav

TabNav composed from Root and Link.

Slots: default | Events: none

{
  "size": "2",
  "color": "indigo",
  "links": [
    {
      "label": "Overview",
      "href": "#overview",
      "active": true
    },
    {
      "label": "Activity",
      "href": "#activity"
    }
  ]
}

Tabs

Tabs composed from Root, List, Trigger, and Content.

Slots: default | Events: change

{
  "defaultValue": "overview",
  "size": "2",
  "tabs": [
    {
      "value": "overview",
      "label": "Overview",
      "content": "Overview content"
    },
    {
      "value": "activity",
      "label": "Activity",
      "content": "Activity content"
    }
  ]
}

Text

Text component for layout. Bind on.size for handler

Slots: default | Events: none

{}

TextArea

No description provided.

Slots: default | Events: none

{}

TextField

TextField root with zero or many slots composed via slots[].

Slots: default | Events: none

{
  "variant": "surface",
  "size": "2",
  "placeholder": "Search...",
  "slots": [
    {
      "side": "left",
      "content": "@"
    },
    {
      "side": "right",
      "content": ".com"
    }
  ]
}

Tooltip

Single Tooltip component (merged Root/Portal/Content props) with content and trigger children.

Slots: default | Events: none

{
  "content": "Copied!",
  "maxWidth": "360px",
  "delayDuration": 300
}