53 / 59 · Generative
Player card
A stat card with four Col-laid-out stats beneath the player header.
Marcus Chen
Point Guard · #23
24.6
PPG
8.1
AST
5.3
REB
27.9
EFF
Installation
npm install @assistant-ui/react-generative-ui
Usage
import { renderGenerativeUI } from "@assistant-ui/react-generative-ui";
<div data-aui-theme="elements">
{renderGenerativeUI(spec, library, { status: "done" })}
</div>Spec
Data{
"$type": "Card",
"children": [
{
"$type": "Header",
"$key": "name",
"text": "Marcus Chen",
"size": "lg"
},
{
"$type": "Caption",
"$key": "position",
"value": "Point Guard · #23"
},
{
"$type": "Row",
"$key": "stats",
"justify": "between",
"children": [
{
"$type": "Col",
"$key": "pts",
"align": "center",
"gap": 1,
"children": [
{
"$type": "Text",
"$key": "value",
"value": "24.6",
"size": "2xl",
"weight": "bold"
},
{
"$type": "Caption",
"$key": "label",
"value": "PPG"
}
]
},
{
"$type": "Col",
"$key": "ast",
"align": "center",
"gap": 1,
"children": [
{
"$type": "Text",
"$key": "value",
"value": "8.1",
"size": "2xl",
"weight": "bold"
},
{
"$type": "Caption",
"$key": "label",
"value": "AST"
}
]
},
{
"$type": "Col",
"$key": "reb",
"align": "center",
"gap": 1,
"children": [
{
"$type": "Text",
"$key": "value",
"value": "5.3",
"size": "2xl",
"weight": "bold"
},
{
"$type": "Caption",
"$key": "label",
"value": "REB"
}
]
},
{
"$type": "Col",
"$key": "eff",
"align": "center",
"gap": 1,
"children": [
{
"$type": "Text",
"$key": "value",
"value": "27.9",
"size": "2xl",
"weight": "bold"
},
{
"$type": "Caption",
"$key": "label",
"value": "EFF"
}
]
}
]
}
]
}