RichAPI design system

App layout and Ask

Sidebar

JSX
<Sidebar logo={<img src="../dist/assets/logos/richapi-logo-light.svg" alt="RichAPI" height={24} />} team={<TeamSwitcher name="Acme Growth" plan="Starter" />} footer={<Segmented label="Theme" defaultValue="light" options={[
  { value: "light", label: "Light" },
  { value: "dark", label: "Dark" },
]} />
<UserRow name="Priya Shah" email="priya@acme.com" />}>
  <NavGroup label="Build">
    <NavItem href="#home" current icon={<svg className="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M3 11 12 4l9 7M5 10v10h14V10" />
    </svg>}>Home</NavItem>
    <NavItem href="#endpoints" icon={<svg className="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M4 6h16M4 12h16M4 18h10" />
    </svg>}>Endpoints</NavItem>
    <NavItem href="#mcp" icon={<svg className="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M8 8h8v8H8z" />
    </svg>}>MCP</NavItem>
    <NavItem href="#agents" badge="1" icon={<svg className="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 4v4M5 12h14M7 20h10" />
    </svg>}>Agents</NavItem>
  </NavGroup>
  <NavGroup label="Account">
    <NavItem href="#usage" icon={<svg className="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M4 20V10M10 20V4M16 20v-8M22 20H2" />
    </svg>}>Usage</NavItem>
    <NavItem href="#keys" icon={<svg className="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M14 10a4 4 0 1 0-3 3.9L20 21v-3h-3v-3" />
    </svg>}>Keys</NavItem>
    <NavItem href="#billing" icon={<svg className="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M3 7h18v10H3zM3 11h18" />
    </svg>}>Billing</NavItem>
  </NavGroup>
</Sidebar>
HTML
<link rel="preload" as="image" href="../dist/assets/logos/richapi-logo-light.svg"/><div class="g-frame g-frame--row" style="height:560px;gap:0;flex-wrap:nowrap;align-items:stretch"><aside class="ra-side" aria-label="Main navigation"><div class="ra-side__logo"><img src="../dist/assets/logos/richapi-logo-light.svg" alt="RichAPI" height="24"/></div><button type="button" class="ra-team"><span class="ra-avatar" role="img" aria-label="Acme Growth">AG</span><span><b>Acme Growth</b><small>Starter</small></span><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button><nav class="ra-nav"><div class="ra-nav__group"><span class="ra-nav__label ra-label">Build</span><ul class="ra-nav__list"><li><a class="ra-nav__item" href="#home" aria-current="page"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 11 12 4l9 7M5 10v10h14V10"></path></svg><span>Home</span></a></li><li><a class="ra-nav__item" href="#endpoints"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h10"></path></svg><span>Endpoints</span></a></li><li><a class="ra-nav__item" href="#mcp"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 8h8v8H8z"></path></svg><span>MCP</span></a></li><li><a class="ra-nav__item" href="#agents"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v4M5 12h14M7 20h10"></path></svg><span>Agents</span><span class="ra-nav__badge">1</span></a></li></ul></div><div class="ra-nav__group"><span class="ra-nav__label ra-label">Account</span><ul class="ra-nav__list"><li><a class="ra-nav__item" href="#usage"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"></path></svg><span>Usage</span></a></li><li><a class="ra-nav__item" href="#keys"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 10a4 4 0 1 0-3 3.9L20 21v-3h-3v-3"></path></svg><span>Keys</span></a></li><li><a class="ra-nav__item" href="#billing"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7h18v10H3zM3 11h18"></path></svg><span>Billing</span></a></li></ul></div></nav><div class="ra-side__foot"><div class="ra-seg" role="group" aria-label="Theme"><button type="button" class="ra-seg__item" aria-pressed="true">Light</button><button type="button" class="ra-seg__item" aria-pressed="false">Dark</button></div><div class="ra-user"><span class="ra-avatar" role="img" aria-label="Priya Shah">PS</span><span><b>Priya Shah</b><small>priya@acme.com</small></span></div></div></aside></div>

Mobile top bar

