RichAPI design system

Data and code

Code block with tabs

bash
curl -X POST https://api.richapi.ai/api/v1/email_finder \
  -H "x-api-key: $RICHAPI_KEY" \
  -H "Content-Type: application/json" \
  -d '{"domain":"personio.com","full_name":"Lena Hartmann"}'
JSX
<CodeBlock tabs={[
  {
    label: "cURL",
    code: `curl -X POST https://api.richapi.ai/api/v1/email_finder \\
  -H "x-api-key: $RICHAPI_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{"domain":"personio.com","full_name":"Lena Hartmann"}'`,
    language: "bash",
  },
  {
    label: "Node",
    code: `const response = await fetch("https://api.richapi.ai/api/v1/email_finder", {
  method: "POST",
  headers: {
    "x-api-key": process.env.RICHAPI_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({"domain":"personio.com","full_name":"Lena Hartmann"}),
});

console.log(await response.json());`,
    language: "javascript",
  },
  {
    label: "Python",
    code: `import os, requests

response = requests.post(
    "https://api.richapi.ai/api/v1/email_finder",
    headers={"x-api-key": os.environ["RICHAPI_KEY"]},
    json={"domain":"personio.com","full_name":"Lena Hartmann"},
)

print(response.json())`,
    language: "python",
  },
]} />
HTML
<div class="ra-code"><div class="ra-code__head"><button type="button" class="ra-code__tab" aria-pressed="true">cURL</button><button type="button" class="ra-code__tab" aria-pressed="false">Node</button><button type="button" class="ra-code__tab" aria-pressed="false">Python</button><span class="ra-code__lang">bash</span><button type="button" class="ra-btn ra-btn--ghost ra-btn--sm">Copy</button><span class="ra-sr-only" aria-live="polite"></span></div><pre class="ra-code__pre"><code data-language="bash"><span class="ra-code__keyword">curl</span><span class="ra-code__flag"> -X</span> POST https://api.richapi.ai/api/v1/email_finder \
 <span class="ra-code__flag"> -H</span> <span class="ra-code__str">&quot;x-api-key: $RICHAPI_KEY&quot;</span> \
 <span class="ra-code__flag"> -H</span> <span class="ra-code__str">&quot;Content-Type: application/json&quot;</span> \
 <span class="ra-code__flag"> -d</span> <span class="ra-code__str">&#x27;{&quot;domain&quot;:&quot;personio.com&quot;,&quot;full_name&quot;:&quot;Lena Hartmann&quot;}&#x27;</span></code></pre></div>

Code with key bar

bash
export RICHAPI_KEY="rk_live••••abcd"
curl -X POST https://api.richapi.ai/api/v1/email_finder \
  -H "x-api-key: $RICHAPI_KEY" \
  -H "Content-Type: application/json" \
  -d '{"domain":"personio.com","full_name":"Lena Hartmann"}'
This exact request · 1 credit
JSX
<CodeBlock tabs={[
  {
    label: "cURL",
    code: `curl -X POST https://api.richapi.ai/api/v1/email_finder \\
  -H "x-api-key: $RICHAPI_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{"domain":"personio.com","full_name":"Lena Hartmann"}'`,
    language: "bash",
  },
  {
    label: "Python",
    code: `import os, requests

response = requests.post(
    "https://api.richapi.ai/api/v1/email_finder",
    headers={"x-api-key": os.environ["RICHAPI_KEY"]},
    json={"domain":"personio.com","full_name":"Lena Hartmann"},
)

print(response.json())`,
    language: "python",
  },
  {
    label: "Node",
    code: `const response = await fetch("https://api.richapi.ai/api/v1/email_finder", {
  method: "POST",
  headers: {
    "x-api-key": process.env.RICHAPI_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({"domain":"personio.com","full_name":"Lena Hartmann"}),
});

console.log(await response.json());`,
    language: "javascript",
  },
]} header={<code>export RICHAPI_KEY="rk_live••••abcd"</code>
<Button size="sm" tone="dark">Reveal</Button>
<CopyButton value={"export RICHAPI_KEY=\"rk_live_full_key\""} />} footer={<span>This exact request · 1 credit</span>} />
HTML
<div class="ra-code"><div class="ra-code__head"><button type="button" class="ra-code__tab" aria-pressed="true">cURL</button><button type="button" class="ra-code__tab" aria-pressed="false">Python</button><button type="button" class="ra-code__tab" aria-pressed="false">Node</button><span class="ra-code__lang">bash</span><button type="button" class="ra-btn ra-btn--ghost ra-btn--sm">Copy</button><span class="ra-sr-only" aria-live="polite"></span></div><div class="ra-code__bar"><code>export RICHAPI_KEY=&quot;rk_live••••abcd&quot;</code><button type="button" class="ra-btn ra-btn--sm ra-btn--dark">Reveal</button><button type="button" class="ra-btn ra-btn--ghost ra-btn--sm">Copy</button><span class="ra-sr-only" aria-live="polite"></span></div><pre class="ra-code__pre"><code data-language="bash"><span class="ra-code__keyword">curl</span><span class="ra-code__flag"> -X</span> POST https://api.richapi.ai/api/v1/email_finder \
 <span class="ra-code__flag"> -H</span> <span class="ra-code__str">&quot;x-api-key: $RICHAPI_KEY&quot;</span> \
 <span class="ra-code__flag"> -H</span> <span class="ra-code__str">&quot;Content-Type: application/json&quot;</span> \
 <span class="ra-code__flag"> -d</span> <span class="ra-code__str">&#x27;{&quot;domain&quot;:&quot;personio.com&quot;,&quot;full_name&quot;:&quot;Lena Hartmann&quot;}&#x27;</span></code></pre><div class="ra-code__foot"><span>This exact request · 1 credit</span></div></div>

