Markdown

Lists, tables and inline code styled like Codex's rendered answers.

import { Fragment } from "react";

import { CodexCode, CodexList, CodexTable } from "../components/codex-markdown";
import { CodexMessage } from "../components/codex-message";
import { CodexTerminal } from "../components/codex-terminal";
import { CODEX_DEMO_SESSION } from "../constants/codex-demo";

export default function CodexMarkdownExample() {
  const session = CODEX_DEMO_SESSION;

  return (
    <div className="w-full p-6">
      <CodexTerminal title={session.title}>
        <CodexMessage>
          <p>
            Drafted from <CodexCode>git log</CodexCode> and{" "}
            <strong>CHANGELOG.md</strong>:
          </p>
          <CodexList
            items={session.highlights.map((highlight) => (
              <Fragment key={highlight.id}>
                <strong>{highlight.label}</strong> {highlight.text}
              </Fragment>
            ))}
          />
          <CodexTable codeColumns={[0]} {...session.table} />
        </CodexMessage>
      </CodexTerminal>
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/codex-markdown

Put these inside an assistant CodexMessage. CodexList draws • bullets with a hanging indent. CodexTable is built on the shadcn Table primitives, with bold yellow headers, a heavier rule under the header, thin gray rules between rows and gaps between the columns. Other props go to the Table. CodexCode colors inline code green.

Prop	Default	Description
`headers`		`CodexTable` column headers.
`rows`		`CodexTable` rows, one array of cells per row.
`codeColumns`	`[]`	`CodexTable` column indexes to color like code.
`items`		`CodexList` items.

Used in

Codex

A full recreation of an OpenAI Codex CLI session, from the banner to the pinned prompt.