RichAPI
Build
JSX
<MobileTop logo={<img src="../dist/assets/logos/richapi-logo-light.svg" alt="RichAPI" height={24} />} menu={<NavGroup label="Build">
  <NavItem href="#home" current>Home</NavItem>
  <NavItem href="#endpoints">Endpoints</NavItem>
  <NavItem href="#usage">Usage</NavItem>
</NavGroup>} />
HTML
<link rel="preload" as="image" href="../dist/assets/logos/richapi-logo-light.svg"/><div class="g-frame gallery-mobile-top" style="min-height:280px"><div class="ra-mobile-top"><img src="../dist/assets/logos/richapi-logo-light.svg" alt="RichAPI" height="24"/><details class="ra-mobile-top__menu"><summary class="ra-btn ra-btn--ghost ra-btn--icon" aria-label="Menu"><svg class="ra-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"></path></svg></summary><div class="ra-mobile-top__panel"><div class="ra-nav__group"><span class="ra-nav__label ra-label">Build</span><ul class="ra-nav__list"><li><a class="ra-nav__item" href="#home" aria-current="page"><span>Home</span></a></li><li><a class="ra-nav__item" href="#endpoints"><span>Endpoints</span></a></li><li><a class="ra-nav__item" href="#usage"><span>Usage</span></a></li></ul></div></div></details></div></div>

Page header

Usage

Usage

Every call your team made in the last 30 days.

JSX
<PageHeader eyebrow="Usage" title="Usage" description="Every call your team made in the last 30 days." actions={<Button>Export CSV</Button>} />
HTML
<header class="ra-page-head"><div><span class="ra-label">Usage</span><h1 class="ra-page-head__title">Usage</h1><p class="ra-page-head__desc">Every call your team made in the last 30 days.</p></div><div class="ra-page-head__actions"><button type="button" class="ra-btn">Export CSV</button></div></header>

Long text

Long names and emails truncate with an ellipsis. The page header wraps its actions under the title.

SVSakshi Vermasakshi.verma@a-very-long-company-domain.com

LinkedIn Company Employees Search

JSX
<TeamSwitcher name="TexAu Growth Engineering Team" plan="Starter + Pass · 12 members" />
<UserRow name="Sakshi Verma" email="sakshi.verma@a-very-long-company-domain.com" />
<PageHeader title="LinkedIn Company Employees Search" actions={<Button>Export CSV</Button>
<Button variant="primary">Run search</Button>} />
HTML
<div class="g-frame g-frame--sm g-frame--stack"><button type="button" class="ra-team"><span class="ra-avatar" role="img" aria-label="TexAu Growth Engineering Team">TG</span><span><b>TexAu Growth Engineering Team</b><small>Starter + Pass · 12 members</small></span><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button><div class="ra-user"><span class="ra-avatar" role="img" aria-label="Sakshi Verma">SV</span><span><b>Sakshi Verma</b><small>sakshi.verma@a-very-long-company-domain.com</small></span></div><header class="ra-page-head"><div><h1 class="ra-page-head__title">LinkedIn Company Employees Search</h1></div><div class="ra-page-head__actions"><button type="button" class="ra-btn">Export CSV</button><button type="button" class="ra-btn ra-btn--primary">Run search</button></div></header></div>

Ask panel

JSX
<AskPanel context="Reads your runs, balance, plan and key names." footer={<Composer onSubmit={() => {}} hint="Answers cite your run IDs" />}>
  <Thread>
    <Message from="user">Why did run_1b04c9 fail?</Message>
    <Message from="ai">
      The web_scrape call timed out after 30s with an HTTP 504. It retried twice and was not billed. See 
      <Citation href="#run_1b04c9">run_1b04c9</Citation>
      .
    </Message>
  </Thread>
</AskPanel>
HTML
<div class="g-frame g-frame--md" style="height:420px"><aside class="ra-ask" aria-label="Ask RichAPI"><div class="ra-ask__head"><b>Ask RichAPI</b><span class="ra-ask__actions"></span></div><div class="ra-ask__context">Reads your runs, balance, plan and key names.</div><div class="ra-thread" aria-live="polite"><div class="ra-msg ra-msg--user"><div class="ra-msg__body"><span class="ra-sr-only">You: </span>Why did run_1b04c9 fail?</div></div><div class="ra-msg ra-msg--ai"><span class="ra-msg__who">RichAPI</span><div class="ra-msg__body">The web_scrape call timed out after 30s with an HTTP 504. It retried twice and was not billed. See <a class="ra-cite" href="#run_1b04c9">run_1b04c9</a>.</div></div></div><div class="ra-ask__foot"><form class="ra-composer"><textarea class="ra-composer__input" rows="1" aria-label="Message" placeholder="Ask about a run, your credits, or what to call…"></textarea><button type="submit" class="ra-btn ra-btn--primary ra-btn--sm ra-btn--icon" aria-label="Send"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m22 2-7 20-4-9-9-4Z"></path><path d="M22 2 11 13"></path></svg></button></form><small class="ra-composer__hint">Answers cite your run IDs</small></div></aside></div>