Code block with footer

Requestbash
curl -X POST https://api.richapi.ai/api/v1/email_finder \
  -H "x-api-key: $RICHAPI_KEY" \
  -H "Content-Type: application/json" \
  -d '{"domain":"personio.com","full_name":"Lena Hartmann"}'
1 credit · 312 ms · run_8f2a
JSX
<CodeBlock title="Request" language="bash" code={`curl -X POST https://api.richapi.ai/api/v1/email_finder \\
  -H "x-api-key: $RICHAPI_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{"domain":"personio.com","full_name":"Lena Hartmann"}'`} footer="1 credit · 312 ms · run_8f2a" />
HTML
<div class="ra-code"><div class="ra-code__head"><span class="ra-code__title">Request</span><span class="ra-code__lang">bash</span><button type="button" class="ra-btn ra-btn--ghost ra-btn--sm">Copy</button><span class="ra-sr-only" aria-live="polite"></span></div><pre class="ra-code__pre"><code data-language="bash"><span class="ra-code__keyword">curl</span><span class="ra-code__flag"> -X</span> POST https://api.richapi.ai/api/v1/email_finder \
 <span class="ra-code__flag"> -H</span> <span class="ra-code__str">&quot;x-api-key: $RICHAPI_KEY&quot;</span> \
 <span class="ra-code__flag"> -H</span> <span class="ra-code__str">&quot;Content-Type: application/json&quot;</span> \
 <span class="ra-code__flag"> -d</span> <span class="ra-code__str">&#x27;{&quot;domain&quot;:&quot;personio.com&quot;,&quot;full_name&quot;:&quot;Lena Hartmann&quot;}&#x27;</span></code></pre><div class="ra-code__foot">1 credit · 312 ms · run_8f2a</div></div>

JSON response

{
  "success": true,
  "data": [
    {
      "email": "lena.hartmann@personio.com",
      "status": "Verified",
      "provider": "provider 3 of 12",
      "confidence": 0.98
    }
  ],
  "credits": 5,
  "cached": false,
  "error": null
}
JSX
<Json value={{
  success: true,
  data: [
    {
      email: "lena.hartmann@personio.com",
      status: "Verified",
      provider: "provider 3 of 12",
      confidence: 0.98,
    },
  ],
  credits: 5,
  cached: false,
  error: null,
}} />
HTML
<pre class="ra-json">{
  <span class="ra-json__key">&quot;success&quot;</span>: <span class="ra-json__bool">true</span>,
  <span class="ra-json__key">&quot;data&quot;</span>: [
    {
      <span class="ra-json__key">&quot;email&quot;</span>: <span class="ra-json__str">&quot;lena.hartmann@personio.com&quot;</span>,
      <span class="ra-json__key">&quot;status&quot;</span>: <span class="ra-json__str">&quot;Verified&quot;</span>,
      <span class="ra-json__key">&quot;provider&quot;</span>: <span class="ra-json__str">&quot;provider 3 of 12&quot;</span>,
      <span class="ra-json__key">&quot;confidence&quot;</span>: <span class="ra-json__num">0.98</span>
    }
  ],
  <span class="ra-json__key">&quot;credits&quot;</span>: <span class="ra-json__num">5</span>,
  <span class="ra-json__key">&quot;cached&quot;</span>: <span class="ra-json__bool">false</span>,
  <span class="ra-json__key">&quot;error&quot;</span>: <span class="ra-json__null">null</span>
}</pre>

Copy button

JSX
<CopyButton value="curl -X POST https://api.richapi.ai/api/v1/email_finder" />
HTML
<button type="button" class="ra-btn ra-btn--ghost ra-btn--sm">Copy</button><span class="ra-sr-only" aria-live="polite"></span>

Key and value

Run ID
run_8f2a91
Endpoint
linkedin_job_search
Provider
Claude Code
Latency
1,840 ms
Status
200
JSX
<KeyValue items={[
  { label: "Run ID", value: "run_8f2a91", mono: true },
  { label: "Endpoint", value: "linkedin_job_search" },
  { label: "Provider", value: "Claude Code" },
  { label: "Latency", value: "1,840 ms", mono: true },
  { label: "Status", value: "200" },
]} />
HTML
<div class="g-frame g-frame--md"><dl class="ra-kv"><div class="ra-kv__row"><dt class="ra-kv__label">Run ID</dt><dd class="ra-kv__value ra-kv__value--mono">run_8f2a91</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Endpoint</dt><dd class="ra-kv__value">linkedin_job_search</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Provider</dt><dd class="ra-kv__value">Claude Code</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Latency</dt><dd class="ra-kv__value ra-kv__value--mono">1,840 ms</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Status</dt><dd class="ra-kv__value">200</dd></div></dl></div>

Two columns

