Structured Output

A structured table for comparing AI models and their results — model, context window, and input price.

Default

Default model pricing rows with brand icons for GPT, Claude, and Llama.

Loading…

Installation

CLI

npx @sonojs/ui@latest add structured-output

Usage

structured-output.tsx

import { DataTable } from "@/components/sonojs/structured-output"

export function Example() {
  return (
    <DataTable
      rows={[
        { model: "gpt-4o", context: "128k", price: "$5.00" },
        { model: "claude-3.5", context: "200k", price: "$3.00" },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
rows	DataTableRow[]	gpt / claude / llama	Rows with `model`, `context`, and `price`. Icons follow the model prefix.
className	string	—	Optional class names on the table root.