Components

React components for rendering Trident article content. All components are unstyled by default and render with data-trident-* attributes for CSS targeting.

ArticleRenderer

Top-level component that renders a complete article with all sections, FAQ, sources, and CTA.

import { ArticleRenderer } from "@trident/client/components";

<ArticleRenderer
  article={article}
  className="prose"
  components={{
    // Optional: override any component
    Heading: CustomHeading,
    Paragraph: CustomParagraph,
  }}
/>

Props

Prop	Type	Description
article	Article	The article to render
className	string?	CSS class for wrapper
components	ComponentOverrides?	Custom component overrides

Block Components

Individual components for each content block type.

Paragraph

Renders rich text paragraphs with formatting.

<Paragraph segments={[
  { text: "Hello ", bold: true },
  { text: "world", italic: true },
]} />

Heading

Renders headings with specified level (1-6).

<Heading level={2}>Section Title</Heading>

List

Renders ordered or unordered lists with nesting support.

<List
  listType="unordered"
  items={[
    { content: [{ text: "Item 1" }] },
    { content: [{ text: "Item 2" }], children: [
      { content: [{ text: "Nested item" }] }
    ]},
  ]}
/>

Table

Renders data tables with headers.

<Table
  headers={["Feature", "Status"]}
  rows={[
    { cells: [
      { content: [{ text: "SSR" }] },
      { content: [{ text: "Supported" }] }
    ]}
  ]}
  caption="Feature comparison"
/>

CodeBlock

Renders code snippets with optional language.

<CodeBlock
  code="const x = 1;"
  language="javascript"
/>

Callout

Renders tip, warning, note, or example callouts.

<Callout type="tip" content="Pro tip: Use ISR for best performance." />

BlockQuote

Renders block quotes with optional attribution.

<BlockQuote
  content={[{ segments: [{ text: "The best code is no code." }] }]}
  attribution="Jeff Atwood"
/>

Image

Renders images with alt text and optional caption.

<Image
  src="/diagram.png"
  alt="Architecture diagram"
  caption="System architecture overview"
/>

Article Components

Components for article-specific content.

FAQ

Renders FAQ section with question-answer pairs.

<FAQ items={article.content.faq} />

Sources

Renders source citations with links.

<Sources citations={article.content.sources} />

CTA

Renders call-to-action section.

<CTA
  text="Ready to get started?"
  buttonText="Sign up free"
  targetUrl="/signup"
/>

Component Overrides

Override any component to customize rendering:

import { ArticleRenderer, FormattedText } from "@trident/client/components";

<ArticleRenderer
  article={article}
  components={{
    Heading: ({ level, children }) => (
      <h2 className={`text-${4-level}xl font-bold text-blue-600`}>
        {children}
      </h2>
    ),
    Paragraph: ({ segments }) => (
      <p className="text-gray-700 leading-relaxed my-4">
        {segments.map((seg, i) => (
          <FormattedText key={i} {...seg} />
        ))}
      </p>
    ),
    Callout: ({ type, content }) => (
      <aside className={`p-4 rounded-lg border-l-4 border-${
        type === "warning" ? "yellow" : "green"
      }-500 bg-${type === "warning" ? "yellow" : "green"}-50`}>
        <strong>{type.toUpperCase()}:</strong> {content}
      </aside>
    ),
  }}
/>