Run ID
run_7c11e4
Endpoint
linkedin_job_search
Source
Claude Code
Rows
25
Latency
1,620 ms
Status
200
JSX
<KeyValue columns={2} items={[
  { label: "Run ID", value: "run_7c11e4", mono: true },
  { label: "Endpoint", value: "linkedin_job_search" },
  { label: "Source", value: "Claude Code" },
  { label: "Rows", value: "25", mono: true },
  { label: "Latency", value: "1,620 ms", mono: true },
  { label: "Status", value: "200" },
]} />
HTML
<div class="g-frame g-frame--lg"><dl class="ra-kv ra-kv--2"><div class="ra-kv__row"><dt class="ra-kv__label">Run ID</dt><dd class="ra-kv__value ra-kv__value--mono">run_7c11e4</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Endpoint</dt><dd class="ra-kv__value">linkedin_job_search</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Source</dt><dd class="ra-kv__value">Claude Code</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Rows</dt><dd class="ra-kv__value ra-kv__value--mono">25</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Latency</dt><dd class="ra-kv__value ra-kv__value--mono">1,620 ms</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Status</dt><dd class="ra-kv__value">200</dd></div></dl></div>

Receipt

Run ID
run_8f2a91
Endpoint
linkedin_job_search
Rows
25
Latency
1,840 ms
Charged1 credit

Empty results are free.

JSX
<Receipt rows={[
  { label: "Run ID", value: "run_8f2a91", mono: true },
  { label: "Endpoint", value: "linkedin_job_search" },
  { label: "Rows", value: "25", mono: true },
  { label: "Latency", value: "1,840 ms", mono: true },
]} total={{ label: "Charged", value: "1 credit" }} note="Empty results are free." actions={<Button variant="ghost">Ask about this run</Button>} />
HTML
<div class="g-frame g-frame--md"><div class="ra-receipt"><dl class="ra-kv"><div class="ra-kv__row"><dt class="ra-kv__label">Run ID</dt><dd class="ra-kv__value ra-kv__value--mono">run_8f2a91</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Endpoint</dt><dd class="ra-kv__value">linkedin_job_search</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Rows</dt><dd class="ra-kv__value ra-kv__value--mono">25</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">Latency</dt><dd class="ra-kv__value ra-kv__value--mono">1,840 ms</dd></div></dl><div class="ra-receipt__total"><span>Charged</span><b>1 credit</b></div><p class="ra-receipt__note">Empty results are free.</p><div class="ra-receipt__actions"><button type="button" class="ra-btn ra-btn--ghost">Ask about this run</button></div></div></div>

Table

Recent runs
EndpointStatusLatencyCredits
linkedin_job_search2001,840 ms2.5
email_finderEmpty4,210 ms0
web_scrape50430,000 ms0
JSX
<Table caption="Recent runs" columns={[
  { key: "ep", header: "Endpoint", mono: true },
  { key: "status", header: "Status" },
  { key: "ms", header: "Latency", align: "end", mono: true },
  { key: "cr", header: "Credits", align: "end", mono: true },
]} rows={[
  {
    ep: "linkedin_job_search",
    status: <Pill tone="ok">200</Pill>,
    ms: "1,840 ms",
    cr: "2.5",
  },
  {
    ep: "email_finder",
    status: <Pill tone="warn">Empty</Pill>,
    ms: "4,210 ms",
    cr: "0",
  },
  {
    ep: "web_scrape",
    status: <Pill tone="err">504</Pill>,
    ms: "30,000 ms",
    cr: "0",
  },
]} />
HTML
<div class="g-frame g-frame--lg"><div class="ra-table-wrap"><table class="ra-table"><caption class="ra-sr-only">Recent runs</caption><thead><tr><th scope="col" class="ra-table__th">Endpoint</th><th scope="col" class="ra-table__th">Status</th><th scope="col" class="ra-table__th ra-table__cell--end">Latency</th><th scope="col" class="ra-table__th ra-table__cell--end">Credits</th></tr></thead><tbody><tr><td class="ra-table__td ra-table__cell--mono">linkedin_job_search</td><td class="ra-table__td"><span class="ra-pill ra-pill--ok">200</span></td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">1,840 ms</td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">2.5</td></tr><tr><td class="ra-table__td ra-table__cell--mono">email_finder</td><td class="ra-table__td"><span class="ra-pill ra-pill--warn">Empty</span></td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">4,210 ms</td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">0</td></tr><tr><td class="ra-table__td ra-table__cell--mono">web_scrape</td><td class="ra-table__td"><span class="ra-pill ra-pill--err">504</span></td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">30,000 ms</td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">0</td></tr></tbody></table></div></div>

Empty table

Recent runs
EndpointStatusLatencyCredits
No runs yet
JSX
<Table caption="Recent runs" columns={[
  { key: "ep", header: "Endpoint", mono: true },
  { key: "status", header: "Status" },
  { key: "ms", header: "Latency", align: "end", mono: true },
  { key: "cr", header: "Credits", align: "end", mono: true },
]} rows={[]} empty="No runs yet" />
HTML
<div class="g-frame g-frame--lg"><div class="ra-table-wrap"><table class="ra-table"><caption class="ra-sr-only">Recent runs</caption><thead><tr><th scope="col" class="ra-table__th">Endpoint</th><th scope="col" class="ra-table__th">Status</th><th scope="col" class="ra-table__th ra-table__cell--end">Latency</th><th scope="col" class="ra-table__th ra-table__cell--end">Credits</th></tr></thead><tbody><tr><td class="ra-table__empty" colSpan="4">No runs yet</td></tr></tbody></table></div></div>

Clickable rows

Pass onRowClick from a client component to make rows clickable with Enter and Space. This static example sets highlight and maxHeight only.

