Recipe

Support reply

A two-pane support view with conversation rows, draft text, and policy notes.

Preview

Refund timing

Waiting 18m

Open

Seat transfer

Updated 42m ago

Draft

Tax document

Needs invoice

Hold

Ingredients

The recipe only uses documented Axie primitives.

List RowTabsTextareaButtonBadge

Accessibility

Keep the active conversation and reply editor as separate regions with clear headings.
Use tabs for parallel context, such as reply drafts and internal notes.
Keep the final send action after the editor in DOM order.

Code

code

<div className="grid gap-4 lg:grid-cols-[280px_1fr]">  <div className="divide-y divide-axie-line">    <ListRow title="Refund timing" />    <ListRow title="Seat transfer" />  </div>  <Tabs defaultValue="reply" items={items} /></div>