Context explainer

The context chip opens a native details with what Ask can read.

JSX
<AskPanel context={Reading 
<b>run_8f2a</b>} contextInfo="Ask RichAPI can read your team's runs (request, response, receipt), balance, plan and key names. It never sees full key values and never spends credits or changes settings without your confirmation.">
  <Thread>
    <Message from="user">Why did run_8f2a cost 5 credits?</Message>
  </Thread>
</AskPanel>
HTML
<div class="g-frame g-frame--md" style="height:260px"><aside class="ra-ask" aria-label="Ask RichAPI"><div class="ra-ask__head"><b>Ask RichAPI</b><span class="ra-ask__actions"></span></div><details class="ra-ask__context"><summary>Reading <b>run_8f2a</b></summary><p class="ra-ask__explain">Ask RichAPI can read your team&#x27;s runs (request, response, receipt), balance, plan and key names. It never sees full key values and never spends credits or changes settings without your confirmation.</p></details><div class="ra-thread" aria-live="polite"><div class="ra-msg ra-msg--user"><div class="ra-msg__body"><span class="ra-sr-only">You: </span>Why did run_8f2a cost 5 credits?</div></div></div></aside></div>

Ask launcher

The floating button that opens the Ask panel.

JSX
<AskLauncher kbd="⌘J" style={{ position: "absolute" }} />
HTML
<div class="g-frame g-frame--contain" style="height:80px"><button type="button" class="ra-ask-fab" aria-label="Ask RichAPI" style="position:absolute"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>Ask<kbd class="ra-kbd">⌘J</kbd></button></div>

Approval request

people_searchNeeds approval10 credits
prospect-agent
{
  "title": "VP Marketing",
  "industry": "Financial Services",
  "location": "United Kingdom",
  "limit": 1000
}
JSX
<ApprovalCard title="people_search" agent="prospect-agent" cost="10 credits" args={{
  title: "VP Marketing",
  industry: "Financial Services",
  location: "United Kingdom",
  limit: 1000,
}} actions={<Button variant="primary" size="sm">Approve</Button>
<Button size="sm">Deny</Button>} />
HTML
<section class="ra-approval ra-approval--pending" aria-label="Approval request"><div class="ra-approval__head"><b>people_search</b><span class="ra-pill ra-pill--warn">Needs approval</span><span class="ra-approval__cost">10 credits</span></div><small class="ra-approval__agent">prospect-agent</small><pre class="ra-json ra-approval__args">{
  <span class="ra-json__key">&quot;title&quot;</span>: <span class="ra-json__str">&quot;VP Marketing&quot;</span>,
  <span class="ra-json__key">&quot;industry&quot;</span>: <span class="ra-json__str">&quot;Financial Services&quot;</span>,
  <span class="ra-json__key">&quot;location&quot;</span>: <span class="ra-json__str">&quot;United Kingdom&quot;</span>,
  <span class="ra-json__key">&quot;limit&quot;</span>: <span class="ra-json__num">1000</span>
}</pre><div class="ra-approval__actions"><button type="button" class="ra-btn ra-btn--primary ra-btn--sm">Approve</button><button type="button" class="ra-btn ra-btn--sm">Deny</button></div></section>

Approval states

