product

authenticationlogin, sessions, and a full oauth 2.0 providerai gatewayone endpoint fronting 200+ modelsbillingcredits, spending limits, and auto top-upuser managementteams, roles, and user-owned app access

solutions

add login to your ai appdrop-in auth with passkeys and socialmonetize with usage-based billingturn ai usage into metered revenueadd checkout to your ai appone-click buy: login, charge, add-cardoauth provider for your ai productlet other apps sign in with your identitybuild an ai app marketplacepublish, install, and review appsship an ai saas in a weekendauth, billing, and ai in one stackview all solutions
modelspricing>docs

Doc components

Frames, flow diagrams, wireframes, and screen mockups for building visual, developer-friendly docs.

A small kit of visual primitives you can drop straight into any .mdx page — browser and phone frames for screen mockups, flow diagrams, low-fi wireframes, and a screen kit (BrandBar, Logo, Field, Button, Chip) to recreate real UI inline. Everything uses the docs theme, so it stays in the monospace, dark aesthetic.

Screen mockups

Wrap mock UI in a <Frame> to show it in a browser or phone. Here's the cobranded sign-in screen, built inline — a real mockup, sitting next to the code that produced it.

hypery.ai/login?continue=purchase-sdk
P
Sign in to continue
to Purchase SDK
Continue with GoogleContinue with GitHub
Email
you@example.com
Email me a sign-in link
🔒 Secured by Hypery
<Frame variant="browser" url="hypery.ai/login?continue=purchase-sdk">
  <BrandBar color="#6C47FF" />
  <Logo letter="P" color="#6C47FF" />
  <Button variant="outline" full>Continue with Google</Button>
  <Field label="Email" placeholder="you@example.com" />
  <Button variant="primary" color="#6C47FF" full>Email me a sign-in link</Button>
</Frame>

variant is browser (default), window, or mobile. Pass a color to any screen-kit element to brand it; omit it to use the docs accent.

Purchase SDK
P
Continue to Purchase SDK
AuthorizeDeny

Flow diagrams

<Flow> lays out <FlowNode>s with arrows between them — good for auth flows, request lifecycles, and state machines. Mark the active path with active, and optional steps with dashed.

Your app
[ Buy · $4.99 ]
Sign in to Hypery
if not signed in
Add a card
if none on file
Charged
back on your app
<Flow>
  <FlowNode label="Your app" caption="[ Buy · $4.99 ]" active />
  <FlowNode label="Sign in to Hypery" caption="if not signed in" dashed />
  <FlowNode label="Add a card" caption="if none on file" dashed />
  <FlowNode label="Charged" caption="back on your app" active />
</Flow>

Add vertical for a top-to-bottom flow.

Wireframes

For low-fidelity layout sketches, <Wireframe> + <WireBlock> render hatched placeholder regions.

Dashboard layout
top nav
sidebar
content
<Wireframe label="Dashboard layout">
  <WireBlock h="sm" label="top nav" />
  <WireBlock h="lg" label="sidebar" />
  <WireBlock h="lg" label="content" />
</Wireframe>

Captions

Wrap any visual in <Figure caption="…"> to add a monospace caption.

readwritebilling:charge
Chips: read · write · billing:charge

Reference

Frame
variant browser · window · mobile · url · title. Chrome around any mock UI.
Flow / FlowNode
Arrowed steps. active, dashed, caption, vertical.
Wireframe / WireBlock
Low-fi sketches. label, h (sm/md/lg/xl).
Screen kit
BrandBar · Logo · Field · Button · Chip. All take color.
Keep it native

These render with the docs theme tokens, so they inherit the monospace type and accent automatically. Pass a color only when a mockup needs a different brand (like a developer app's).