CompareGrid

Models side by side: one to four equal columns, each with a header, a thread that scrolls on its own and a footer. One column per screen on a phone.

View source
GPT-5, 1 of 3

Order #4471 shipped three days late because of a carrier delay. Draft a short apology to the customer, and suggest a subject line.

Subject: Your order #4471 is on its way — and we’re sorry it’s late

Hi Maya,

Your order #4471 left our warehouse on time, but a delay with our carrier held it up for three days. That’s not the experience we want for you, and I’m sorry.

It’s moving again and should arrive by Thursday. As a thank-you for your patience, your next order ships free — the code is applied to your account automatically.

Warmly,
The Northwind team

First token
4.64 s
Total
6.39 s
Tokens
64 → 417
Reasoning
308
Cost
$0.00425

Order #4471 shipped three days late because of a carrier delay. Draft a short apology to the customer, and suggest a subject line.

Here’s a reply you can send as is:

Hi Maya,

I’m sorry your order #4471 is running late. Our carrier had a delay that held it for three days — it’s back on the road and should reach you Thursday.

We’ve added free shipping to your next order. Thank you for bearing with us.

— Northwind support

Subject lines

  1. Order #4471: a short delay, and our apology
  2. Your Northwind order is on its way
First token
3.88 s
Total
5.06 s
Tokens
64 → 368
Reasoning
264
Cost
$0.00571

Order #4471 shipped three days late because of a carrier delay. Draft a short apology to the customer, and suggest a subject line.

Subject: Sorry — order #4471 is running a little late

Hi Maya,

We’re sorry: a carrier delay held your order #4471 for three days. It’s on its way again and should arrive by Thursday.

Your next order ships free on us.

Best,
Northwind

First token
2.05 s
Total
2.58 s
Tokens
64 → 152
Reasoning
92
Cost
$0.000320
import { CompareGrid } from "@logicplanes/kaeso-ui/playground";

Props

  • active
    number

    The column on screen on a phone, or scrolled to when the columns don't fit.

  • addLabel
    string

    The add circle's name. Defaults to "Add model" in the provider's language.

  • aria-label
    string

    The grid's accessible name ("Models").

  • children
    ReactNode

    CompareGrid.Column elements, one to four.

  • divider
    "none" | "hairline" = hairline

    A hairline between columns, or none.

  • max
    number = 4

    Columns at most (4 by default): the add circle is disabled there, with the reason in its tooltip.

  • onActiveChange
    ((index: number) => void)

    Called with the index of the column in focus.

  • onAdd
    (() => void)

    Adds a column: a circle at the end of the last column's header (and in the phone's switcher).