{
"globalProps": {
"$schema": "https://playbook.powerapp.cloud/schemas/global-props-schema.json",
"name": "GlobalProps",
"description": "Global props available on all Playbook components for consistent spacing, layout, and styling.",
"breakpoints": {
"xs": "0-575px",
"sm": "576px-767px",
"md": "768px-991px",
"lg": "992px-1199px",
"xl": "1200px+"
},
"spacing": {
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"description": "Standard spacing scale for margin/padding.",
"tokens": {
"xxs": "4px",
"xs": "8px",
"sm": "16px",
"md": "24px",
"lg": "32px",
"xl": "40px",
"none": "0"
}
},
"props": {
"alignContent": {
"type": "enum | responsive",
"values": [
"start",
"end",
"center",
"spaceBetween",
"spaceAround",
"spaceEvenly"
],
"responsive": true,
"description": "Align multi-line content.",
"example": "alignContent=\"start\" or alignContent={{ default: \"start\", md: \"end\" }}"
},
"alignItems": {
"type": "enum | responsive",
"values": [
"start",
"end",
"center"
],
"responsive": true,
"description": "Align items.",
"example": "alignItems=\"start\" or alignItems={{ default: \"start\", md: \"end\" }}"
},
"borderRadius": {
"type": "enum",
"values": [
"none",
"xs",
"sm",
"md",
"lg",
"xl",
"rounded"
],
"description": "Border radius."
},
"cursor": {
"type": "enum",
"values": [
"auto",
"default",
"none",
"contextMenu",
"help",
"pointer",
"progress",
"wait",
"cell"
],
"description": "CSS cursor."
},
"dark": {
"type": "boolean",
"description": "Dark.",
"default": false
},
"flex": {
"type": "enum | responsive",
"values": [
"auto",
"initial",
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"none"
],
"responsive": true,
"description": "Flex.",
"example": "flex=\"auto\" or flex={{ default: \"auto\", md: \"initial\" }}"
},
"flexDirection": {
"type": "enum | responsive",
"values": [
"row",
"column",
"rowReverse",
"columnReverse"
],
"responsive": true,
"description": "Flex direction.",
"example": "flexDirection=\"row\" or flexDirection={{ default: \"row\", md: \"column\" }}"
},
"flexWrap": {
"type": "enum | responsive",
"values": [
"wrap",
"nowrap",
"wrapReverse"
],
"responsive": true,
"description": "Flex wrap.",
"example": "flexWrap=\"wrap\" or flexWrap={{ default: \"wrap\", md: \"nowrap\" }}"
},
"justifyContent": {
"type": "enum | responsive",
"values": [
"start",
"end",
"center",
"spaceBetween",
"spaceAround",
"spaceEvenly"
],
"responsive": true,
"description": "Justify multi-line content.",
"example": "justifyContent=\"start\" or justifyContent={{ default: \"start\", md: \"end\" }}"
},
"lineHeight": {
"type": "enum",
"values": [
"loosest",
"looser",
"loose",
"normal",
"tight",
"tighter",
"tightest"
],
"description": "Line height."
},
"marginRight": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Right margin.",
"example": "marginRight=\"none\" or marginRight={{ default: \"none\", md: \"xxs\" }}"
},
"marginLeft": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Left margin.",
"example": "marginLeft=\"none\" or marginLeft={{ default: \"none\", md: \"xxs\" }}"
},
"marginTop": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Top margin.",
"example": "marginTop=\"none\" or marginTop={{ default: \"none\", md: \"xxs\" }}"
},
"marginBottom": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Bottom margin.",
"example": "marginBottom=\"none\" or marginBottom={{ default: \"none\", md: \"xxs\" }}"
},
"marginX": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Horizontal margin (left + right).",
"example": "marginX=\"none\" or marginX={{ default: \"none\", md: \"xxs\" }}"
},
"marginY": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Vertical margin (top + bottom).",
"example": "marginY=\"none\" or marginY={{ default: \"none\", md: \"xxs\" }}"
},
"margin": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Margin on all sides.",
"example": "margin=\"none\" or margin={{ default: \"none\", md: \"xxs\" }}"
},
"width": {
"type": "string",
"description": "CSS width."
},
"minWidth": {
"type": "string",
"description": "Minimum width."
},
"maxWidth": {
"type": "string",
"description": "Maximum width."
},
"gap": {
"type": "string | responsive",
"responsive": true,
"description": "Gap.",
"example": "gap=\"md\" or gap={{ default: \"md\", md: \"lg\" }}"
},
"columnGap": {
"type": "string | responsive",
"responsive": true,
"description": "Column gap.",
"example": "columnGap=\"md\" or columnGap={{ default: \"md\", md: \"lg\" }}"
},
"rowGap": {
"type": "string | responsive",
"responsive": true,
"description": "Row gap.",
"example": "rowGap=\"md\" or rowGap={{ default: \"md\", md: \"lg\" }}"
},
"numberSpacing": {
"type": "enum",
"values": [
"tabular"
],
"description": "Number spacing."
},
"order": {
"type": "enum | responsive",
"values": [
"none",
"first",
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12
],
"responsive": true,
"description": "Order.",
"example": "order=\"none\" or order={{ default: \"none\", md: \"first\" }}"
},
"overflowX": {
"type": "enum",
"values": [
"scroll",
"visible",
"hidden",
"auto"
],
"description": "Horizontal overflow (left + right)."
},
"overflowY": {
"type": "enum",
"values": [
"scroll",
"visible",
"hidden",
"auto"
],
"description": "Vertical overflow (top + bottom)."
},
"overflow": {
"type": "enum",
"values": [
"scroll",
"visible",
"hidden",
"auto"
],
"description": "CSS overflow."
},
"paddingRight": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Right padding.",
"example": "paddingRight=\"none\" or paddingRight={{ default: \"none\", md: \"xxs\" }}"
},
"paddingLeft": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Left padding.",
"example": "paddingLeft=\"none\" or paddingLeft={{ default: \"none\", md: \"xxs\" }}"
},
"paddingTop": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Top padding.",
"example": "paddingTop=\"none\" or paddingTop={{ default: \"none\", md: \"xxs\" }}"
},
"paddingBottom": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Bottom padding.",
"example": "paddingBottom=\"none\" or paddingBottom={{ default: \"none\", md: \"xxs\" }}"
},
"paddingX": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Horizontal padding (left + right).",
"example": "paddingX=\"none\" or paddingX={{ default: \"none\", md: \"xxs\" }}"
},
"paddingY": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Vertical padding (top + bottom).",
"example": "paddingY=\"none\" or paddingY={{ default: \"none\", md: \"xxs\" }}"
},
"padding": {
"type": "enum | responsive",
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"auto",
"initial",
"inherit"
],
"responsive": true,
"description": "Padding on all sides.",
"example": "padding=\"none\" or padding={{ default: \"none\", md: \"xxs\" }}"
},
"position": {
"type": "enum",
"values": [
"relative",
"absolute",
"fixed",
"sticky",
"static"
],
"description": "CSS position."
},
"shadow": {
"type": "enum",
"values": [
"none",
"deep",
"deeper",
"deepest"
],
"description": "Shadow."
},
"textAlign": {
"type": "enum | responsive",
"values": [
"start",
"end",
"left",
"right",
"center",
"justify",
"justifyAll",
"matchParent"
],
"responsive": true,
"description": "Text align.",
"example": "textAlign=\"start\" or textAlign={{ default: \"start\", md: \"end\" }}"
},
"truncate": {
"type": "enum",
"values": [
"none",
1,
2,
3,
4,
5
],
"description": "Truncate."
},
"verticalAlign": {
"type": "enum | responsive",
"values": [
"baseline",
"super",
"top",
"middle",
"bottom",
"sub",
"text-top",
"text-bottom"
],
"responsive": true,
"description": "Vertical align.",
"example": "verticalAlign=\"baseline\" or verticalAlign={{ default: \"baseline\", md: \"super\" }}"
},
"zIndex": {
"type": "enum | responsive",
"values": [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
"max"
],
"responsive": true,
"description": "Z index.",
"example": "zIndex=\"1\" or zIndex={{ default: \"1\", md: \"2\" }}"
},
"top": {
"type": "enum | object",
"values": [
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl"
],
"description": "Top offset."
},
"inset": {
"type": "boolean",
"description": "Inset.",
"default": false
},
"right": {
"type": "enum | object",
"values": [
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl"
],
"description": "Right offset."
},
"bottom": {
"type": "enum | object",
"values": [
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl"
],
"description": "Bottom offset."
},
"left": {
"type": "enum | object",
"values": [
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl"
],
"description": "Left offset."
},
"height": {
"type": "string",
"description": "CSS height."
},
"maxHeight": {
"type": "string",
"description": "Maximum height."
},
"minHeight": {
"type": "string",
"description": "Minimum height."
},
"hover": {
"type": "object",
"properties": {
"shadow": {
"type": "enum",
"values": [
"none",
"deep",
"deeper",
"deepest"
]
},
"background": {
"type": "string"
},
"color": {
"type": "string"
},
"scale": {
"type": "enum",
"values": [
"sm",
"md",
"lg"
]
},
"underline": {
"type": "boolean"
},
"visible": {
"type": "boolean"
}
},
"description": "Hover.",
"example": "hover={{ shadow: \"deep\", scale: \"sm\" }}"
},
"groupHover": {
"type": "boolean",
"default": false,
"description": "Group hover."
}
},
"responsiveUsage": {
"description": "Props marked responsive accept breakpoint objects.",
"example": {
"padding": "{{ default: \"sm\", md: \"lg\" }}",
"display": "{{ default: \"block\", md: \"flex\" }}"
},
"breakpoints": {
"default": "Base (mobile-first)",
"xs": "0-575px",
"sm": "576px-767px",
"md": "768px-991px",
"lg": "992px-1199px",
"xl": "1200px+"
}
},
"warnings": {
"domSafeProps": {
"description": "Use domSafeProps() to filter non-DOM props when spreading.",
"nonSafeProps": [
"marginRight",
"marginLeft",
"marginTop",
"marginBottom",
"marginX",
"marginY",
"margin",
"paddingRight",
"paddingLeft",
"paddingTop",
"paddingBottom",
"paddingX",
"paddingY",
"padding",
"dark",
"enableDrag",
"requiredIndicator"
]
}
}
},
"kits": {
"advanced_table": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "AdvancedTable",
"description": "AdvancedTable component",
"platforms": [
"react",
"rails"
],
"props": {
"actions": {
"type": "React.ReactNode[] | React.ReactNode",
"platforms": [
"react",
"rails"
]
},
"cascadeCollapse": {
"type": "boolean",
"platforms": [
"react"
]
},
"columnDefinitions": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"columnGroupBorderColor": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"text_lt_default",
"text_lt_light",
"text_lt_lighter",
"text_dk_default",
"text_dk_light",
"text_dk_lighter"
],
"default": "none"
},
"columnVisibilityControl": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"customSort": {
"type": "boolean",
"platforms": [
"react"
]
},
"enableToggleExpansion": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"all",
"header",
"none"
],
"default": "header"
},
"enableSortingRemoval": {
"type": "boolean",
"platforms": [
"react"
]
},
"expandedControl": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"expandByDepth": {
"type": "array",
"platforms": [
"react"
]
},
"onExpandByDepthClick": {
"type": "function",
"platforms": [
"react"
]
},
"initialLoadingRowsCount": {
"type": "number",
"platforms": [
"react"
]
},
"inlineRowLoading": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"loading": {
"type": "boolean | string",
"platforms": [
"react",
"rails"
],
"default": false
},
"maxHeight": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"auto",
"xs",
"sm",
"md",
"lg",
"xl",
"xxl",
"xxxl"
]
},
"onRowToggleClick": {
"type": "function",
"platforms": [
"react"
]
},
"onToggleExpansionClick": {
"type": "function",
"platforms": [
"react"
]
},
"pagination": {
"type": "boolean",
"platforms": [
"react"
]
},
"paginationProps": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"pinnedRows": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"responsive": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"scroll",
"none"
],
"default": "scroll"
},
"rowStyling": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"scrollBarNone": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"selectableRows": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showActionsBar": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"persistToggleExpansionButton": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"sortControl": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"sortParentOnly": {
"type": "boolean",
"platforms": [
"react"
]
},
"stickyLeftColumn": {
"type": "array",
"platforms": [
"react"
]
},
"tableData": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"tableOptions": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"tableProps": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"toggleExpansionIcon": {
"type": "string | string[]",
"platforms": [
"react"
]
},
"onRowSelectionChange": {
"type": "function",
"platforms": [
"react"
]
},
"onCustomSortClick": {
"type": "function",
"platforms": [
"react"
]
},
"virtualizedRows": {
"type": "boolean",
"platforms": [
"react"
]
},
"allowFullScreen": {
"type": "boolean",
"platforms": [
"react"
]
},
"fullScreenControl": {
"type": "function",
"platforms": [
"react"
]
},
"enableSorting": {
"type": "boolean",
"platforms": [
"react"
]
},
"sortIcon": {
"type": "string | string[]",
"platforms": [
"react"
]
},
"collapsibleTrail": {
"type": "boolean",
"platforms": [
"react"
]
},
"subRowHeaders": {
"type": "array",
"platforms": [
"react"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { AdvancedTable } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"advanced_table\", props: { column_group_border_color: \"text_lt_default\", enable_toggle_expansion: \"all\" }) %>"
}
}
},
"avatar": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Avatar",
"description": "Avatar component",
"platforms": [
"react",
"rails"
],
"props": {
"componentOverlay": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"grayscale": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"imageAlt": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"imageUrl": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"md",
"lg",
"sm",
"xl",
"xs",
"xxs"
],
"default": "md"
},
"status": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"away",
"offline",
"online"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Avatar } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"avatar\", props: { size: \"md\", status: \"away\" }) %>"
}
}
},
"background": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Background",
"description": "Background component",
"platforms": [
"react",
"rails"
],
"props": {
"alt": {
"type": "string",
"platforms": [
"react"
]
},
"backgroundColor": {
"type": "ResponsiveProp | BackgroundColors",
"platforms": [
"react",
"rails"
],
"values": [
"gradient",
"dark",
"light",
"white",
"success",
"warning",
"error",
"info",
"neutral",
"primary",
"shadow",
"category_1",
"category_2",
"category_3",
"category_4",
"category_5",
"category_6",
"category_7",
"category_8",
"category_9",
"category_10",
"category_11",
"category_12",
"category_13",
"category_14",
"category_15",
"category_16",
"category_17",
"category_18",
"category_19",
"category_20",
"category_21",
"success_secondary",
"error_secondary",
"info_secondary",
"warning_secondary",
"neutral_secondary",
"primary_secondary",
"text_lt_default",
"text_lt_light",
"text_lt_lighter",
"text_dk_default",
"text_dk_light",
"text_dk_lighter",
"card_light",
"card_dark",
"data_1",
"data_2",
"data_3",
"data_4",
"data_5",
"data_6",
"data_7",
"data_8",
"border_light",
"border_dark",
"success_subtle",
"warning_subtle",
"error_subtle",
"info_subtle",
"neutral_subtle"
],
"default": "light"
},
"backgroundSize": {
"type": "ResponsiveProp | BackgroundSizes",
"platforms": [
"react",
"rails"
],
"values": [
"contain",
"cover",
"auto"
],
"default": "cover"
},
"backgroundPosition": {
"type": "ResponsiveProp | string",
"platforms": [
"react",
"rails"
],
"default": null
},
"backgroundRepeat": {
"type": "ResponsiveProp | BackgroundRepeat",
"platforms": [
"react",
"rails"
],
"values": [
"repeat",
"repeat-x",
"repeat-y",
"no-repeat",
"space",
"round",
"initial",
"inherit"
],
"default": "initial"
},
"imageUrl": {
"type": "ResponsiveProp | string",
"platforms": [
"react",
"rails"
]
},
"imageOverlay": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"opacity_1",
"opacity_2",
"opacity_3",
"opacity_4",
"opacity_5",
"opacity_6",
"opacity_7",
"opacity_8",
"opacity_9",
"opacity_10"
]
},
"customColor": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": null
},
"padding": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"none",
"xs",
"sm",
"md",
"lg",
"xl"
]
},
"tag": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"p",
"span",
"div",
"tr",
"th",
"td",
"thead",
"col"
],
"default": "div"
},
"transition": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"fade",
"blur",
"scale"
],
"default": null
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Background } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"background\", props: { background_color: \"gradient\", background_size: \"contain\" }) %>"
}
}
},
"badge": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Badge",
"description": "Badge component",
"platforms": [
"react",
"rails"
],
"props": {
"closeProps": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"removeIcon": {
"type": "boolean",
"platforms": [
"react"
]
},
"removeOnClick": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"rounded": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"tabIndex": {
"type": "number",
"platforms": [
"react"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"error",
"info",
"neutral",
"notification",
"notificationError",
"primary",
"success",
"warning"
],
"default": "neutral"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Badge } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"badge\", props: { variant: \"error\" }) %>"
}
}
},
"body": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Body",
"description": "Body component",
"platforms": [
"react",
"rails"
],
"props": {
"color": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"light",
"lighter",
"link",
"error",
"success"
],
"default": "default"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"highlightedText": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"highlighting": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"status": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"neutral",
"negative",
"positive"
],
"default": "neutral"
},
"tag": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"p",
"span",
"div"
],
"default": "div"
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"link"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Body } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"body\", props: { color: \"default\", status: \"neutral\" }) %>"
}
}
},
"bread_crumbs": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "BreadCrumbs",
"description": "BreadCrumbs component",
"platforms": [
"react",
"rails"
],
"props": {
"text": {
"type": "string",
"platforms": [
"react"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { BreadCrumbs } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"bread_crumbs\", props: { text: \"Example\" }) %>"
}
}
},
"button": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Button",
"description": "Button component",
"platforms": [
"react",
"rails"
],
"props": {
"count": {
"type": "number",
"platforms": [
"react",
"rails"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"fixedWidth": {
"type": "boolean",
"platforms": [
"react"
]
},
"form": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": null
},
"fullWidth": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"highlight": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"iconRight": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"link": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"loading": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"newWindow": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"onClick": {
"type": "function",
"platforms": [
"react"
]
},
"tabIndex": {
"type": "number",
"platforms": [
"react"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg"
],
"default": null
},
"target": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"type": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"inline"
],
"default": "inline"
},
"htmlType": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"submit",
"reset",
"button"
]
},
"value": {
"type": "string | null",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"primary",
"secondary",
"link",
"danger",
"reaction"
],
"default": "primary"
},
"wrapperClass": {
"type": "string",
"platforms": [
"react"
]
},
"iconFontFamily": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"far",
"fas",
"fab",
"fak"
],
"default": "far"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Button } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"button\", props: { size: \"sm\", type: \"inline\" }) %>"
}
}
},
"button_toolbar": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "ButtonToolbar",
"description": "ButtonToolbar component",
"platforms": [
"react",
"rails"
],
"props": {
"onClick": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"orientation": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"horizontal",
"vertical"
],
"default": "horizontal"
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"primary",
"secondary"
],
"default": "primary"
},
"connected": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { ButtonToolbar } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"button_toolbar\", props: { orientation: \"horizontal\", variant: \"primary\" }) %>"
}
}
},
"caption": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Caption",
"description": "Caption component",
"platforms": [
"react",
"rails"
],
"props": {
"color": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"light",
"lighter",
"success",
"error",
"link"
],
"default": null
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"xs",
"sm",
"md",
"lg",
"xl"
],
"default": "md"
},
"tag": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"p",
"span",
"div",
"caption"
],
"default": "div"
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"link"
],
"default": null
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Caption } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"caption\", props: { color: \"default\", size: \"xs\" }) %>"
}
}
},
"card": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Card",
"description": "Card component",
"platforms": [
"react",
"rails"
],
"props": {
"background": {
"type": "BackgroundColors | ProductColors | \"none\"",
"platforms": [
"react",
"rails"
],
"values": [
"white",
"light",
"dark",
"product_1_background",
"product_1_highlight",
"product_2_background",
"product_2_highlight",
"product_3_background",
"product_3_highlight",
"product_4_background",
"product_4_highlight",
"product_5_background",
"product_5_highlight",
"product_6_background",
"product_6_highlight",
"product_7_background",
"product_7_highlight",
"product_8_background",
"product_8_highlight",
"product_9_background",
"product_9_highlight",
"product_10_background",
"product_10_highlight",
"windows",
"siding",
"doors",
"solar",
"roofing",
"gutters",
"insulation",
"none",
"success_subtle",
"warning_subtle",
"error_subtle",
"info_subtle",
"neutral_subtle"
],
"default": "none"
},
"borderNone": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"borderRadius": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"xs",
"sm",
"md",
"lg",
"xl",
"none",
"rounded"
]
},
"dragId": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"draggableItem": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"dragHandle": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"highlight": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"length": {
"type": "number",
"platforms": [
"react"
]
},
"padding": {
"type": "string",
"platforms": [
"react"
]
},
"selected": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"tag": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"div",
"section",
"footer",
"header",
"article",
"aside",
"main",
"nav"
],
"default": "div"
},
"headerColor": {
"type": "BackgroundColors | ProductColors | CategoryColors | StatusColors | \"none\"",
"platforms": [
"react"
],
"default": "category_1"
},
"headerColorStriped": {
"type": "boolean",
"platforms": [
"react"
],
"default": false
},
"items": {
"platforms": [
"rails"
],
"type": "array"
},
"dropZoneLineColor": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"primary",
"purple"
],
"default": null
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Card } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"card\", props: { background: \"white\", border_radius: \"xs\" }) %>"
}
}
},
"checkbox": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Checkbox",
"description": "Checkbox component",
"platforms": [
"react",
"rails"
],
"props": {
"checked": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"error": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"indeterminate": {
"type": "boolean",
"platforms": [
"react"
]
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"onChange": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"tabIndex": {
"type": "number",
"platforms": [
"react"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"indeterminateMain": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"indeterminateMainLabels": {
"platforms": [
"rails"
],
"type": "array"
},
"indeterminateParent": {
"platforms": [
"rails"
]
},
"inputOptions": {
"platforms": [
"rails"
],
"type": "string"
},
"required": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"formSpacing": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"hiddenInput": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"hiddenValue": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Checkbox } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"checkbox\", props: { text: \"Example\" }) %>"
}
}
},
"circle_icon_button": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "CircleIconButton",
"description": "CircleIconButton component",
"platforms": [
"react",
"rails"
],
"props": {
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"link": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"loading": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"onClick": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"newWindow": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"type": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"button",
"submit",
"reset"
],
"default": "button"
},
"target": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"primary",
"secondary",
"link"
],
"default": "primary"
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"sm"
],
"default": "default"
},
"inputOptions": {
"platforms": [
"rails"
],
"type": "string"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { CircleIconButton } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"circle_icon_button\", props: { type: \"button\", variant: \"primary\" }) %>"
}
}
},
"collapsible": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Collapsible",
"description": "Collapsible component",
"platforms": [
"react",
"rails"
],
"props": {
"collapsed": {
"type": "boolean",
"platforms": [
"react"
]
},
"icon": {
"type": "string | string[]",
"platforms": [
"react"
]
},
"iconColor": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"default",
"light",
"lighter",
"link",
"error",
"success"
]
},
"iconSize": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"lg",
"xs",
"sm",
"1x",
"2x",
"3x",
"4x",
"5x",
"6x",
"7x",
"8x",
"9x",
"10x"
]
},
"onIconClick": {
"type": "function",
"platforms": [
"react"
]
},
"onClick": {
"type": "function",
"platforms": [
"react"
]
},
"tag": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"p",
"span",
"div",
"tr",
"th",
"td",
"thead",
"col"
],
"default": "div"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Collapsible } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"collapsible\", props: { icon_color: \"default\", icon_size: \"lg\" }) %>"
}
}
},
"contact": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Contact",
"description": "Contact component",
"platforms": [
"react",
"rails"
],
"props": {
"contactDetail": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"contactType": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"contactValue": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"iconEnabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"unstyled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Contact } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"contact\", props: { text: \"Example\" }) %>"
}
}
},
"copy_button": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "CopyButton",
"description": "CopyButton component",
"platforms": [
"react",
"rails"
],
"props": {
"from": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"tooltipPlacement": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"top",
"right",
"bottom",
"left"
]
},
"tooltipText": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "Copied!"
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"button",
"icon"
],
"default": "icon"
},
"timeout": {
"type": "number",
"platforms": [
"react"
]
},
"tooltipPosition": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"top",
"right",
"bottom",
"left"
],
"default": "top"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { CopyButton } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"copy_button\", props: { tooltip_placement: \"top\", variant: \"button\" }) %>"
}
}
},
"currency": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Currency",
"description": "Currency component",
"platforms": [
"react",
"rails"
],
"props": {
"abbreviate": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"center",
"left",
"right"
],
"default": "left"
},
"amount": {
"type": "string | number",
"platforms": [
"react",
"rails"
]
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"decimals": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"matching"
],
"default": "default"
},
"emphasized": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"nullDisplay": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg"
],
"default": "md"
},
"symbol": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "$"
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"light",
"bold"
],
"default": "default"
},
"unit": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"unstyled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"commaSeparator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Currency } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"currency\", props: { align: \"center\", decimals: \"default\" }) %>"
}
}
},
"dashboard_value": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "DashboardValue",
"description": "DashboardValue component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"statChange": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"statLabel": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"statValue": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { DashboardValue } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"dashboard_value\", props: { align: \"left\" }) %>"
}
}
},
"date": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Date",
"description": "Date component",
"platforms": [
"react",
"rails"
],
"props": {
"alignment": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"showDayOfWeek": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showCurrentYear": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showIcon": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg"
],
"default": "md"
},
"unstyled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"value": {
"type": "Date",
"platforms": [
"react"
]
},
"date": {
"platforms": [
"rails"
]
},
"timezone": {
"platforms": [
"rails"
],
"default": "America/New_York"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Date } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"date\", props: { alignment: \"left\", size: \"sm\" }) %>"
}
}
},
"date_picker": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "DatePicker",
"description": "DatePicker component",
"platforms": [
"react",
"rails"
],
"props": {
"allowInput": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"customQuickPickDates": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"defaultDate": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"disableDate": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"disableInput": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"disableRange": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"disableWeekdays": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"enableTime": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"error": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"format": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "m/d/Y"
},
"hideIcon": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"hideLabel": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"initializeOnce": {
"type": "boolean",
"platforms": [
"react"
]
},
"inLine": {
"type": "boolean",
"platforms": [
"react"
]
},
"inputAria": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"inputData": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"inputOnChange": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"inputValue": {
"type": "string",
"platforms": [
"react"
]
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "Date Picker"
},
"maxDate": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"minDate": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"pickerId": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"placeholder": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "Select Date"
},
"positionElement": {
"type": "HTMLElement | null",
"platforms": [
"react",
"rails"
]
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"scrollContainer": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"selectionType": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"month",
"week",
"quickpick"
],
"default": "none"
},
"showTimezone": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"staticPosition": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"thisRangesEndToday": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"timeFormat": {
"type": "string",
"platforms": [
"react"
]
},
"type": {
"type": "string",
"platforms": [
"react"
]
},
"yearRange": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"controlsStartId": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"controlsEndId": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"syncStartWith": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"syncEndWith": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"endDateId": {
"platforms": [
"rails"
],
"type": "string",
"default": "end_date_id"
},
"endDateName": {
"platforms": [
"rails"
],
"type": "string",
"default": "end_date_name"
},
"inline": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"mode": {
"platforms": [
"rails"
],
"type": "string",
"default": "single"
},
"plugins": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"startDateId": {
"platforms": [
"rails"
],
"type": "string",
"default": "start_date_id"
},
"startDateName": {
"platforms": [
"rails"
],
"type": "string",
"default": "start_date_name"
},
"required": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"customEventType": {
"platforms": [
"rails"
],
"type": "string",
"default": ""
},
"validationMessage": {
"platforms": [
"rails"
],
"type": "string",
"default": ""
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { DatePicker } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"date_picker\", props: { selection_type: \"month\" }) %>"
}
}
},
"date_range_inline": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "DateRangeInline",
"description": "DateRangeInline component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"endDate": {
"type": "Date",
"platforms": [
"react",
"rails"
]
},
"icon": {
"type": "boolean",
"platforms": [
"react",
"rails"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"xs"
],
"default": "sm"
},
"showCurrentYear": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"startDate": {
"type": "Date",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { DateRangeInline } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"date_range_inline\", props: { align: \"left\", size: \"sm\" }) %>"
}
}
},
"date_range_stacked": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "DateRangeStacked",
"description": "DateRangeStacked component",
"platforms": [
"react",
"rails"
],
"props": {
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"endDate": {
"type": "Date",
"platforms": [
"react",
"rails"
]
},
"startDate": {
"type": "Date",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { DateRangeStacked } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"date_range_stacked\", props: { text: \"Example\" }) %>"
}
}
},
"date_stacked": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "DateStacked",
"description": "DateStacked component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"bold": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"date": {
"type": "Date",
"platforms": [
"react",
"rails"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md"
],
"default": "sm"
},
"reverse": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showCurrentYear": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { DateStacked } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"date_stacked\", props: { align: \"left\", size: \"sm\" }) %>"
}
}
},
"date_time": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "DateTime",
"description": "DateTime component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"datetime": {
"type": "Date",
"platforms": [
"react"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md"
],
"default": "md"
},
"showCurrentYear": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showDayOfWeek": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showIcon": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"timeZone": {
"type": "string",
"platforms": [
"react"
]
},
"date": {
"platforms": [
"rails"
],
"type": "string"
},
"timezone": {
"platforms": [
"rails"
],
"type": "string",
"default": "America/New_York"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { DateTime } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"date_time\", props: { align: \"left\", size: \"sm\" }) %>"
}
}
},
"date_time_stacked": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "DateTimeStacked",
"description": "DateTimeStacked component",
"platforms": [
"react",
"rails"
],
"props": {
"date": {
"type": "Date",
"platforms": [
"react",
"rails"
]
},
"datetime": {
"type": "Date",
"platforms": [
"react"
]
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"timeZone": {
"type": "string",
"platforms": [
"react"
]
},
"showCurrentYear": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"dateTime": {
"platforms": [
"rails"
],
"type": "string"
},
"timezone": {
"platforms": [
"rails"
],
"type": "string",
"default": "America/New_York"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { DateTimeStacked } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"date_time_stacked\", props: { text: \"Example\" }) %>"
}
}
},
"date_year_stacked": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "DateYearStacked",
"description": "DateYearStacked component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"date": {
"type": "Date",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { DateYearStacked } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"date_year_stacked\", props: { align: \"left\" }) %>"
}
}
},
"detail": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Detail",
"description": "Detail component",
"platforms": [
"react",
"rails"
],
"props": {
"bold": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"color": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"light",
"default",
"lighter",
"link",
"error",
"success"
],
"default": "light"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"tag": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"p",
"span",
"div"
],
"default": "div"
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Detail } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"detail\", props: { color: \"light\", tag: \"h1\" }) %>"
}
}
},
"dialog": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Dialog",
"description": "Dialog component",
"platforms": [
"react",
"rails"
],
"props": {
"cancelButton": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"closeable": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"confirmButton": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"fullHeight": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"loading": {
"type": "boolean",
"platforms": [
"react",
"rails"
]
},
"onCancel": {
"type": "function",
"platforms": [
"react"
]
},
"onChange": {
"type": "function",
"platforms": [
"react"
]
},
"onClose": {
"type": "function",
"platforms": [
"react"
]
},
"onConfirm": {
"type": "function",
"platforms": [
"react"
]
},
"opened": {
"type": "boolean",
"platforms": [
"react"
]
},
"portalClassName": {
"type": "string",
"platforms": [
"react"
]
},
"placement": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "center"
},
"shouldCloseOnOverlayClick": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg",
"xl",
"status_size",
"content"
],
"default": "md"
},
"status": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"info",
"caution",
"delete",
"error",
"success"
],
"default": ""
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"title": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"trigger": {
"type": "string",
"platforms": [
"react"
]
},
"confirmButtonId": {
"platforms": [
"rails"
]
},
"cancelButtonId": {
"platforms": [
"rails"
]
},
"customEventType": {
"platforms": [
"rails"
],
"type": "string",
"default": ""
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Dialog } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"dialog\", props: { placement: \"left\", size: \"sm\" }) %>"
}
}
},
"distribution_bar": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "DistributionBar",
"description": "DistributionBar component",
"platforms": [
"react",
"rails"
],
"props": {
"colors": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"lg",
"sm"
],
"default": "lg"
},
"widths": {
"type": "array",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { DistributionBar } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"distribution_bar\", props: { size: \"lg\" }) %>"
}
}
},
"draggable": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Draggable",
"description": "Draggable component",
"platforms": [
"react",
"rails"
],
"props": {
"dropZone": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"ghost",
"outline",
"shadow",
"line"
]
},
"dropZoneColor": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"primary",
"neutral",
"purple"
],
"default": "neutral"
},
"initialItems": {
"platforms": [
"rails"
],
"type": "array"
},
"dropZoneType": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"ghost",
"shadow",
"outline",
"line"
],
"default": "ghost"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Draggable } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"draggable\", props: { drop_zone: \"ghost\", drop_zone_color: \"primary\" }) %>"
}
}
},
"dropdown": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Dropdown",
"description": "Dropdown component",
"platforms": [
"react",
"rails"
],
"props": {
"autocomplete": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"blankSelection": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"clearable": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"closeOnClick": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"outside",
"inside",
"any"
],
"default": "any"
},
"constrainHeight": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"customQuickPickDates": {
"type": "CustomQuickPickDates",
"platforms": [
"react",
"rails"
]
},
"formPillProps": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"defaultValue": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"error": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"isClosed": {
"type": "boolean",
"platforms": [
"react"
]
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"multiSelect": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"onSelect": {
"type": "function",
"platforms": [
"react"
]
},
"options": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"placeholder": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"separators": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"subtle",
"quickpick"
],
"default": "default"
},
"rangeEndsToday": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"controlsStartId": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"controlsEndId": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"activeStyle": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"name": {
"platforms": [
"rails"
],
"type": "string"
},
"required": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"searchbar": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"startDateId": {
"platforms": [
"rails"
],
"type": "string",
"default": "start_date_id"
},
"startDateName": {
"platforms": [
"rails"
],
"type": "string",
"default": "start_date_name"
},
"endDateId": {
"platforms": [
"rails"
],
"type": "string",
"default": "end_date_id"
},
"endDateName": {
"platforms": [
"rails"
],
"type": "string",
"default": "end_date_name"
},
"customEventType": {
"platforms": [
"rails"
],
"type": "string",
"default": ""
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Dropdown } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"dropdown\", props: { close_on_click: \"outside\", variant: \"default\" }) %>"
}
}
},
"empty_state": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "EmptyState",
"description": "EmptyState component",
"platforms": [
"react",
"rails"
],
"props": {
"alignment": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"center",
"left",
"right"
],
"default": "center"
},
"description": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"header": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"image": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"linkButton": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"onLinkButtonClick": {
"type": "function",
"platforms": [
"react"
]
},
"onPrimaryButtonClick": {
"type": "function",
"platforms": [
"react"
]
},
"orientation": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"horizontal",
"vertical"
],
"default": "vertical"
},
"primaryButton": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg"
],
"default": "md"
},
"linkButtonUrl": {
"platforms": [
"rails"
]
},
"primaryButtonUrl": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { EmptyState } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"empty_state\", props: { alignment: \"center\", orientation: \"horizontal\" }) %>"
}
}
},
"file_upload": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "FileUpload",
"description": "FileUpload component",
"platforms": [
"react",
"rails"
],
"props": {
"accept": {
"type": "Record",
"platforms": [
"react",
"rails"
],
"default": ""
},
"customMessage": {
"type": "string",
"platforms": [
"react"
]
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"acceptedFilesDescription": {
"type": "string",
"platforms": [
"react"
]
},
"maxSize": {
"type": "number",
"platforms": [
"react"
]
},
"onFilesAccepted": {
"type": "Callback",
"platforms": [
"react"
]
},
"onFilesRejected": {
"type": "function",
"platforms": [
"react"
]
},
"error": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"getRootProps": {
"type": "function",
"platforms": [
"react"
]
},
"getInputProps": {
"type": "function",
"platforms": [
"react"
]
},
"isDragActive": {
"type": "boolean",
"platforms": [
"react"
]
},
"fileRejections": {
"type": "array",
"platforms": [
"react"
]
},
"files": {
"platforms": [
"rails"
],
"type": "array"
},
"label": {
"platforms": [
"rails"
],
"type": "string",
"default": "Upload File"
},
"placeholder": {
"platforms": [
"rails"
],
"type": "string",
"default": "No file"
},
"fullWidth": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"inputOptions": {
"platforms": [
"rails"
],
"type": "string"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { FileUpload } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"file_upload\", props: { text: \"Example\" }) %>"
}
}
},
"filter": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Filter",
"description": "Filter component",
"platforms": [
"react",
"rails"
],
"props": {
"filters": {
"platforms": [
"rails"
],
"type": "array"
},
"sortMenu": {
"platforms": [
"rails"
],
"type": "array"
},
"results": {
"platforms": [
"rails"
],
"type": "string"
},
"template": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"default",
"single",
"filter_only",
"sort_only"
],
"default": "default"
},
"background": {
"platforms": [
"rails"
],
"type": "boolean",
"default": true
},
"placement": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"top",
"bottom",
"left",
"right",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"right-start",
"right-end",
"left-start",
"left-end"
],
"default": "bottom-start"
},
"popoverProps": {
"platforms": [
"rails"
],
"type": "string"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Filter } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"filter\", props: { template: \"default\", placement: \"top\" }) %>"
}
}
},
"fixed_confirmation_toast": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "FixedConfirmationToast",
"description": "FixedConfirmationToast component",
"platforms": [
"react",
"rails"
],
"props": {
"autoClose": {
"type": "number",
"platforms": [
"react",
"rails"
]
},
"closeable": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"horizontal": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"right",
"left",
"center"
],
"default": null
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"multiLine": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"navMarginTop": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"onClose": {
"type": "VoidCallback",
"platforms": [
"react"
]
},
"open": {
"type": "boolean",
"platforms": [
"react"
]
},
"status": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"success",
"error",
"neutral",
"tip"
],
"default": "neutral"
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"vertical": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"top",
"bottom"
],
"default": null
},
"zIndex": {
"type": "number | string",
"platforms": [
"react"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { FixedConfirmationToast } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"fixed_confirmation_toast\", props: { horizontal: \"right\", status: \"success\" }) %>"
}
}
},
"flex": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Flex",
"description": "Flex component",
"platforms": [
"react",
"rails"
],
"props": {
"horizontal": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right",
"stretch",
"none"
],
"default": "left"
},
"justify": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"start",
"center",
"end",
"around",
"between",
"evenly",
"none"
],
"default": "none"
},
"inline": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"orientation": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"row",
"column"
],
"default": "row"
},
"spacing": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"around",
"between",
"evenly",
"none"
],
"default": "none"
},
"reverse": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"vertical": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"top",
"center",
"bottom",
"stretch",
"baseline",
"none"
],
"default": "top"
},
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"start",
"center",
"end",
"stretch",
"baseline",
"none"
],
"default": "none"
},
"gap": {
"type": "SizeType | SizeResponsiveType",
"platforms": [
"react"
]
},
"rowGap": {
"type": "SizeType | SizeResponsiveType",
"platforms": [
"react"
]
},
"columnGap": {
"type": "SizeType | SizeResponsiveType",
"platforms": [
"react"
]
},
"wrap": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"alignSelf": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"start",
"end",
"center",
"stretch",
"none"
],
"default": "none"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Flex } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"flex\", props: { horizontal: \"left\", justify: \"start\" }) %>"
}
}
},
"form": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Form",
"description": "Form component",
"platforms": [
"rails"
],
"props": {
"formSystem": {
"platforms": [
"rails"
],
"type": "string"
},
"formSystemOptions": {
"platforms": [
"rails"
],
"type": "string"
},
"loading": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"options": {
"platforms": [
"rails"
],
"type": "string"
},
"validate": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Form } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"form\", props: { text: \"Example\" }) %>"
}
}
},
"form_group": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "FormGroup",
"description": "FormGroup component",
"platforms": [
"react",
"rails"
],
"props": {
"fullWidth": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { FormGroup } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"form_group\", props: { text: \"Example\" }) %>"
}
}
},
"form_pill": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "FormPill",
"description": "FormPill component",
"platforms": [
"react",
"rails"
],
"props": {
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"onClick": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"avatar": {
"type": "boolean",
"platforms": [
"react"
]
},
"avatarUrl": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"size": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"textTransform": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"none",
"lowercase"
],
"default": "none"
},
"color": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"primary",
"neutral",
"success",
"warning",
"error",
"info",
"data_1",
"data_2",
"data_3",
"data_4",
"data_5",
"data_6",
"data_7",
"data_8",
"windows",
"siding",
"roofing",
"doors",
"gutters",
"solar",
"insulation",
"accessories"
],
"default": "primary"
},
"tabIndex": {
"type": "number",
"platforms": [
"react"
]
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"wrapped": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"closeProps": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"tabindex": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { FormPill } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"form_pill\", props: { text_transform: \"none\", color: \"primary\" }) %>"
}
}
},
"hashtag": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Hashtag",
"description": "Hashtag component",
"platforms": [
"react",
"rails"
],
"props": {
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"newWindow": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"rel": {
"type": "string",
"platforms": [
"react"
]
},
"target": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"type": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"home",
"project",
"appointment"
],
"default": "default"
},
"url": {
"type": "string",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Hashtag } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"hashtag\", props: { type: \"default\" }) %>"
}
}
},
"highlight": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Highlight",
"description": "Highlight component",
"platforms": [
"react",
"rails"
],
"props": {
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"highlightedText": {
"type": "array",
"platforms": [
"react"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Highlight } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"highlight\", props: { text: \"Example\" }) %>"
}
}
},
"home_address_street": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "HomeAddressStreet",
"description": "HomeAddressStreet component",
"platforms": [
"react",
"rails"
],
"props": {
"address": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"addressCont": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"city": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"preserveCase": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"emphasis": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"street",
"city",
"none"
],
"default": "street"
},
"homeId": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"houseStyle": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"homeUrl": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"target": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"newWindow": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"state": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"zipcode": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"territory": {
"type": "string",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { HomeAddressStreet } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"home_address_street\", props: { emphasis: \"street\" }) %>"
}
}
},
"icon": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Icon",
"description": "Icon component",
"platforms": [
"react",
"rails"
],
"props": {
"border": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": false
},
"color": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"customIcon": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
],
"default": null
},
"fixedWidth": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"flip": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"horizontal",
"vertical",
"both",
"none"
],
"default": null
},
"icon": {
"type": "string | ReactSVGElement",
"platforms": [
"react",
"rails"
]
},
"inverse": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"listItem": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"pull": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"right",
"none"
],
"default": null
},
"pulse": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"rotation": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
90,
180,
270
],
"default": null
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"lg",
"xs",
"sm",
"1x",
"2x",
"3x",
"4x",
"5x",
"6x",
"7x",
"8x",
"9x",
"10x"
],
"default": null
},
"fontStyle": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"far",
"fas",
"fab",
"fak"
],
"default": "far"
},
"spin": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"tabIndex": {
"type": "number",
"platforms": [
"react"
]
},
"tabindex": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Icon } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"icon\", props: { flip: \"horizontal\", pull: \"left\" }) %>"
}
}
},
"icon_button": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "IconButton",
"description": "IconButton component",
"platforms": [
"react",
"rails"
],
"props": {
"htmlType": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"submit",
"reset",
"button"
]
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "bars"
},
"link": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"newWindow": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"onClick": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"lg",
"xs",
"sm",
"1x",
"2x",
"3x",
"4x",
"5x",
"6x",
"7x",
"8x",
"9x",
"10x"
],
"default": "2x"
},
"target": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"link"
],
"default": "default"
},
"type": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"button",
"submit",
"reset"
],
"default": "button"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { IconButton } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"icon_button\", props: { html_type: \"submit\", size: \"lg\" }) %>"
}
}
},
"icon_circle": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "IconCircle",
"description": "IconCircle component",
"platforms": [
"react",
"rails"
],
"props": {
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"base",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl"
],
"default": "md"
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
0,
"default"
],
"default": "default"
},
"emoji": {
"platforms": [
"rails"
],
"type": "string",
"default": ""
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { IconCircle } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"icon_circle\", props: { size: \"base\", variant: \"0\" }) %>"
}
}
},
"icon_stat_value": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "IconStatValue",
"description": "IconStatValue component",
"platforms": [
"react",
"rails"
],
"props": {
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"orientation": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"vertical",
"horizontal"
],
"default": "horizontal"
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg"
],
"default": "sm"
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"unit": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"value": {
"type": "number",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "\"default\"",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"royal",
"blue",
"purple",
"teal",
"red",
"yellow",
"green",
"orange"
],
"default": "default"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { IconStatValue } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"icon_stat_value\", props: { orientation: \"vertical\", size: \"sm\" }) %>"
}
}
},
"icon_value": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "IconValue",
"description": "IconValue component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { IconValue } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"icon_value\", props: { align: \"left\" }) %>"
}
}
},
"image": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Image",
"description": "Image component",
"platforms": [
"react",
"rails"
],
"props": {
"alt": {
"platforms": [
"rails"
]
},
"onError": {
"platforms": [
"rails"
],
"type": "string",
"default": null
},
"rounded": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"size": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"xs",
"sm",
"md",
"lg",
"xl",
"none"
],
"default": "none"
},
"transition": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"blur",
"fade",
"scale",
"none"
],
"default": "fade"
},
"url": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Image } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"image\", props: { size: \"xs\", transition: \"blur\" }) %>"
}
}
},
"label_pill": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "LabelPill",
"description": "LabelPill component",
"platforms": [
"react",
"rails"
],
"props": {
"label": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"pillValue": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"error",
"info",
"neutral",
"primary",
"success",
"warning"
],
"default": "neutral"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { LabelPill } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"label_pill\", props: { variant: \"error\" }) %>"
}
}
},
"label_value": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "LabelValue",
"description": "LabelValue component",
"platforms": [
"react",
"rails"
],
"props": {
"active": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"date": {
"type": "Date",
"platforms": [
"react",
"rails"
]
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"details"
],
"default": "default"
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"description": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"title": {
"type": "string",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { LabelValue } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"label_value\", props: { variant: \"default\" }) %>"
}
}
},
"layout": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Layout",
"description": "Layout component",
"platforms": [
"react",
"rails"
],
"props": {
"collapse": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"xs",
"sm",
"md",
"lg",
"xl"
],
"default": "xs"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"full": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"position": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"left",
"right"
]
},
"responsive": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg"
],
"default": {
"react": "sm",
"rails": "md"
}
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"light",
"dark",
"gradient"
],
"default": "light"
},
"transparent": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"layout": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sidebar",
"collection",
"collection_detail",
"kanban",
"content",
"masonry",
"bracket"
],
"default": "sidebar"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Layout } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"layout\", props: { collapse: \"xs\", position: \"left\" }) %>"
}
}
},
"legend": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Legend",
"description": "Legend component",
"platforms": [
"react",
"rails"
],
"props": {
"color": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "data_1"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"prefixText": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Legend } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"legend\", props: { text: \"Example\" }) %>"
}
}
},
"link": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Link",
"description": "Link component",
"platforms": [
"react",
"rails"
],
"props": {
"color": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"body",
"muted",
"destructive"
],
"default": "default"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"href": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"iconRight": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"tabIndex": {
"type": "number",
"platforms": [
"react"
]
},
"tag": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"a",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"p",
"span",
"div"
],
"default": "a"
},
"target": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"underline": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"tabindex": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Link } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"link\", props: { color: \"default\", tag: \"a\" }) %>"
}
}
},
"list": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "List",
"description": "List component",
"platforms": [
"react",
"rails"
],
"props": {
"borderless": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"enableDrag": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"layout": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"right"
],
"default": ""
},
"ordered": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"role": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"tabIndex": {
"type": "number",
"platforms": [
"react"
]
},
"text": {
"type": "string",
"platforms": [
"react"
]
},
"size": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "string",
"platforms": [
"react"
]
},
"xpadding": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"items": {
"platforms": [
"rails"
],
"type": "array"
},
"tabindex": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { List } from 'playbook-ui'",
"example": "
"
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"list\", props: { layout: \"left\" }) %>"
}
}
},
"loading_inline": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "LoadingInline",
"description": "LoadingInline component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "Loading"
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"dotted",
"solid"
],
"default": "dotted"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { LoadingInline } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"loading_inline\", props: { align: \"left\", variant: \"dotted\" }) %>"
}
}
},
"map": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Map",
"description": "Map component",
"platforms": [
"react"
],
"props": {
"zoomBtns": {
"type": "boolean",
"platforms": [
"react"
]
},
"flyTo": {
"type": "boolean",
"platforms": [
"react"
]
},
"zoomInClick": {
"type": "function",
"platforms": [
"react"
]
},
"zoomOutClick": {
"type": "function",
"platforms": [
"react"
]
},
"flyToClick": {
"type": "function",
"platforms": [
"react"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Map } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"map\", props: { text: \"Example\" }) %>"
}
}
},
"message": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Message",
"description": "Message component",
"platforms": [
"react",
"rails"
],
"props": {
"avatarGrayscale": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"avatarName": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"avatarStatus": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"away",
"offline",
"online"
]
},
"avatarUrl": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"message": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"timestamp": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"timestampObject": {
"type": "Date",
"platforms": [
"react",
"rails"
]
},
"timezone": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "America/New_York"
},
"alignTimestamp": {
"type": "string",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"right"
],
"default": "right"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Message } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"message\", props: { avatar_status: \"away\", align_timestamp: \"left\" }) %>"
}
}
},
"multi_level_select": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "MultiLevelSelect",
"description": "MultiLevelSelect component",
"platforms": [
"react",
"rails"
],
"props": {
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"error": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"inputDisplay": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"pills",
"none"
],
"default": "pills"
},
"inputName": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"required": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"returnAllSelected": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showCheckedChildren": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"treeData": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"onChange": {
"type": "function",
"platforms": [
"react"
]
},
"onSelect": {
"type": "function",
"platforms": [
"react"
]
},
"placeholder": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "Start typing..."
},
"selectedIds": {
"type": "string[] | any",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"multi",
"single"
],
"default": "multi"
},
"wrapped": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"pillColor": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"primary",
"neutral",
"success",
"warning",
"error",
"info",
"data_1",
"data_2",
"data_3",
"data_4",
"data_5",
"data_6",
"data_7",
"data_8",
"windows",
"siding",
"roofing",
"doors",
"gutters",
"solar",
"insulation",
"accessories"
],
"default": "primary"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { MultiLevelSelect } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"multi_level_select\", props: { input_display: \"pills\", variant: \"multi\" }) %>"
}
}
},
"multiple_users": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "MultipleUsers",
"description": "MultipleUsers component",
"platforms": [
"react",
"rails"
],
"props": {
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"maxDisplayedUsers": {
"type": "number",
"platforms": [
"react"
]
},
"reverse": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"md",
"lg",
"sm",
"xl",
"xs",
"xxs"
],
"default": "xs"
},
"withTooltip": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"users": {
"type": "array",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { MultipleUsers } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"multiple_users\", props: { size: \"md\" }) %>"
}
}
},
"multiple_users_stacked": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "MultipleUsersStacked",
"description": "MultipleUsersStacked component",
"platforms": [
"react",
"rails"
],
"props": {
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"md",
"lg",
"sm",
"xl"
],
"default": "sm"
},
"users": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"bubble"
],
"default": "default"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { MultipleUsersStacked } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"multiple_users_stacked\", props: { size: \"md\", variant: \"default\" }) %>"
}
}
},
"nav": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Nav",
"description": "Nav component",
"platforms": [
"react",
"rails"
],
"props": {
"borderless": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"extendedUnderline": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"highlight": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"onClick": {
"type": "function",
"platforms": [
"react"
]
},
"orientation": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"vertical",
"horizontal"
],
"default": "vertical"
},
"link": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "#"
},
"title": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"normal",
"subtle"
],
"default": "normal"
},
"itemSpacing": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"tabbing": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Nav } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"nav\", props: { orientation: \"vertical\", variant: \"normal\" }) %>"
}
}
},
"online_status": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "OnlineStatus",
"description": "OnlineStatus component",
"platforms": [
"react",
"rails"
],
"props": {
"status": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"away",
"error",
"info",
"neutral",
"offline",
"online",
"primary",
"success",
"warning"
],
"default": "offline"
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg"
],
"default": "sm"
},
"noBorder": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { OnlineStatus } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"online_status\", props: { status: \"away\", size: \"sm\" }) %>"
}
}
},
"overlay": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Overlay",
"description": "Overlay component",
"platforms": [
"react",
"rails"
],
"props": {
"color": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"card_light",
"bg_light",
"card_dark",
"bg_dark",
"black",
"white",
"success",
"error"
],
"default": "card_light"
},
"dynamic": {
"type": "false",
"platforms": [
"react",
"rails"
],
"default": false
},
"gradient": {
"type": "boolean",
"platforms": [
"react"
]
},
"position": {
"type": "string",
"platforms": [
"react"
]
},
"size": {
"type": "string",
"platforms": [
"react"
]
},
"scrollBarNone": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"fullScreen": {
"type": "boolean",
"platforms": [
"react"
]
},
"layout": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"opacity": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"opacity_1",
"opacity_2",
"opacity_3",
"opacity_4",
"opacity_5",
"opacity_6",
"opacity_7",
"opacity_8",
"opacity_9",
"opacity_10"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Overlay } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"overlay\", props: { color: \"card_light\", opacity: \"opacity_1\" }) %>"
}
}
},
"pagination": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Pagination",
"description": "Pagination component",
"platforms": [
"react",
"rails"
],
"props": {
"current": {
"type": "number",
"platforms": [
"react"
]
},
"onChange": {
"type": "function",
"platforms": [
"react"
]
},
"range": {
"type": "number",
"platforms": [
"react"
]
},
"total": {
"type": "number",
"platforms": [
"react"
]
},
"model": {
"platforms": [
"rails"
]
},
"view": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Pagination } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"pagination\", props: { text: \"Example\" }) %>"
}
}
},
"passphrase": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Passphrase",
"description": "Passphrase component",
"platforms": [
"react",
"rails"
],
"props": {
"confirmation": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"inputProps": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"onChange": {
"type": "function",
"platforms": [
"react"
]
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showTipsBelow": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"always",
"xs",
"sm",
"md",
"lg",
"xl"
],
"default": "always"
},
"tips": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"uncontrolled": {
"type": "boolean",
"platforms": [
"react"
]
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Passphrase } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"passphrase\", props: { show_tips_below: \"always\" }) %>"
}
}
},
"pb_bar_graph": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "PbBarGraph",
"description": "PbBarGraph component",
"platforms": [
"react",
"rails"
],
"props": {
"options": {
"type": "Record",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { PbBarGraph } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"pb_bar_graph\", props: { text: \"Example\" }) %>"
}
}
},
"pb_circle_chart": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "PbCircleChart",
"description": "PbCircleChart component",
"platforms": [
"react",
"rails"
],
"props": {
"options": {
"type": "Record",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { PbCircleChart } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"pb_circle_chart\", props: { text: \"Example\" }) %>"
}
}
},
"pb_gauge_chart": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "PbGaugeChart",
"description": "PbGaugeChart component",
"platforms": [
"react",
"rails"
],
"props": {
"options": {
"type": "Record",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { PbGaugeChart } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"pb_gauge_chart\", props: { text: \"Example\" }) %>"
}
}
},
"pb_line_graph": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "PbLineGraph",
"description": "PbLineGraph component",
"platforms": [
"react",
"rails"
],
"props": {
"options": {
"type": "Record",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { PbLineGraph } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"pb_line_graph\", props: { text: \"Example\" }) %>"
}
}
},
"person": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Person",
"description": "Person component",
"platforms": [
"react",
"rails"
],
"props": {
"firstName": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"lastName": {
"type": "string",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Person } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"person\", props: { text: \"Example\" }) %>"
}
}
},
"person_contact": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "PersonContact",
"description": "PersonContact component",
"platforms": [
"react",
"rails"
],
"props": {
"firstName": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"lastName": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"contacts": {
"type": "array",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { PersonContact } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"person_contact\", props: { text: \"Example\" }) %>"
}
}
},
"phone_number_input": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "PhoneNumberInput",
"description": "PhoneNumberInput component",
"platforms": [
"react",
"rails"
],
"props": {
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"error": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"hiddenInputs": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"initialCountry": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"isValid": {
"type": "function",
"platforms": [
"react"
]
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"onChange": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"onValidate": {
"type": "Callback",
"platforms": [
"react"
]
},
"onlyCountries": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"excludeCountries": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"preferredCountries": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"required": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"formatAsYouType": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"strictMode": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"countrySearch": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showPlaceholder": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { PhoneNumberInput } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"phone_number_input\", props: { text: \"Example\" }) %>"
}
}
},
"pill": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Pill",
"description": "Pill component",
"platforms": [
"react",
"rails"
],
"props": {
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"success",
"warning",
"error",
"info",
"neutral",
"primary"
],
"default": "neutral"
},
"textTransform": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"none",
"lowercase"
],
"default": "lowercase"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Pill } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"pill\", props: { variant: \"success\", text_transform: \"none\" }) %>"
}
}
},
"popover": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Popover",
"description": "Popover component",
"platforms": [
"react",
"rails"
],
"props": {
"appendTo": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "body"
},
"closeOnClick": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"outside",
"inside",
"any"
],
"default": "none"
},
"offset": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"reference": {
"type": "PopperReference & any",
"platforms": [
"react"
]
},
"show": {
"type": "boolean",
"platforms": [
"react"
],
"default": false
},
"shouldClosePopover": {
"type": "function",
"platforms": [
"react"
],
"default": "noop"
},
"triggerElementId": {
"platforms": [
"rails"
]
},
"tooltipId": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Popover } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"popover\", props: { close_on_click: \"outside\" }) %>"
}
}
},
"progress_pills": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "ProgressPills",
"description": "ProgressPills component",
"platforms": [
"react",
"rails"
],
"props": {
"active": {
"type": "number",
"platforms": [
"react",
"rails"
],
"default": 0
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"fullWidthPill": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"steps": {
"type": "number",
"platforms": [
"react",
"rails"
],
"default": 3
},
"title": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { ProgressPills } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"progress_pills\", props: { text: \"Example\" }) %>"
}
}
},
"progress_simple": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "ProgressSimple",
"description": "ProgressSimple component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"max": {
"type": "number",
"platforms": [
"react",
"rails"
]
},
"muted": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"percent": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"value": {
"type": "number",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"positive",
"negative",
"warning"
],
"default": "default"
},
"width": {
"type": "string",
"platforms": [
"react"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { ProgressSimple } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"progress_simple\", props: { align: \"left\", variant: \"default\" }) %>"
}
}
},
"progress_step": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "ProgressStep",
"description": "ProgressStep component",
"platforms": [
"react",
"rails"
],
"props": {
"orientation": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"horizontal",
"vertical"
],
"default": "horizontal"
},
"icon": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showIcon": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"variant": {
"type": "string",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"tracker"
],
"default": "default"
},
"color": {
"type": "string",
"platforms": [
"react",
"rails"
],
"values": [
"primary",
"info"
],
"default": "primary"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { ProgressStep } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"progress_step\", props: { orientation: \"horizontal\", variant: \"default\" }) %>"
}
}
},
"radio": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Radio",
"description": "Radio component",
"platforms": [
"react",
"rails"
],
"props": {
"alignment": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"checked": {
"type": "boolean, // removed default assignment here",
"platforms": [
"react",
"rails"
],
"default": false
},
"customChildren": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"error": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"label": {
"type": "string",
"platforms": [
"react"
]
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "radio_name"
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "radio_text"
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "Radio Text"
},
"onChange": {
"type": "(event: React.FormEvent | null) => void",
"platforms": [
"react"
]
},
"inputOptions": {
"platforms": [
"rails"
],
"type": "string"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Radio } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"radio\", props: { text: \"Example\" }) %>"
}
}
},
"rich_text_editor": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "RichTextEditor",
"description": "RichTextEditor component",
"platforms": [
"react"
],
"props": {
"advancedEditor": {
"type": "any",
"platforms": [
"react"
]
},
"advancedEditorToolbar": {
"type": "boolean",
"platforms": [
"react"
]
},
"toolbarBottom": {
"type": "boolean",
"platforms": [
"react"
]
},
"focus": {
"type": "boolean",
"platforms": [
"react"
]
},
"inputOptions": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"inline": {
"type": "boolean",
"platforms": [
"react"
]
},
"label": {
"type": "string",
"platforms": [
"react"
]
},
"extensions": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"name": {
"type": "string",
"platforms": [
"react"
]
},
"onChange": {
"type": "function",
"platforms": [
"react"
]
},
"placeholder": {
"type": "string",
"platforms": [
"react"
]
},
"inputHeight": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"sm",
"md",
"lg"
]
},
"inputMinHeight": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"sm",
"md",
"lg"
]
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react"
]
},
"simple": {
"type": "boolean",
"platforms": [
"react"
]
},
"sticky": {
"type": "boolean",
"platforms": [
"react"
]
},
"template": {
"type": "string",
"platforms": [
"react"
]
},
"value": {
"type": "string",
"platforms": [
"react"
]
},
"maxWidth": {
"type": "string",
"platforms": [
"react"
]
},
"TrixEditor": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"trixInstance": {
"type": "any",
"platforms": [
"react"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { RichTextEditor } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"rich_text_editor\", props: { input_height: \"sm\", input_min_height: \"sm\" }) %>"
}
}
},
"section_separator": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "SectionSeparator",
"description": "SectionSeparator component",
"platforms": [
"react",
"rails"
],
"props": {
"color": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"primary"
],
"default": "default"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"lineStyle": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"solid",
"dashed"
],
"default": "solid"
},
"orientation": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"horizontal",
"vertical"
],
"default": "horizontal"
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"card",
"background"
],
"default": "card"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { SectionSeparator } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"section_separator\", props: { color: \"default\", line_style: \"solid\" }) %>"
}
}
},
"select": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Select",
"description": "Select component",
"platforms": [
"react",
"rails"
],
"props": {
"blankSelection": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"compact": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"error": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"includeBlank": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"inline": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"inputOptions": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"margin": {
"type": "string",
"platforms": [
"react"
]
},
"marginBottom": {
"type": "string",
"platforms": [
"react"
]
},
"multiple": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"onChange": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"options": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"required": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showArrow": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"value": {
"type": "string",
"platforms": [
"react"
]
},
"attributes": {
"platforms": [
"rails"
],
"type": "string"
},
"onchange": {
"platforms": [
"rails"
]
},
"validationMessage": {
"platforms": [
"rails"
],
"type": "string",
"default": ""
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Select } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"select\", props: { text: \"Example\" }) %>"
}
}
},
"selectable_card": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "SelectableCard",
"description": "SelectableCard component",
"platforms": [
"react",
"rails"
],
"props": {
"checked": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"customIcon": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"error": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"icon": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"inputId": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"multi": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"onChange": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "default"
},
"inputOptions": {
"platforms": [
"rails"
],
"type": "string"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { SelectableCard } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"selectable_card\", props: { text: \"Example\" }) %>"
}
}
},
"selectable_card_icon": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "SelectableCardIcon",
"description": "SelectableCardIcon component",
"platforms": [
"react",
"rails"
],
"props": {
"checked": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"checkmark": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"customIcon": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
],
"default": null
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"inputId": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"multi": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"titleText": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"bodyText": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"onChange": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"inputOptions": {
"platforms": [
"rails"
],
"type": "string"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { SelectableCardIcon } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"selectable_card_icon\", props: { text: \"Example\" }) %>"
}
}
},
"selectable_icon": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "SelectableIcon",
"description": "SelectableIcon component",
"platforms": [
"react",
"rails"
],
"props": {
"checked": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"customIcon": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
],
"default": null
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"inputId": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"inputs": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "enabled"
},
"multi": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"inputOptions": {
"platforms": [
"rails"
],
"type": "string"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { SelectableIcon } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"selectable_icon\", props: { text: \"Example\" }) %>"
}
}
},
"selectable_list": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "SelectableList",
"description": "SelectableList component",
"platforms": [
"react",
"rails"
],
"props": {
"enableDrag": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"checkbox",
"radio"
],
"default": "checkbox"
},
"text": {
"platforms": [
"rails"
],
"type": "string"
},
"items": {
"platforms": [
"rails"
],
"type": "array"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { SelectableList } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"selectable_list\", props: { variant: \"checkbox\" }) %>"
}
}
},
"skeleton_loading": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "SkeletonLoading",
"description": "SkeletonLoading component",
"platforms": [
"react",
"rails"
],
"props": {
"height": {
"type": "string",
"platforms": [
"react"
]
},
"width": {
"type": "string",
"platforms": [
"react"
]
},
"borderRadius": {
"type": "string",
"platforms": [
"react"
]
},
"gap": {
"type": "Sizes | \"none\"",
"platforms": [
"react"
]
},
"stack": {
"type": "number",
"platforms": [
"react",
"rails"
],
"default": 1
},
"color": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"white"
],
"default": "default"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { SkeletonLoading } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"skeleton_loading\", props: { color: \"default\" }) %>"
}
}
},
"source": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Source",
"description": "Source component",
"platforms": [
"react",
"rails"
],
"props": {
"hideIcon": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"source": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"type": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"events",
"inbound",
"outbound",
"prospecting",
"referral",
"retail",
"user"
],
"default": "inbound"
},
"user": {
"type": "AvatarProps",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Source } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"source\", props: { type: \"events\" }) %>"
}
}
},
"star_rating": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "StarRating",
"description": "StarRating component",
"platforms": [
"react",
"rails"
],
"props": {
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"fixedWidth": {
"type": "boolean",
"platforms": [
"react"
]
},
"layoutOption": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"number",
"onestar"
],
"default": "default"
},
"icon": {
"type": "string",
"platforms": [
"react"
]
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"rating": {
"type": "number",
"platforms": [
"react",
"rails"
],
"default": 0
},
"denominator": {
"type": "number",
"platforms": [
"react",
"rails"
],
"default": 5
},
"colorOption": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"yellow",
"primary",
"subtle",
"outline"
],
"default": "yellow"
},
"backgroundType": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"fill",
"outline"
],
"default": "fill"
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"xs",
"sm",
"md",
"lg"
],
"default": "sm"
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"display",
"interactive"
],
"default": "display"
},
"onClick": {
"type": "function",
"platforms": [
"react"
]
},
"name": {
"platforms": [
"rails"
],
"type": "string"
},
"required": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"inputOptions": {
"platforms": [
"rails"
],
"type": "string"
},
"defaultValue": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { StarRating } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"star_rating\", props: { layout_option: \"default\", color_option: \"yellow\" }) %>"
}
}
},
"stat_change": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "StatChange",
"description": "StatChange component",
"platforms": [
"react",
"rails"
],
"props": {
"change": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"increase",
"decrease",
"neutral"
],
"default": "neutral"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"icon": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"value": {
"type": "string | number",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { StatChange } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"stat_change\", props: { change: \"increase\" }) %>"
}
}
},
"stat_value": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "StatValue",
"description": "StatValue component",
"platforms": [
"react",
"rails"
],
"props": {
"unit": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"value": {
"type": "string | number",
"platforms": [
"react",
"rails"
]
},
"precision": {
"platforms": [
"rails"
],
"type": "string"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { StatValue } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"stat_value\", props: { text: \"Example\" }) %>"
}
}
},
"table": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Table",
"description": "Table component",
"platforms": [
"react",
"rails"
],
"props": {
"cardProps": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"collapse": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg"
],
"default": "sm"
},
"container": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"dataTable": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"disableHover": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"filterProps": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"filterContent": {
"type": "any",
"platforms": [
"react",
"rails"
]
},
"headerStyle": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"borderless",
"floating"
],
"default": "default"
},
"outerPadding": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl"
],
"default": null
},
"pagination": {
"type": "ReactNode",
"platforms": [
"react",
"rails"
]
},
"responsive": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"collapse",
"scroll",
"none"
],
"default": "collapse"
},
"singleLine": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg"
],
"default": "md"
},
"sticky": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"stickyLeftColumn": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"stickyRightColumn": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"striped": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"tag": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"table",
"div"
],
"default": "table"
},
"title": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": null
},
"titleProps": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"withFilter"
],
"default": "default"
},
"verticalBorder": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"text": {
"platforms": [
"rails"
]
},
"filter": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Table } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"table\", props: { collapse: \"sm\", header_style: \"default\" }) %>"
}
}
},
"text_input": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "TextInput",
"description": "TextInput component",
"platforms": [
"react",
"rails"
],
"props": {
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"emojiMask": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"error": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"inline": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"mask": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"currency",
"zipCode",
"postalCode",
"ssn"
],
"default": null
},
"onChange": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"placeholder": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"required": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"type": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "text"
},
"value": {
"type": "string | number",
"platforms": [
"react",
"rails"
]
},
"addOn": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"autoComplete": {
"type": "boolean | string",
"platforms": [
"react"
]
},
"autocomplete": {
"platforms": [
"rails"
],
"default": true
},
"inputOptions": {
"platforms": [
"rails"
],
"type": "string"
},
"validation": {
"platforms": [
"rails"
],
"type": "string"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { TextInput } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"text_input\", props: { mask: \"currency\" }) %>"
}
}
},
"textarea": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Textarea",
"description": "Textarea component",
"platforms": [
"react",
"rails"
],
"props": {
"characterCount": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"emojiMask": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"error": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"inline": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"inputOptions": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"object": {
"type": "string",
"platforms": [
"react"
]
},
"method": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"maxCharacters": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"placeholder": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"required": {
"type": "boolean",
"platforms": [
"react"
]
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"rows": {
"type": "number",
"platforms": [
"react",
"rails"
],
"default": 4
},
"resize": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"none",
"both",
"horizontal",
"vertical",
"auto"
],
"default": "none"
},
"onChange": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"onkeyup": {
"platforms": [
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Textarea } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"textarea\", props: { resize: \"none\" }) %>"
}
}
},
"time": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Time",
"description": "Time component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"date": {
"type": "Date",
"platforms": [
"react"
]
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"showIcon": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"md",
"sm"
],
"default": "sm"
},
"showTimezone": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"timeZone": {
"type": "string",
"platforms": [
"react"
]
},
"unstyled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"time": {
"platforms": [
"rails"
]
},
"timezone": {
"platforms": [
"rails"
],
"default": "America/New_York"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Time } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"time\", props: { align: \"left\", size: \"md\" }) %>"
}
}
},
"time_picker": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "TimePicker",
"description": "TimePicker component",
"platforms": [
"react",
"rails"
],
"props": {
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"defaultTime": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"error": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"inputOptions": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "Time Picker"
},
"maxTime": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"minTime": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"onChange": {
"type": "function",
"platforms": [
"react"
]
},
"onClose": {
"type": "function",
"platforms": [
"react"
]
},
"required": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showTimezone": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"timeFormat": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"AMPM",
"24hour"
],
"default": "AMPM"
},
"validationMessage": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { TimePicker } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"time_picker\", props: { time_format: \"AMPM\" }) %>"
}
}
},
"time_range_inline": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "TimeRangeInline",
"description": "TimeRangeInline component",
"platforms": [
"react",
"rails"
],
"props": {
"alignment": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"vertical"
],
"default": "left"
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"xs"
],
"default": "sm"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"icon": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"timezone": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"startTime": {
"type": "Date",
"platforms": [
"react",
"rails"
]
},
"endTime": {
"type": "Date",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { TimeRangeInline } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"time_range_inline\", props: { alignment: \"left\", size: \"sm\" }) %>"
}
}
},
"time_stacked": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "TimeStacked",
"description": "TimeStacked component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"date": {
"type": "Date",
"platforms": [
"react"
]
},
"time": {
"type": "number | Date",
"platforms": [
"react",
"rails"
]
},
"timeZone": {
"type": "string",
"platforms": [
"react"
]
},
"timezone": {
"platforms": [
"rails"
],
"default": "America/New_York"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { TimeStacked } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"time_stacked\", props: { align: \"left\" }) %>"
}
}
},
"timeline": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Timeline",
"description": "Timeline component",
"platforms": [
"react",
"rails"
],
"props": {
"orientation": {
"type": "string",
"platforms": [
"react",
"rails"
],
"values": [
"vertical",
"horizontal"
],
"default": "horizontal"
},
"showDate": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"itemGap": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"xs",
"sm",
"md",
"lg",
"none"
],
"default": "none"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Timeline } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"timeline\", props: { orientation: \"vertical\", item_gap: \"xs\" }) %>"
}
}
},
"timestamp": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Timestamp",
"description": "Timestamp component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"timestamp": {
"type": "Date | string",
"platforms": [
"react",
"rails"
]
},
"timezone": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": "America/New_York"
},
"showCurrentYear": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showDate": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"showUser": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"hideUpdated": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"showTime": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"showTimezone": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"unstyled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"elapsed",
"updated"
],
"default": "default"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Timestamp } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"timestamp\", props: { align: \"left\", variant: \"default\" }) %>"
}
}
},
"title": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Title",
"description": "Title component",
"platforms": [
"react",
"rails"
],
"props": {
"bold": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"color": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"default",
"light",
"lighter",
"success",
"error",
"link"
],
"default": null
},
"size": {
"type": "SizeType | SizeResponsiveType",
"platforms": [
"react",
"rails"
],
"default": 3
},
"displaySize": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"xs",
"sm",
"md",
"lg",
"xl",
"xxl"
],
"default": null
},
"tag": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"div",
"span"
],
"default": "h3"
},
"text": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"link"
],
"default": null
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Title } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"title\", props: { color: \"default\", display_size: \"xs\" }) %>"
}
}
},
"title_count": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "TitleCount",
"description": "TitleCount component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"center",
"left",
"right"
],
"default": "left"
},
"count": {
"type": "number",
"platforms": [
"react",
"rails"
]
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"title": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"lg",
"sm"
],
"default": "sm"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { TitleCount } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"title_count\", props: { align: \"center\", size: \"lg\" }) %>"
}
}
},
"title_detail": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "TitleDetail",
"description": "TitleDetail component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"detail": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"title": {
"type": "string",
"platforms": [
"react",
"rails"
]
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { TitleDetail } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"title_detail\", props: { align: \"left\" }) %>"
}
}
},
"toggle": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Toggle",
"description": "Toggle component",
"platforms": [
"react",
"rails"
],
"props": {
"checked": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"onChange": {
"type": "ReactNode",
"platforms": [
"react"
]
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md"
],
"default": "sm"
},
"value": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"inputOptions": {
"platforms": [
"rails"
],
"type": "string"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Toggle } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"toggle\", props: { size: \"sm\" }) %>"
}
}
},
"tooltip": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Tooltip",
"description": "Tooltip component",
"platforms": [
"react",
"rails"
],
"props": {
"useClickToOpen": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"delay": {
"type": "number | Partial<{open: number; close: number}>",
"platforms": [
"react"
]
},
"height": {
"type": "string",
"platforms": [
"react"
]
},
"icon": {
"type": "string",
"platforms": [
"react"
]
},
"interaction": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"maxHeight": {
"type": "string",
"platforms": [
"react"
]
},
"maxWidth": {
"type": "string",
"platforms": [
"react"
]
},
"minHeight": {
"type": "string",
"platforms": [
"react"
]
},
"minWidth": {
"type": "string",
"platforms": [
"react"
]
},
"placement": {
"type": "Placement",
"platforms": [
"react"
]
},
"position": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"absolute",
"fixed"
]
},
"text": {
"type": "string",
"platforms": [
"react"
]
},
"width": {
"type": "string",
"platforms": [
"react"
]
},
"showTooltip": {
"type": "boolean",
"platforms": [
"react"
]
},
"forceOpenTooltip": {
"type": "boolean",
"platforms": [
"react"
]
},
"delayOpen": {
"platforms": [
"rails"
]
},
"delayClose": {
"platforms": [
"rails"
]
},
"tooltipId": {
"platforms": [
"rails"
]
},
"triggerElementSelector": {
"platforms": [
"rails"
]
},
"triggerElementId": {
"platforms": [
"rails"
]
},
"triggerMethod": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"hover",
"click"
],
"default": "hover"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Tooltip } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"tooltip\", props: { position: \"absolute\", trigger_method: \"hover\" }) %>"
}
}
},
"typeahead": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "Typeahead",
"description": "Typeahead component",
"platforms": [
"react",
"rails"
],
"props": {
"async": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"components": {
"type": "GenericObject",
"platforms": [
"react"
]
},
"createable": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"disabled": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"error": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": ""
},
"inputDisplay": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"pills",
"none"
],
"default": "pills"
},
"label": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"loadOptions": {
"type": "string | Noop",
"platforms": [
"react",
"rails"
]
},
"getOptionLabel": {
"type": "string | (() => string)",
"platforms": [
"react",
"rails"
]
},
"getOptionValue": {
"type": "string | (() => string)",
"platforms": [
"react",
"rails"
]
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"options": {
"type": "array",
"platforms": [
"react",
"rails"
]
},
"marginBottom": {
"type": "enum",
"platforms": [
"react"
],
"values": [
"none",
"xxs",
"xs",
"sm",
"md",
"lg",
"xl"
]
},
"onChange": {
"type": "any",
"platforms": [
"react"
]
},
"optionsByContext": {
"type": "Record>",
"platforms": [
"react",
"rails"
]
},
"required": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"requiredIndicator": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"validation": {
"type": "GenericObject",
"platforms": [
"react",
"rails"
]
},
"searchContextSelector": {
"type": "string",
"platforms": [
"react",
"rails"
],
"default": null
},
"clearOnContextChange": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"preserveSearchInput": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"defaultOptions": {
"platforms": [
"rails"
],
"type": "array"
},
"inline": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"multiKit": {
"platforms": [
"rails"
],
"type": "string",
"default": ""
},
"inputOptions": {
"platforms": [
"rails"
],
"type": "string"
},
"isMulti": {
"platforms": [
"rails"
],
"type": "boolean",
"default": true
},
"pills": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"placeholder": {
"platforms": [
"rails"
]
},
"plusIcon": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
},
"searchTermMinimumLength": {
"platforms": [
"rails"
],
"default": 3
},
"searchDebounceTimeout": {
"platforms": [
"rails"
],
"default": 250
},
"value": {
"platforms": [
"rails"
]
},
"pillColor": {
"platforms": [
"rails"
],
"type": "enum",
"values": [
"primary",
"neutral",
"success",
"warning",
"error",
"info",
"data_1",
"data_2",
"data_3",
"data_4",
"data_5",
"data_6",
"data_7",
"data_8",
"windows",
"siding",
"roofing",
"doors",
"gutters",
"solar",
"insulation",
"accessories"
],
"default": "primary"
},
"wrapped": {
"platforms": [
"rails"
],
"type": "boolean",
"default": false
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { Typeahead } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"typeahead\", props: { input_display: \"pills\", margin_bottom: \"none\" }) %>"
}
}
},
"user": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "User",
"description": "User component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"avatar": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"avatarUrl": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"bold": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": true
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"avatarGrayscale": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
},
"name": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"nameStyle": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"title",
"body",
"caption",
"detail"
],
"default": "title"
},
"orientation": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"horizontal",
"vertical"
],
"default": "horizontal"
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg"
],
"default": "sm"
},
"subtitle": {
"type": "string | Array | Node",
"platforms": [
"react",
"rails"
]
},
"territory": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"title": {
"type": "string",
"platforms": [
"react",
"rails"
]
},
"titleStyle": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"title",
"body",
"caption",
"detail"
],
"default": "body"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { User } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"user\", props: { align: \"left\", name_style: \"title\" }) %>"
}
}
},
"user_badge": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "UserBadge",
"description": "UserBadge component",
"platforms": [
"react",
"rails"
],
"props": {
"badge": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"million-dollar",
"veteran"
],
"default": "million-dollar"
},
"size": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"sm",
"md",
"lg"
],
"default": "md"
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { UserBadge } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"user_badge\", props: { badge: \"million-dollar\", size: \"sm\" }) %>"
}
}
},
"weekday_stacked": {
"$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
"name": "WeekdayStacked",
"description": "WeekdayStacked component",
"platforms": [
"react",
"rails"
],
"props": {
"align": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"left",
"center",
"right"
],
"default": "left"
},
"dark": {
"type": "boolean",
"platforms": [
"react"
]
},
"date": {
"type": "Date",
"platforms": [
"react",
"rails"
]
},
"variant": {
"type": "enum",
"platforms": [
"react",
"rails"
],
"values": [
"day_only",
"month_day",
"expanded"
],
"default": "month_day"
},
"compact": {
"type": "boolean",
"platforms": [
"react",
"rails"
],
"default": false
}
},
"globalProps": true,
"usage": {
"react": {
"import": "import { WeekdayStacked } from 'playbook-ui'",
"example": ""
},
"rails": {
"import": null,
"example": "<%= pb_rails(\"weekday_stacked\", props: { align: \"left\", variant: \"day_only\" }) %>"
}
}
}
}
}