Recent runs
EndpointStatusLatencyCredits
linkedin_job_search2001,840 ms2.5
email_finderEmpty4,210 ms0
web_scrape50430,000 ms0
JSX
<Table caption="Recent runs" columns={[
  { key: "ep", header: "Endpoint", mono: true },
  { key: "status", header: "Status" },
  { key: "ms", header: "Latency", align: "end", mono: true },
  { key: "cr", header: "Credits", align: "end", mono: true },
]} rows={[
  {
    ep: "linkedin_job_search",
    status: <Pill tone="ok">200</Pill>,
    ms: "1,840 ms",
    cr: "2.5",
  },
  {
    ep: "email_finder",
    status: <Pill tone="warn">Empty</Pill>,
    ms: "4,210 ms",
    cr: "0",
  },
  {
    ep: "web_scrape",
    status: <Pill tone="err">504</Pill>,
    ms: "30,000 ms",
    cr: "0",
  },
]} maxHeight={120} highlight={() => {}} />
HTML
<div class="g-frame g-frame--lg"><div class="ra-table-wrap ra-table-wrap--scroll" style="max-height:120px"><table class="ra-table"><caption class="ra-sr-only">Recent runs</caption><thead><tr><th scope="col" class="ra-table__th">Endpoint</th><th scope="col" class="ra-table__th">Status</th><th scope="col" class="ra-table__th ra-table__cell--end">Latency</th><th scope="col" class="ra-table__th ra-table__cell--end">Credits</th></tr></thead><tbody><tr><td class="ra-table__td ra-table__cell--mono">linkedin_job_search</td><td class="ra-table__td"><span class="ra-pill ra-pill--ok">200</span></td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">1,840 ms</td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">2.5</td></tr><tr data-highlight="true"><td class="ra-table__td ra-table__cell--mono">email_finder</td><td class="ra-table__td"><span class="ra-pill ra-pill--warn">Empty</span></td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">4,210 ms</td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">0</td></tr><tr><td class="ra-table__td ra-table__cell--mono">web_scrape</td><td class="ra-table__td"><span class="ra-pill ra-pill--err">504</span></td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">30,000 ms</td><td class="ra-table__td ra-table__cell--end ra-table__cell--mono">0</td></tr></tbody></table></div></div>

List

JSX
<List>
  <ListRow href="#run_8f2a91" leading={<Dot tone="ok" label="200" />} meta={"\"product designer\" · Bengaluru · 2 min ago"} trailing="2.5 cr">linkedin_job_search</ListRow>
  <ListRow href="#run_5d90b2" leading={<Dot tone="warn" label="Empty" />} meta="acme.io · Priya Shah · Yesterday" trailing="0 cr">email_finder</ListRow>
  <ListRow href="#run_1b04c9" leading={<Dot tone="err" label="504" />} meta="Timeout after 30s · 2 days ago" trailing="0 cr">web_scrape</ListRow>
</List>
HTML
<div class="g-frame g-frame--lg"><ul class="ra-list"><li class="ra-list__row"><a class="ra-list__inner" href="#run_8f2a91"><span class="ra-dot ra-dot--ok" role="img" aria-label="200"></span><div class="ra-list__main"><b>linkedin_job_search</b><small>&quot;product designer&quot; · Bengaluru · 2 min ago</small></div><div class="ra-list__trail">2.5 cr</div></a></li><li class="ra-list__row"><a class="ra-list__inner" href="#run_5d90b2"><span class="ra-dot ra-dot--warn" role="img" aria-label="Empty"></span><div class="ra-list__main"><b>email_finder</b><small>acme.io · Priya Shah · Yesterday</small></div><div class="ra-list__trail">0 cr</div></a></li><li class="ra-list__row"><a class="ra-list__inner" href="#run_1b04c9"><span class="ra-dot ra-dot--err" role="img" aria-label="504"></span><div class="ra-list__main"><b>web_scrape</b><small>Timeout after 30s · 2 days ago</small></div><div class="ra-list__trail">0 cr</div></a></li></ul></div>

Pager

JSX
<Pager page={2} pageCount={5} prevHref="?page=1" nextHref="?page=3" />
HTML
<nav class="ra-pager" aria-label="Pagination"><a class="ra-btn ra-btn--sm" href="?page=1">Previous</a><span class="ra-pager__label">Page 2 of 5</span><a class="ra-btn ra-btn--sm" href="?page=3">Next</a></nav>

Steps

  1. Completed: Create an API key

    Keys start with ra_live_ and work for REST and MCP.

  2. Current step: Make your first call

    Run Email Finder from the playground or with curl.

  3. Connect the MCP server

    Add mcp.richapi.ai/mcp to Claude or Cursor.

JSX
<Steps items={[
  {
    title: "Create an API key",
    description: "Keys start with ra_live_ and work for REST and MCP.",
    status: "done",
  },
  {
    title: "Make your first call",
    description: "Run Email Finder from the playground or with curl.",
    status: "current",
  },
  {
    title: "Connect the MCP server",
    description: "Add mcp.richapi.ai/mcp to Claude or Cursor.",
    status: "todo",
  },
]} />
HTML
<div class="g-frame g-frame--md"><ol class="ra-steps"><li class="ra-steps__item ra-steps__item--done"><span class="ra-steps__n" aria-hidden="true"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"></path></svg></span><div><b class="ra-steps__title"><span class="ra-sr-only">Completed: </span>Create an API key</b><p class="ra-steps__desc">Keys start with ra_live_ and work for REST and MCP.</p></div></li><li class="ra-steps__item" aria-current="step"><span class="ra-steps__n" aria-hidden="true">2</span><div><b class="ra-steps__title"><span class="ra-sr-only">Current step: </span>Make your first call</b><p class="ra-steps__desc">Run Email Finder from the playground or with curl.</p></div></li><li class="ra-steps__item"><span class="ra-steps__n" aria-hidden="true">3</span><div><b class="ra-steps__title">Connect the MCP server</b><p class="ra-steps__desc">Add mcp.richapi.ai/mcp to Claude or Cursor.</p></div></li></ol></div>