people_searchApproved10 credits
prospect-agent
{
  "title": "VP Marketing",
  "industry": "Financial Services",
  "location": "United Kingdom",
  "limit": 1000
}
people_searchDenied10 credits
prospect-agent
{
  "title": "VP Marketing",
  "industry": "Financial Services",
  "location": "United Kingdom",
  "limit": 1000
}
JSX
<ApprovalCard title="people_search" agent="prospect-agent" cost="10 credits" status="approved" args={{
  title: "VP Marketing",
  industry: "Financial Services",
  location: "United Kingdom",
  limit: 1000,
}} />
<ApprovalCard title="people_search" agent="prospect-agent" cost="10 credits" status="denied" args={{
  title: "VP Marketing",
  industry: "Financial Services",
  location: "United Kingdom",
  limit: 1000,
}} />
HTML
<div class="g-frame g-frame--stack"><section class="ra-approval ra-approval--approved" aria-label="Approval request"><div class="ra-approval__head"><b>people_search</b><span class="ra-pill ra-pill--ok">Approved</span><span class="ra-approval__cost">10 credits</span></div><small class="ra-approval__agent">prospect-agent</small><pre class="ra-json ra-approval__args">{
  <span class="ra-json__key">&quot;title&quot;</span>: <span class="ra-json__str">&quot;VP Marketing&quot;</span>,
  <span class="ra-json__key">&quot;industry&quot;</span>: <span class="ra-json__str">&quot;Financial Services&quot;</span>,
  <span class="ra-json__key">&quot;location&quot;</span>: <span class="ra-json__str">&quot;United Kingdom&quot;</span>,
  <span class="ra-json__key">&quot;limit&quot;</span>: <span class="ra-json__num">1000</span>
}</pre></section><section class="ra-approval ra-approval--denied" aria-label="Approval request"><div class="ra-approval__head"><b>people_search</b><span class="ra-pill">Denied</span><span class="ra-approval__cost">10 credits</span></div><small class="ra-approval__agent">prospect-agent</small><pre class="ra-json ra-approval__args">{
  <span class="ra-json__key">&quot;title&quot;</span>: <span class="ra-json__str">&quot;VP Marketing&quot;</span>,
  <span class="ra-json__key">&quot;industry&quot;</span>: <span class="ra-json__str">&quot;Financial Services&quot;</span>,
  <span class="ra-json__key">&quot;location&quot;</span>: <span class="ra-json__str">&quot;United Kingdom&quot;</span>,
  <span class="ra-json__key">&quot;limit&quot;</span>: <span class="ra-json__num">1000</span>
}</pre></section></div>

Plan cards

Sandbox
$0

Try every endpoint.

  • 100 free credits
  • 1 request per second
StarterCurrent plan
$100/ 5,000 credits

Prototypes and small pipelines

  • 5,000 credits
  • 10 requests per second
Growth
$450/ 25,000 credits

Production pipelines and agent builders

  • 25,000 credits
  • 11% bonus
  • 25 requests per second
JSX
<PlanCard name="Sandbox" price="$0" description="Try every endpoint." features={["100 free credits", "1 request per second"]} />
<PlanCard name="Starter" price="$100" period="/ 5,000 credits" description="Prototypes and small pipelines" features={["5,000 credits", "10 requests per second"]} current />
<PlanCard name="Growth" price="$450" period="/ 25,000 credits" description="Production pipelines and agent builders" features={["25,000 credits", "11% bonus", "25 requests per second"]} featured action={<Button variant="primary">Choose Growth</Button>} />
HTML
<div class="g-frame g-frame--stack" style="grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:16px"><div class="ra-plan-card"><div class="ra-plan-card__head"><b>Sandbox</b></div><div class="ra-plan-card__price"><span class="ra-serif">$0</span></div><p>Try every endpoint.</p><ul class="ra-plan-card__features"><li><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>100 free credits</li><li><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>1 request per second</li></ul></div><div class="ra-plan-card"><div class="ra-plan-card__head"><b>Starter</b><span class="ra-pill ra-pill--brand">Current plan</span></div><div class="ra-plan-card__price"><span class="ra-serif">$100</span><small>/ 5,000 credits</small></div><p>Prototypes and small pipelines</p><ul class="ra-plan-card__features"><li><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>5,000 credits</li><li><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>10 requests per second</li></ul></div><div class="ra-plan-card ra-plan-card--featured"><div class="ra-plan-card__head"><b>Growth</b></div><div class="ra-plan-card__price"><span class="ra-serif">$450</span><small>/ 25,000 credits</small></div><p>Production pipelines and agent builders</p><ul class="ra-plan-card__features"><li><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>25,000 credits</li><li><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>11% bonus</li><li><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>25 requests per second</li></ul><button type="button" class="ra-btn ra-btn--primary">Choose Growth</button></div></div>

Credit packs

