Model Comparison

Two or more outputs side by side with a pick. Columns are equal width and height regardless of content, because a taller box reads as the better answer before a word of it is read.

src/components/ui/model-comparison.tsx

About

From the component's own source, where it was written.

Two or more model outputs side by side, with a pick.

Columns are equal width and equal height regardless of content, so neither answer is visually favoured — a taller box reads as the more substantial one before a word of it is read, which is exactly the bias a comparison is supposed to avoid. Metadata sits in a footer for the same reason: latency and cost are compared after the answers, not before them.

Stacks below the breakpoint, where two columns would be too narrow to read.

Install

npx astralyx-ui add model-comparison

Usage

import { ModelComparison } from '@/components/ui/model-comparison'

<ModelComparison outputs={outputs} onSelect={choose} />

Composer

Change the props and the source below follows.

astralyx-large

Define tokens in an @theme block; utilities are generated from them, so the token and the class that uses it live in one file.

astralyx-small

Tailwind v4 uses CSS for config. Put your theme in @theme.

Props

responsive

tsx

<ModelComparison
  outputs={outputs}
  responsive="md"
  onSelect={choose}
/>

Examples

Side by side

tsx

<ModelComparison outputs={outputs} onSelect={choose} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`ModelComparison`

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
outputs	ModelOutput[]	required	`{ id, model, output, latency?, tokens?, cost?, badge? }`.
selected	string	—	Controlled or uncontrolled pick.
onSelect	(id: string) => void	—	Controlled or uncontrolled pick.
responsive	Responsive	'md'	Breakpoint the columns appear at. Below it they stack, where two columns would be too narrow to read.
pickedLabel	ReactNode	'Picked'	Badge on the chosen model.

Types

`ModelOutput`

Two or more model outputs side by side, with a pick.

Field	Type	Description
id	string	—
model	string	—
output	ReactNode	—
latency?	number	Seconds.
tokens?	number	—
cost?	number	—
badge?	ReactNode	—

Behaviour

Topic	Detail	Description
metadata	footer	Latency, tokens and cost sit below the answers — compared after them, not before.