Timeline

  1. Request receivedPOST /v1/email_finder
  2. Provider calledWaterfall step 1 of 3
  3. Response returned200 in 1,840 ms
  4. Billed3 credits
  5. Not billedNo results found
  6. Provider waterfallTimed out after 30.0 s
JSX
<Timeline items={[
  {
    time: "12:04:01",
    title: "Request received",
    meta: "POST /v1/email_finder",
    tone: "ok",
  },
  {
    time: "12:04:01",
    title: "Provider called",
    meta: "Waterfall step 1 of 3",
    tone: "brand",
  },
  {
    time: "12:04:03",
    title: "Response returned",
    meta: "200 in 1,840 ms",
    tone: "ok",
  },
  {
    time: "12:04:03",
    title: "Billed",
    meta: "3 credits",
    tone: "neutral",
  },
  {
    time: "12:04:04",
    title: "Not billed",
    meta: "No results found",
    tone: "warn",
  },
  {
    time: "12:04:34",
    title: "Provider waterfall",
    meta: "Timed out after 30.0 s",
    tone: "err",
  },
]} />
HTML
<div class="g-frame g-frame--md"><ol class="ra-timeline"><li class="ra-timeline__item"><span class="ra-dot ra-dot--ok" aria-hidden="true"></span><div><b>Request received</b><small>POST /v1/email_finder</small></div><time class="ra-timeline__time">12:04:01</time></li><li class="ra-timeline__item"><span class="ra-dot ra-dot--brand" aria-hidden="true"></span><div><b>Provider called</b><small>Waterfall step 1 of 3</small></div><time class="ra-timeline__time">12:04:01</time></li><li class="ra-timeline__item"><span class="ra-dot ra-dot--ok" aria-hidden="true"></span><div><b>Response returned</b><small>200 in 1,840 ms</small></div><time class="ra-timeline__time">12:04:03</time></li><li class="ra-timeline__item"><span class="ra-dot" aria-hidden="true"></span><div><b>Billed</b><small>3 credits</small></div><time class="ra-timeline__time">12:04:03</time></li><li class="ra-timeline__item"><span class="ra-dot ra-dot--warn" aria-hidden="true"></span><div><b>Not billed</b><small>No results found</small></div><time class="ra-timeline__time">12:04:04</time></li><li class="ra-timeline__item"><span class="ra-dot ra-dot--err" aria-hidden="true"></span><div><b>Provider waterfall</b><small>Timed out after 30.0 s</small></div><time class="ra-timeline__time">12:04:34</time></li></ol></div>

Rail

  1. 1Completed: Key
  2. 2Current step: First call
  3. 3Connect MCP
  4. 4Invite team
JSX
<Rail steps={["Key", "First call", "Connect MCP", "Invite team"]} current={1} />
HTML
<ol class="ra-rail"><li class="ra-rail__step ra-rail__step--done"><span class="ra-rail__n">1</span><span class="ra-sr-only">Completed: </span>Key</li><li class="ra-rail__step ra-rail__step--now" aria-current="step"><span class="ra-rail__n">2</span><span class="ra-sr-only">Current step: </span>First call</li><li class="ra-rail__step"><span class="ra-rail__n">3</span>Connect MCP</li><li class="ra-rail__step"><span class="ra-rail__n">4</span>Invite team</li></ol>

Calls per day

Sep 30Oct 13
  • Enrichment Pass days
  • Weekend