JSX
<PackOption name="pack" value="starter" title="Starter" credits="5,000 credits" price="$100" />
<PackOption name="pack" value="growth" title="Growth" credits="25,000 credits" price="$450" note="11% bonus" defaultChecked />
<PackOption name="pack" value="scale" title="Scale" credits="50,000 credits" price="$800" note="25% bonus" />
HTML
<div class="g-frame g-frame--stack" style="grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))"><label class="ra-pack"><input type="radio" class="ra-pack__input" name="pack" value="starter"/><span class="ra-pack__title">Starter</span><span class="ra-pack__credits">5,000 credits</span><span class="ra-pack__price">$100</span></label><label class="ra-pack"><input type="radio" class="ra-pack__input" name="pack" checked="" value="growth"/><span class="ra-pack__title">Growth</span><span class="ra-pack__credits">25,000 credits</span><span class="ra-pack__price">$450</span><small>11% bonus</small></label><label class="ra-pack"><input type="radio" class="ra-pack__input" name="pack" value="scale"/><span class="ra-pack__title">Scale</span><span class="ra-pack__credits">50,000 credits</span><span class="ra-pack__price">$800</span><small>25% bonus</small></label></div>

Credit pools

Bundle credits1,248.5 credits
Enrichment Pass41,820 cr leftof 68,000 this month, refills Nov 1
Enrichment PassGet the passFrom $149/month
JSX
<PoolList>
  <Pool label="Bundle credits" value="1,248.5 credits" />
  <Pool tone="pass" label="Enrichment Pass" value="41,820 cr left" sub="of 68,000 this month, refills Nov 1" meter={{
    value: 41820,
    max: 68000,
    label: "Enrichment Pass credits left",
  }} />
  <Pool label="Enrichment Pass" value="Get the pass" sub="From $149/month" href="#pass" />
</PoolList>
HTML
<div class="ra-pools"><div class="ra-pool"><span class="ra-pool__label">Bundle credits</span><b class="ra-pool__value">1,248.5 credits</b></div><div class="ra-pool ra-pool--pass"><span class="ra-pool__label">Enrichment Pass</span><b class="ra-pool__value">41,820 cr left</b><small class="ra-pool__sub">of 68,000 this month, refills Nov 1</small><div class="ra-meter ra-meter--pass" role="meter" aria-label="Enrichment Pass credits left" aria-valuemin="0" aria-valuemax="68000" aria-valuenow="41820"><i class="ra-meter__fill" style="width:61.5%"></i></div></div><a class="ra-pool ra-pool--cta" href="#pass"><span class="ra-pool__label">Enrichment Pass</span><b class="ra-pool__value">Get the pass</b><small class="ra-pool__sub">From $149/month</small></a></div>

Enrichment Pass offer

Launch offer
$149/month, billed yearly
Lock in the launch price for as long as you stay subscribed.
Launch price ends in
9Days11Hrs18Min34Sec
JSX
<Card>
  <CardBody>
    <PromoTag>Launch offer</PromoTag>
    <BigNumber value="$149" unit="/month, billed yearly" />
    <LockCallout title="Lock in the launch price for as long as you stay subscribed." />
    <Countdown endsAt="2026-10-22T23:59:59Z" label="Launch price ends in" />
  </CardBody>
</Card>
HTML
<div class="g-frame g-frame--md g-frame--contain"><div class="ra-card"><div class="ra-card__body"><div class="g-frame g-frame--stack" style="gap:16px"><span class="ra-promo-tag">Launch offer</span><div class="ra-big-num"><b>$149</b><span>/month, billed yearly</span></div><div class="ra-lock"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"></path><path d="m21 2-9.6 9.6"></path><circle cx="7.5" cy="15.5" r="5.5"></circle></svg><div><b>Lock in the launch price for as long as you stay subscribed.</b></div></div><div class="ra-countdown" role="timer" aria-label="Launch price ends in"><span class="ra-label">Launch price ends in</span><div class="ra-countdown__tiles"><span class="ra-countdown__tile"><b>9</b><small>Days</small></span><span class="ra-countdown__tile"><b>11</b><small>Hrs</small></span><span class="ra-countdown__tile"><b>18</b><small>Min</small></span><span class="ra-countdown__tile"><b>34</b><small>Sec</small></span></div></div></div></div></div></div>

Verdict

Worth it for you: about $44/mo less ($528 a year), with room for 12,000 more enrichments a month.

Not yet. You'd need 3,000 enrichments a month to break even. Bundles are cheaper for you today.

JSX
<Verdict tone="yes">
  Worth it for you: about $44/mo less ($528 a year), with room for 12,000 more enrichments a month.
</Verdict>
<Verdict tone="no">
  Not yet. You'd need 3,000 enrichments a month to break even. Bundles are cheaper for you today.
