Elements

54 / 122 · Structured output

Spec sheet

The most common structured answer after a table: one object, labeled.

Opus 5claude-opus-5
context500,000 tokens

Installation

npx shadcn@latest add "@assistant-ui/elements-spec-sheet"

Usage

import { SpecSheet } from "@/components/elements/spec-sheet";

<SpecSheet title="Opus 5" subtitle="claude-opus-5" rows={rows} visibleCount={6} />

Props

SpecSheet

title*stringWhat the sheet describes.
subtitlestringSecondary identifier: a model id, a SKU, a version.
rows*SpecRow[]Label and value pairs. Values are pre-formatted and right-aligned on tabular figures.
visibleCount*numberHow many rows have landed.
classNamestringExtra classes merged onto the root.

SpecRow

label*stringField name, rendered in mono on the left.
value*stringPre-formatted value. The element never formats numbers itself.
emphasisbooleanRenders the value in full ink. Use it for the one row that answers the question.

Source

spec-sheet.tsx
"use client";

import { cn } from "@/lib/utils";
import { mono, paper } from "./surfaces";

export interface SpecRow {
  label: string;
  value: string;
  emphasis?: boolean;
}

export function SpecSheet({
  title,
  subtitle,
  rows,
  visibleCount,
  className,
}: {
  title: string;
  subtitle?: string;
  rows: readonly SpecRow[];
  visibleCount: number;
  className?: string;
}) {
  return (
    <div
      className={cn(
        paper,
        "flex w-full max-w-sm flex-col gap-3 rounded-2xl p-4",
        className,
      )}
    >
      <div className="flex flex-col gap-0.5">
        <span className="text-[13.5px] font-medium">{title}</span>
        {subtitle && (
          <span className="text-foreground/45 text-xs">{subtitle}</span>
        )}
      </div>

      <div className="flex flex-col">
        {rows.slice(0, visibleCount).map((row) => (
          <div
            key={row.label}
            className="border-foreground/[0.06] fade-in animate-in fill-mode-both flex items-baseline gap-3 border-t py-1.5 duration-300 first:border-t-0 first:pt-0"
          >
            <span className={cn(mono, "text-foreground/35 w-24 shrink-0")}>
              {row.label}
            </span>
            <span
              className={cn(
                "min-w-0 flex-1 text-end text-[13px] tabular-nums",
                row.emphasis
                  ? "text-foreground/95 font-medium"
                  : "text-foreground/70",
              )}
            >
              {row.value}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}