Calls per day, last 14 days
Sep 30412
Oct 1425
Oct 2418
Oct 3131
Oct 4127
Oct 5409
Oct 6421
Oct 7416
Oct 8430
Oct 9405
Oct 10124
Oct 11129
Oct 12419
Oct 13238
JSX
<BarChart label="Calls per day, last 14 days" data={[
  { label: "Sep 30", value: 412, tone: "brand" },
  { label: "Oct 1", value: 425, tone: "pass" },
  { label: "Oct 2", value: 418, tone: "pass" },
  { label: "Oct 3", value: 131, tone: "brand" },
  { label: "Oct 4", value: 127, tone: "brand" },
  { label: "Oct 5", value: 409, tone: "pass" },
  { label: "Oct 6", value: 421, tone: "pass" },
  { label: "Oct 7", value: 416, tone: "pass" },
  { label: "Oct 8", value: 430, tone: "pass" },
  { label: "Oct 9", value: 405, tone: "pass" },
  { label: "Oct 10", value: 124, tone: "brand" },
  { label: "Oct 11", value: 129, tone: "brand" },
  { label: "Oct 12", value: 419, tone: "pass" },
  { label: "Oct 13", value: 238, tone: "pass" },
]} legend={[
  { label: "Enrichment Pass days", tone: "pass" },
  { label: "Weekend", tone: "brand" },
]} />
HTML
<div class="g-frame g-frame--md"><figure class="ra-bars"><div class="ra-bars__plot" role="img" aria-label="Calls per day, last 14 days" style="height:160px"><div class="ra-bars__col"><i class="ra-bars__bar" style="height:95.81395348837209%" title="Sep 30: 412"></i></div><div class="ra-bars__col"><i class="ra-bars__bar ra-bars__bar--pass" style="height:98.83720930232558%" title="Oct 1: 425"></i></div><div class="ra-bars__col"><i class="ra-bars__bar ra-bars__bar--pass" style="height:97.20930232558139%" title="Oct 2: 418"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:30.465116279069765%" title="Oct 3: 131"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:29.53488372093023%" title="Oct 4: 127"></i></div><div class="ra-bars__col"><i class="ra-bars__bar ra-bars__bar--pass" style="height:95.11627906976744%" title="Oct 5: 409"></i></div><div class="ra-bars__col"><i class="ra-bars__bar ra-bars__bar--pass" style="height:97.90697674418605%" title="Oct 6: 421"></i></div><div class="ra-bars__col"><i class="ra-bars__bar ra-bars__bar--pass" style="height:96.74418604651163%" title="Oct 7: 416"></i></div><div class="ra-bars__col"><i class="ra-bars__bar ra-bars__bar--pass" style="height:100%" title="Oct 8: 430"></i></div><div class="ra-bars__col"><i class="ra-bars__bar ra-bars__bar--pass" style="height:94.18604651162791%" title="Oct 9: 405"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:28.837209302325583%" title="Oct 10: 124"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:30%" title="Oct 11: 129"></i></div><div class="ra-bars__col"><i class="ra-bars__bar ra-bars__bar--pass" style="height:97.44186046511628%" title="Oct 12: 419"></i></div><div class="ra-bars__col"><i class="ra-bars__bar ra-bars__bar--pass" style="height:55.348837209302324%" title="Oct 13: 238"></i></div></div><div class="ra-bars__axis"><span>Sep 30</span><span>Oct 13</span></div><figcaption><ul class="ra-legend"><li><i class="ra-legend__sw ra-legend__sw--pass" aria-hidden="true"></i>Enrichment Pass days</li><li><i class="ra-legend__sw" aria-hidden="true"></i>Weekend</li></ul></figcaption><table class="ra-sr-only"><caption>Calls per day, last 14 days</caption><tbody><tr><th scope="row">Sep 30</th><td>412</td></tr><tr><th scope="row">Oct 1</th><td>425</td></tr><tr><th scope="row">Oct 2</th><td>418</td></tr><tr><th scope="row">Oct 3</th><td>131</td></tr><tr><th scope="row">Oct 4</th><td>127</td></tr><tr><th scope="row">Oct 5</th><td>409</td></tr><tr><th scope="row">Oct 6</th><td>421</td></tr><tr><th scope="row">Oct 7</th><td>416</td></tr><tr><th scope="row">Oct 8</th><td>430</td></tr><tr><th scope="row">Oct 9</th><td>405</td></tr><tr><th scope="row">Oct 10</th><td>124</td></tr><tr><th scope="row">Oct 11</th><td>129</td></tr><tr><th scope="row">Oct 12</th><td>419</td></tr><tr><th scope="row">Oct 13</th><td>238</td></tr></tbody></table></figure></div>

Bundle and pass credits

Sep 30Oct 13
  • Bundle
  • Pass
  • Daily average
