HTML0 tokens
UI4A (ours)0 tokens
A2UI0 tokens
A2UI surface is not renderable.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
body {
margin: 0;
font-family: ui-sans-serif, system-ui, sans-serif;
background: transparent;
color: #171411;
}
.card {
max-width: 24rem;
margin: 1.5rem auto;
background: #fff;
border: 1px solid #e7ddd3;
border-radius: 1rem;
padding: 1.25rem;
}
.title {
font-size: 1.125rem;
font-weight: 600;
}
.subtitle {
margin: 0.25rem 0 0;
font-size: 0.875rem;
color: #6f655b;
}
.plans {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 1rem 0;
}
.plan {
display: flex;
gap: 0.625rem;
align-items: flex-start;
padding: 0.75rem;
border: 1px solid #e7ddd3;
border-radius: 0.75rem;
cursor: pointer;
transition:
border-color 0.15s,
background 0.15s;
}
.plan:hover {
border-color: #d8ccbd;
background: #faf7f3;
}
.plan input {
margin-top: 0.15rem;
accent-color: #ee5c2a;
}
.plan-title {
display: block;
font-size: 0.9375rem;
font-weight: 600;
}
.plan-desc {
display: block;
font-size: 0.8125rem;
color: #6f655b;
}
button {
width: 100%;
padding: 0.625rem;
border: none;
border-radius: 0.625rem;
background: #ee5c2a;
color: #fff;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
button:hover {
background: #d94e1f;
}
</style>
</head>
<body>
<div class="card">
<div class="title">Choose your plan</div>
<p class="subtitle">Select the plan that works best for you. You can upgrade anytime.</p>
<div class="plans">
<label class="plan">
<input type="checkbox" />
<span><span class="plan-title">Free</span><span class="plan-desc">Basic features, 1 project, community support</span></span>
</label>
<label class="plan">
<input type="checkbox" />
<span><span class="plan-title">Pro — $12/mo</span><span class="plan-desc">Unlimited projects, priority support, advanced analytics</span></span>
</label>
<label class="plan">
<input type="checkbox" />
<span><span class="plan-title">Team — $29/mo</span><span class="plan-desc">Up to 10 members, shared workspace, admin controls</span></span>
</label>
<label class="plan">
<input type="checkbox" />
<span><span class="plan-title">Enterprise — Custom</span><span class="plan-desc">Unlimited members, SSO, dedicated support, SLA</span></span>
</label>
</div>
<button>Continue</button>
</div>
</body>
</html>const plans = [
{ value: "free", title: "Free", desc: "Basic features, 1 project, community support" },
{ value: "pro", title: "Pro — $12/mo", desc: "Unlimited projects, priority support, advanced analytics" },
{ value: "team", title: "Team — $29/mo", desc: "Up to 10 members, shared workspace, admin controls" },
{ value: "enterprise", title: "Enterprise — Custom", desc: "Unlimited members, SSO, dedicated support, SLA" },
];
export default function App() {
return (
<div className="mx-auto my-6 max-w-96 rounded-2xl border border-#e7ddd3 bg-white p-5 font-sans text-#171411">
<div className="text-lg font-semibold">Choose your plan</div>
<p className="mt-1 text-sm text-#6f655b">Select the plan that works best for you. You can upgrade anytime.</p>
<div className="my-4 flex flex-col gap-2">
{plans.map((p) => (
<label key={p.value} className="flex cursor-pointer items-start gap-2.5 rounded-xl border border-#e7ddd3 p-3 transition-colors hover:border-#d8ccbd hover:bg-#faf7f3">
<input type="checkbox" aria-label={p.title} className="mt-0.15rem accent-#ee5c2a" />
<span>
<span className="block text-0.9375rem font-semibold">{p.title}</span>
<span className="block text-0.8125rem text-#6f655b">{p.desc}</span>
</span>
</label>
))}
</div>
<button className="w-full cursor-pointer rounded-0.625rem border-none bg-#ee5c2a p-2.5 text-0.9375rem font-semibold text-white transition-colors hover:bg-#d94e1f">Continue</button>
</div>
);
}[
{
"beginRendering": {
"surfaceId": "subscription-picker-surface",
"root": "root-card"
}
},
{
"surfaceUpdate": {
"surfaceId": "subscription-picker-surface",
"components": [
{
"id": "root-card",
"component": {
"Card": {
"child": "main-column"
}
}
},
{
"id": "main-column",
"component": {
"Column": {
"children": {
"explicitList": ["header-group", "plan-selector", "confirm-button"]
},
"alignment": "stretch"
}
}
},
{
"id": "header-group",
"component": {
"Column": {
"children": {
"explicitList": ["title-text", "subtitle-text"]
},
"alignment": "stretch"
}
}
},
{
"id": "title-text",
"component": {
"Label": {
"text": {
"literalString": "Choose your plan"
},
"variant": "title"
}
}
},
{
"id": "subtitle-text",
"component": {
"Label": {
"text": {
"literalString": "Select the plan that works best for you. You can upgrade anytime."
},
"color": "secondary",
"variant": "body"
}
}
},
{
"id": "plan-selector",
"component": {
"SelectionList": {
"selection": {
"path": "/selectedPlans",
"literalArray": []
},
"maxSelection": 3,
"requiredSelection": 2,
"hasSelection": {
"path": "/canConfirm",
"literalBoolean": false
},
"items": [
{
"value": "free",
"child": "plan-free"
},
{
"value": "pro",
"child": "plan-pro"
},
{
"value": "team",
"child": "plan-team"
},
{
"value": "enterprise",
"child": "plan-enterprise"
}
]
}
}
},
{
"id": "plan-free",
"component": {
"Column": {
"children": {
"explicitList": ["free-title", "free-desc"]
},
"alignment": "start"
}
}
},
{
"id": "free-title",
"component": {
"Label": {
"text": {
"literalString": "Free"
},
"variant": "bodySemibold"
}
}
},
{
"id": "free-desc",
"component": {
"Label": {
"text": {
"literalString": "Basic features, 1 project, community support"
},
"color": "secondary",
"variant": "caption"
}
}
},
{
"id": "plan-pro",
"component": {
"Column": {
"children": {
"explicitList": ["pro-title", "pro-desc"]
},
"alignment": "start"
}
}
},
{
"id": "pro-title",
"component": {
"Label": {
"text": {
"literalString": "Pro — $12/mo"
},
"variant": "bodySemibold"
}
}
},
{
"id": "pro-desc",
"component": {
"Label": {
"text": {
"literalString": "Unlimited projects, priority support, advanced analytics"
},
"color": "secondary",
"variant": "caption"
}
}
},
{
"id": "plan-team",
"component": {
"Column": {
"children": {
"explicitList": ["team-title", "team-desc"]
},
"alignment": "start"
}
}
},
{
"id": "team-title",
"component": {
"Label": {
"text": {
"literalString": "Team — $29/mo"
},
"variant": "bodySemibold"
}
}
},
{
"id": "team-desc",
"component": {
"Label": {
"text": {
"literalString": "Up to 10 members, shared workspace, admin controls"
},
"color": "secondary",
"variant": "caption"
}
}
},
{
"id": "plan-enterprise",
"component": {
"Column": {
"children": {
"explicitList": ["ent-title", "ent-desc"]
},
"alignment": "start"
}
}
},
{
"id": "ent-title",
"component": {
"Label": {
"text": {
"literalString": "Enterprise — Custom"
},
"variant": "bodySemibold"
}
}
},
{
"id": "ent-desc",
"component": {
"Label": {
"text": {
"literalString": "Unlimited members, SSO, dedicated support, SLA"
},
"color": "secondary",
"variant": "caption"
}
}
},
{
"id": "confirm-button",
"component": {
"Button": {
"child": "btn-label",
"style": "primary",
"enabled": {
"path": "/canConfirm"
},
"action": {
"name": "confirmPlan",
"context": [
{
"key": "plans",
"value": {
"path": "/selectedPlans"
}
}
]
}
}
}
},
{
"id": "btn-label",
"component": {
"Label": {
"text": {
"literalString": "Continue"
},
"variant": "bodySansSemibold"
}
}
}
]
}
},
{
"dataModelUpdate": {
"surfaceId": "subscription-picker-surface",
"path": "/",
"contents": []
}
}
]