</Verdict>
HTML
<p class="ra-verdict ra-verdict--yes"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg><span>Worth it for you: about $44/mo less ($528 a year), with room for 12,000 more enrichments a month.</span></p><p class="ra-verdict ra-verdict--no"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"></path></svg><span>Not yet. You&#x27;d need 3,000 enrichments a month to break even. Bundles are cheaper for you today.</span></p>

Plan pill

Growth1,248.5 cr
JSX
<PlanPill href="#billing" plan="Growth" balance="1,248.5 cr" />
HTML
<a class="ra-plan-pill" href="#billing"><span class="ra-plan-pill__plan">Growth</span><span class="ra-plan-pill__balance">1,248.5 cr</span></a>

Breadcrumb

JSX
<Breadcrumb items={[
  { label: "Endpoints", href: "#/endpoints" },
  {
    label: "LinkedIn enrichment",
    href: "#/endpoints?cat=linkedin",
  },
  { label: "Enrich Profile" },
]} />
HTML
<nav class="ra-crumbs" aria-label="Breadcrumb"><ol><li><a class="ra-crumbs__link" href="#/endpoints">Endpoints</a></li><li><a class="ra-crumbs__link" href="#/endpoints?cat=linkedin">LinkedIn enrichment</a></li><li><span class="ra-crumbs__current" aria-current="page">Enrich Profile</span></li></ol></nav>

Separator, horizontal

Keys
Usage
JSX
Keys 
<Separator />
 Usage
HTML
<div class="g-frame g-frame--md">Keys <hr class="ra-sep"/> Usage</div>

Separator, vertical

Keys Usage Billing
JSX
Keys 
<Separator orientation="vertical" />
 Usage 
<Separator orientation="vertical" />
 Billing
HTML
<div class="g-frame g-frame--row" style="height:24px;flex-wrap:nowrap">Keys <div class="ra-sep ra-sep--vertical" role="separator" aria-orientation="vertical"></div> Usage <div class="ra-sep ra-sep--vertical" role="separator" aria-orientation="vertical"></div> Billing</div>

Settings

Shown on invoices.
Receipts go here.
Auto top-upReload credits when the balance runs low.
JSX
<SettingsRow label="Team name" description="Shown on invoices." htmlFor="set-name">
  <Input id="set-name" aria-label="Team name" defaultValue="Sakshi's Team" />
</SettingsRow>
<SettingsRow label="Billing email" description="Receipts go here." htmlFor="set-email">
  <Input id="set-email" aria-label="Billing email" defaultValue="sakshi@texau.com" disabled />
</SettingsRow>
<SettingsRow label="Auto top-up" description="Reload credits when the balance runs low.">
  <Switch label="Auto top-up" defaultChecked />
</SettingsRow>
HTML
<div class="g-frame g-frame--lg"><div class="ra-setting"><div class="ra-setting__text"><label class="ra-setting__label" for="set-name">Team name</label><small class="ra-setting__desc">Shown on invoices.</small></div><div class="ra-setting__control"><input id="set-name" class="ra-input" aria-label="Team name" value="Sakshi&#x27;s Team"/></div></div><div class="ra-setting"><div class="ra-setting__text"><label class="ra-setting__label" for="set-email">Billing email</label><small class="ra-setting__desc">Receipts go here.</small></div><div class="ra-setting__control"><input id="set-email" class="ra-input" aria-label="Billing email" disabled="" value="sakshi@texau.com"/></div></div><div class="ra-setting"><div class="ra-setting__text"><span class="ra-setting__label">Auto top-up</span><small class="ra-setting__desc">Reload credits when the balance runs low.</small></div><div class="ra-setting__control"><label class="ra-switch"><input type="checkbox" role="switch" class="ra-switch__input" checked=""/><span class="ra-switch__track" aria-hidden="true"></span><span class="ra-switch__label">Auto top-up</span></label></div></div></div>

Danger zone

Danger zone

Delete teamRemoves every key and run.
JSX
<DangerZone>
  <SettingsRow label="Delete team" description="Removes every key and run.">
    <Button variant="danger">Delete team</Button>
  </SettingsRow>
</DangerZone>
HTML
<div class="g-frame g-frame--lg"><section class="ra-danger" aria-labelledby="_R_0_"><h2 class="ra-danger__title" id="_R_0_">Danger zone</h2><div class="ra-setting"><div class="ra-setting__text"><span class="ra-setting__label">Delete team</span><small class="ra-setting__desc">Removes every key and run.</small></div><div class="ra-setting__control"><button type="button" class="ra-btn ra-btn--danger">Delete team</button></div></div></section></div>