Credits per day, last 14 days · Daily average 295 cr
Sep 30247
Oct 1255 + 170
Oct 2251 + 167
Oct 379
Oct 476
Oct 5245 + 164
Oct 6253 + 168
Oct 7250 + 166
Oct 8258 + 172
Oct 9243 + 162
Oct 1074
Oct 1177
Oct 12251 + 168
Oct 13143 + 95
JSX
<BarChart label="Credits per day, last 14 days" data={[
  { label: "Sep 30", value: 247, stack: 0 },
  { label: "Oct 1", value: 255, stack: 170 },
  { label: "Oct 2", value: 251, stack: 167 },
  { label: "Oct 3", value: 79, stack: 0 },
  { label: "Oct 4", value: 76, stack: 0 },
  { label: "Oct 5", value: 245, stack: 164 },
  { label: "Oct 6", value: 253, stack: 168 },
  { label: "Oct 7", value: 250, stack: 166 },
  { label: "Oct 8", value: 258, stack: 172 },
  { label: "Oct 9", value: 243, stack: 162 },
  { label: "Oct 10", value: 74, stack: 0 },
  { label: "Oct 11", value: 77, stack: 0 },
  { label: "Oct 12", value: 251, stack: 168 },
  { label: "Oct 13", value: 143, stack: 95 },
]} projection={{ value: 295, label: "Daily average 295 cr" }} legend={[
  { label: "Bundle", tone: "brand" },
  { label: "Pass", tone: "pass" },
  { label: "Daily average", tone: "dash" },
]} />
HTML
<div class="g-frame g-frame--md"><figure class="ra-bars"><div class="ra-bars__plot" role="img" aria-label="Credits per day, last 14 days" style="height:160px"><div class="ra-bars__col"><i class="ra-bars__bar" style="height:57.44186046511628%" title="Sep 30: 247"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:59.30232558139535%" title="Oct 1: 255"></i><i class="ra-bars__bar ra-bars__bar--pass" style="height:39.53488372093023%" title="Oct 1: Pass 170"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:58.372093023255815%" title="Oct 2: 251"></i><i class="ra-bars__bar ra-bars__bar--pass" style="height:38.83720930232558%" title="Oct 2: Pass 167"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:18.372093023255815%" title="Oct 3: 79"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:17.674418604651162%" title="Oct 4: 76"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:56.97674418604651%" title="Oct 5: 245"></i><i class="ra-bars__bar ra-bars__bar--pass" style="height:38.139534883720934%" title="Oct 5: Pass 164"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:58.837209302325576%" title="Oct 6: 253"></i><i class="ra-bars__bar ra-bars__bar--pass" style="height:39.06976744186046%" title="Oct 6: Pass 168"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:58.139534883720934%" title="Oct 7: 250"></i><i class="ra-bars__bar ra-bars__bar--pass" style="height:38.604651162790695%" title="Oct 7: Pass 166"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:60%" title="Oct 8: 258"></i><i class="ra-bars__bar ra-bars__bar--pass" style="height:40%" title="Oct 8: Pass 172"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:56.51162790697675%" title="Oct 9: 243"></i><i class="ra-bars__bar ra-bars__bar--pass" style="height:37.67441860465116%" title="Oct 9: Pass 162"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:17.209302325581397%" title="Oct 10: 74"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:17.906976744186046%" title="Oct 11: 77"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:58.372093023255815%" title="Oct 12: 251"></i><i class="ra-bars__bar ra-bars__bar--pass" style="height:39.06976744186046%" title="Oct 12: Pass 168"></i></div><div class="ra-bars__col"><i class="ra-bars__bar" style="height:33.25581395348837%" title="Oct 13: 143"></i><i class="ra-bars__bar ra-bars__bar--pass" style="height:22.093023255813954%" title="Oct 13: Pass 95"></i></div><i class="ra-bars__proj" aria-hidden="true" style="bottom:68.6046511627907%"></i></div><div class="ra-bars__axis"><span>Sep 30</span><span>Oct 13</span></div><figcaption><ul class="ra-legend"><li><i class="ra-legend__sw" aria-hidden="true"></i>Bundle</li><li><i class="ra-legend__sw ra-legend__sw--pass" aria-hidden="true"></i>Pass</li><li><i class="ra-legend__sw ra-legend__sw--dash" aria-hidden="true"></i>Daily average</li></ul></figcaption><table class="ra-sr-only"><caption>Credits per day, last 14 days · Daily average 295 cr</caption><tbody><tr><th scope="row">Sep 30</th><td>247</td></tr><tr><th scope="row">Oct 1</th><td>255 + 170</td></tr><tr><th scope="row">Oct 2</th><td>251 + 167</td></tr><tr><th scope="row">Oct 3</th><td>79</td></tr><tr><th scope="row">Oct 4</th><td>76</td></tr><tr><th scope="row">Oct 5</th><td>245 + 164</td></tr><tr><th scope="row">Oct 6</th><td>253 + 168</td></tr><tr><th scope="row">Oct 7</th><td>250 + 166</td></tr><tr><th scope="row">Oct 8</th><td>258 + 172</td></tr><tr><th scope="row">Oct 9</th><td>243 + 162</td></tr><tr><th scope="row">Oct 10</th><td>74</td></tr><tr><th scope="row">Oct 11</th><td>77</td></tr><tr><th scope="row">Oct 12</th><td>251 + 168</td></tr><tr><th scope="row">Oct 13</th><td>143 + 95</td></tr></tbody></table></figure></div>

Sparkline

Calls, 7 days
2,384 25% up, better
JSX
<Stat label="Calls, 7 days" value="2,384" delta={{ value: "25%", direction: "up" }}>
  <Spark label="Calls per day, last 7 days" width={200} values={[409, 421, 416, 430, 405, 124, 129]} />
</Stat>
HTML
<div class="g-frame g-frame--sm"><div class="ra-stat"><div class="ra-stat__label ra-label">Calls, 7 days</div><div class="ra-stat__big"><b class="ra-stat__value">2,384</b><span class="ra-stat__delta ra-stat__delta--good"><span aria-hidden="true">↑</span> 25%<span class="ra-sr-only"> up, better</span></span></div><svg class="ra-spark" role="img" aria-label="Calls per day, last 7 days" viewBox="0 0 200 24" width="200" height="24"><polyline points="0,3.37 33.33,2.59 66.67,2.92 100,2 133.33,3.63 166.67,22 200,21.67"></polyline></svg></div></div>

Where credits went

  1. Enrich Profile5,120
  2. Enrich Company3,480
  3. Email Finder1,860
  4. Phone Finder940
  5. Other endpoints410