Not found

404

Nothing at #/keys/old

The page moved. Search for it, or head back to the dashboard.

JSX
<ErrorPage code="404" title="Nothing at #/keys/old" actions={<Button>Search</Button>
<Button variant="primary">Dashboard</Button>}>
  The page moved. Search for it, or head back to the dashboard.
</ErrorPage>
HTML
<section class="ra-error-page" aria-labelledby="_R_0_"><span class="ra-error-page__code">404</span><h1 id="_R_0_">Nothing at #/keys/old</h1><p class="ra-error-page__text">The page moved. Search for it, or head back to the dashboard.</p><div class="ra-error-page__actions"><button type="button" class="ra-btn">Search</button><button type="button" class="ra-btn ra-btn--primary">Dashboard</button></div></section>

Server error

500

Something broke on our side

The request did not finish. No credits were charged.

JSX
<ErrorPage code="500" title="Something broke on our side" actions={<Button variant="primary">Retry</Button>}>The request did not finish. No credits were charged.</ErrorPage>
HTML
<section class="ra-error-page" aria-labelledby="_R_0_"><span class="ra-error-page__code">500</span><h1 id="_R_0_">Something broke on our side</h1><p class="ra-error-page__text">The request did not finish. No credits were charged.</p><div class="ra-error-page__actions"><button type="button" class="ra-btn ra-btn--primary">Retry</button></div></section>

Theme switch

JSX
<ThemeSwitch defaultValue="system" storageKey="ra_gallery_theme" />
HTML
<div class="ra-seg ra-theme-switch" role="group" aria-label="Theme"><button type="button" class="ra-seg__item" aria-pressed="false"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg><span class="ra-sr-only">Light</span></button><button type="button" class="ra-seg__item" aria-pressed="true"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg><span class="ra-sr-only">System</span></button><button type="button" class="ra-seg__item" aria-pressed="false"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg><span class="ra-sr-only">Dark</span></button></div>

Status link

Status: ok All systems normalStatus: warning Degraded performance
JSX
<StatusLink href="https://status.richapi.ai" target="_blank">All systems normal</StatusLink>
<StatusLink href="https://status.richapi.ai" target="_blank" tone="warn">Degraded performance</StatusLink>
HTML
<div class="g-frame g-frame--stack"><a class="ra-status" rel="noopener noreferrer" href="https://status.richapi.ai" target="_blank"><span class="ra-dot ra-dot--ok" aria-hidden="true"></span><span class="ra-sr-only">Status: ok</span> All systems normal</a><a class="ra-status" rel="noopener noreferrer" href="https://status.richapi.ai" target="_blank"><span class="ra-dot ra-dot--warn" aria-hidden="true"></span><span class="ra-sr-only">Status: warning</span> Degraded performance</a></div>

Sidebar footer

Status: ok All systems normalChangelog
SSakshisakshi@texau.com
JSX
<StatusLink href="https://status.richapi.ai" target="_blank">All systems normal</StatusLink>
<Button size="sm" variant="link" href="https://richapi.ai/changelog" target="_blank">Changelog</Button>
<ThemeSwitch defaultValue="system" storageKey="ra_gallery_theme" />
<UserRow name="Sakshi" email="sakshi@texau.com" />
HTML
<div class="g-frame g-frame--sm g-frame--stack"><div class="g-frame g-frame--row"><a class="ra-status" rel="noopener noreferrer" href="https://status.richapi.ai" target="_blank"><span class="ra-dot ra-dot--ok" aria-hidden="true"></span><span class="ra-sr-only">Status: ok</span> All systems normal</a><a class="ra-btn ra-btn--link ra-btn--sm" href="https://richapi.ai/changelog" target="_blank">Changelog</a></div><div class="ra-seg ra-theme-switch" role="group" aria-label="Theme"><button type="button" class="ra-seg__item" aria-pressed="false"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg><span class="ra-sr-only">Light</span></button><button type="button" class="ra-seg__item" aria-pressed="true"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg><span class="ra-sr-only">System</span></button><button type="button" class="ra-seg__item" aria-pressed="false"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg><span class="ra-sr-only">Dark</span></button></div><div class="ra-user"><span class="ra-avatar" role="img" aria-label="Sakshi">S</span><span><b>Sakshi</b><small>sakshi@texau.com</small></span></div></div>