JSX
<RankList label="Where credits went, last 30 days" items={[
  {
    label: "Enrich Profile",
    value: 5120,
    href: "/usage?ep=enrich_profile",
    tone: "pass",
  },
  {
    label: "Enrich Company",
    value: 3480,
    href: "/usage?ep=enrich_company",
    tone: "pass",
  },
  {
    label: "Email Finder",
    value: 1860,
    href: "/usage?ep=email_finder",
  },
  {
    label: "Phone Finder",
    value: 940,
    href: "/usage?ep=phone_finder",
  },
  { label: "Other endpoints", value: 410 },
]} />
HTML
<div class="g-frame g-frame--md"><ol class="ra-rank" aria-label="Where credits went, last 30 days"><li><a class="ra-rank__row" href="/usage?ep=enrich_profile"><span class="ra-rank__top"><span>Enrich Profile</span><span class="ra-rank__value">5,120</span></span><span class="ra-rank__track" aria-hidden="true"><i class="ra-rank__bar ra-rank__bar--pass" style="width:43.353090601185436%"></i></span></a></li><li><a class="ra-rank__row" href="/usage?ep=enrich_company"><span class="ra-rank__top"><span>Enrich Company</span><span class="ra-rank__value">3,480</span></span><span class="ra-rank__track" aria-hidden="true"><i class="ra-rank__bar ra-rank__bar--pass" style="width:29.466553767993226%"></i></span></a></li><li><a class="ra-rank__row" href="/usage?ep=email_finder"><span class="ra-rank__top"><span>Email Finder</span><span class="ra-rank__value">1,860</span></span><span class="ra-rank__track" aria-hidden="true"><i class="ra-rank__bar" style="width:15.749364944961897%"></i></span></a></li><li><a class="ra-rank__row" href="/usage?ep=phone_finder"><span class="ra-rank__top"><span>Phone Finder</span><span class="ra-rank__value">940</span></span><span class="ra-rank__track" aria-hidden="true"><i class="ra-rank__bar" style="width:7.959356477561388%"></i></span></a></li><li><div class="ra-rank__row"><span class="ra-rank__top"><span>Other endpoints</span><span class="ra-rank__value">410</span></span><span class="ra-rank__track" aria-hidden="true"><i class="ra-rank__bar" style="width:3.4716342082980525%"></i></span></div></li></ol></div>

Legend

  • Bundle
  • Enrichment Pass
  • Daily average 385 cr
JSX
<Legend items={[
  { label: "Bundle" },
  { label: "Enrichment Pass", swatch: "pass" },
  { label: "Daily average 385 cr", swatch: "dash" },
]} />
HTML
<ul class="ra-legend"><li><i class="ra-legend__sw" aria-hidden="true"></i>Bundle</li><li><i class="ra-legend__sw ra-legend__sw--pass" aria-hidden="true"></i>Enrichment Pass</li><li><i class="ra-legend__sw ra-legend__sw--dash" aria-hidden="true"></i>Daily average 385 cr</li></ul>

Cost

5 crfree on miss0.1 crfree
JSX
<Cost credits={5} note="free on miss" />
<Cost credits={0.1} />
<Cost credits={0} />
HTML
<div class="g-frame g-frame--row" style="gap:32px;align-items:stretch"><span class="ra-cost"><span class="ra-cost__value">5 cr</span><small>free on miss</small></span><span class="ra-cost"><span class="ra-cost__value">0.1 cr</span></span><span class="ra-cost"><span class="ra-cost__value">free</span></span></div>

Send to support

Send to supportA person reads this with the context below attached.
JSX
<Handoff description="A person reads this with the context below attached." defaultValue={`Context attached:
· run_8f2a · Enrich Profile · 5 cr

My question: `} cancel={<Button type="button" variant="ghost" size="sm">Cancel</Button>} />
HTML
<div class="g-frame g-frame--md"><form class="ra-handoff" aria-labelledby="_R_0_"><b id="_R_0_">Send to support</b><small>A person reads this with the context below attached.</small><textarea id="_R_7_" class="ra-input ra-textarea ra-handoff__input" name="message" aria-label="Message to support">Context attached:
· run_8f2a · Enrich Profile · 5 cr

My question: </textarea><div class="ra-handoff__actions"><button type="submit" class="ra-btn ra-btn--primary ra-btn--sm">Send to support</button><button type="button" class="ra-btn ra-btn--ghost ra-btn--sm">Cancel</button></div></form></div>

Relative time

JSX
<RelativeTime value={1791900270000} now={1791900300000} />
<RelativeTime value={1791899580000} now={1791900300000} />
<RelativeTime value={1791889500000} now={1791900300000} />
<RelativeTime value={1791468300000} now={1791900300000} />
HTML
<div class="g-frame g-frame--stack"><time class="ra-time" dateTime="2026-10-13T14:04:30.000Z" title="Oct 13, 14:04 UTC">just now</time><time class="ra-time" dateTime="2026-10-13T13:53:00.000Z" title="Oct 13, 13:53 UTC">12 min ago</time><time class="ra-time" dateTime="2026-10-13T11:05:00.000Z" title="Oct 13, 11:05 UTC">3 h ago</time><time class="ra-time" dateTime="2026-10-08T14:05:00.000Z" title="Oct 8, 14:05 UTC">5 days ago</time></div>

Number formats

formatCredits(1284)
1,284.00
formatNumber(1284.567)
1,284.57
formatUsd(12.5)
$12.50
JSX
<KeyValue items={[
  {
    label: "formatCredits(1284)",
    value: "1,284.00",
    mono: true,
  },
  {
    label: "formatNumber(1284.567)",
    value: "1,284.57",
    mono: true,
  },
  { label: "formatUsd(12.5)", value: "$12.50", mono: true },
]} />
HTML
<div class="g-frame g-frame--md"><dl class="ra-kv"><div class="ra-kv__row"><dt class="ra-kv__label">formatCredits(1284)</dt><dd class="ra-kv__value ra-kv__value--mono">1,284.00</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">formatNumber(1284.567)</dt><dd class="ra-kv__value ra-kv__value--mono">1,284.57</dd></div><div class="ra-kv__row"><dt class="ra-kv__label">formatUsd(12.5)</dt><dd class="ra-kv__value ra-kv__value--mono">$12.50</dd></div></dl></div>