Component library

React components and page templates for Agentcard. Each item includes a preview, usage notes, source and an install command.

Requires React and Tailwind 4. Use npx -y github:anwarlemu/agentcard-brand-cli#release add <item> to add an item.

Components

Buttons, form controls, navigation and overlays.

accordion
AccordionExpandable questions or sections with keyboard navigation.
avatar
team.dir
APAda ParkCEO & Co-Founder
JRJonah ReyesCTO & Co-Founder
angels.dir
MCMia ChenFounder, Ledgerline
SOSam OkaforPartner, North Fund
LRLena RuizAngel investor
AvatarSquare grayscale photo with an initials fallback.
badge
BadgeLabels for status, categories and counts.
banner
BannerNotice with a title, message and optional actions.
button
ButtonButtons for primary, secondary, toolbar and on-blue actions.
card
CardContainer for related content, with default and raised variants.
checkbox
CheckboxCheckbox with checked, unchecked, indeterminate and disabled states.

code-window

kernel.ts

// One card item per purchase, in the
// user's KERNEL vault
await kernel.vaults.items.upsert('order', {
  type: 'card',
  spec: { provider: 'agentcard',
    merchant: 'amazon.com',
    amount: 2306, currency: 'usd' },
});
const browser = await kernel.browsers.create({
  vaults: [{ id: vault.id }],
});

Code windowCode block with a filename, highlighting and optional copy action.

collapse
CollapseExpandable content area that animates its height.
command
CommandSearchable command list or dialog with keyboard navigation.
copy-button
Copy buttonCopies text with success and failure feedback.
dialog
DialogModal dialog with a title bar, focus trap and close control.
docs-link
Docs linkExternal documentation link with an arrow.
dropdown-menu
Dropdown menuAction menu with standard and glass panels, submenus and selection controls.
empty-state
Empty stateMessage and optional action for an empty list or search result.
field
FieldLabel, help text, error message and accessibility attributes for a form control.
hold-button
Hold buttonButton that confirms an action after a continuous hold.
input
InputSingle-line text field with standard and search variants.
kbd
KbdKeyboard key or shortcut label.
label
LabelAccessible label for a form control.
logo
LogoAgentcard wordmark and standalone mark.
popover
PopoverAnchored panel for contextual details or controls.
progress
ProgressProgress bar with a value, maximum and accessible progress state.
scroll-area
Scroll areaScrollable container with overflow indicators and a scroll control.
secret-field
Secret fieldMasked value with reveal and copy controls.
segmented-control
Segmented controlSingle-value selector with radio semantics and arrow-key navigation.
select
SelectSingle-choice select with field, compact, ghost and chip treatments.
separator
SeparatorHorizontal or vertical divider.
sheet
SheetSide panel with a title, close control and focus management.
skeleton
SkeletonPlaceholder that reserves space while content loads.
sonner
ToastToast notifications with optional actions.
spinner
SpinnerLoading indicator that inherits the surrounding text color.
switch
SwitchToggle for a setting that takes effect immediately.
table
TableResponsive table that stacks row content on phones.
tabs
TabsTabbed views with default, small and plain treatments.
tag-filter
Tag filterSearchable tag picker with removable selected filters.
tags-input
Tags inputEditable list of values with add, remove and validation states.
textarea
TextareaResizable multi-line text field.
tooltip
TooltipShort contextual label shown on hover or keyboard focus.
window
WindowContent container with a title bar and optional controls.

Merchant	Card	Date	Amount	Status
Delta	Travel agent	Oct 14	$412.00	Approved
Notion	Ops agent	Oct 13	$96.00	Approved
Uber	Travel agent	Oct 12	$31.75	Declined

Sections

Headers, content sections and footers for Agentcard pages.

cta
CTABlue section with a heading, action and optional media.
faq
faq.help / Agentcard
Frequently asked questions
Everything you need to know about Agentcard.
FAQFAQ section with optional topic tabs and expandable answers.
feature-rows
Explore the Vault
VaultFeature 01 of 04
Store any card
Works with any card from any country: consumer, commercial or prepaid.
Card one
Card two
Card three
Bank
Credit union
and more
9:41
Add your card
VaultFeature 02 of 04
Get points
Customers keep the points and cash back their cards earn on every purchase.
9:41
Points
VaultFeature 03 of 04
Insured up to $250
Your customers need to feel safe when buying with their agent. We insure up to $250 for mistakes the agent makes.
Powered byINSURER
9:41
Agent mistake
VaultFeature 04 of 04
A window, centered
A row can hold a window or code instead of a phone.
activity.log
Feature rowsProduct feature layouts with text and media.
hero
HeroPage opening with a blue background, heading, actions and optional media.
integrations
Integrates natively with the tools you use
Kernel, Browserbase, Browser Use, Anchor, your own browser, Linq and Blooio: the stack your agent already runs on.
Browser integrations
Integrate with Kernel, Browserbase, Browser Use, Anchor or your own browser and automate purchases online.
kernel.ts
// One card item per purchase, in the // user's vault await client.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306, currency: 'usd' }, });
KERNELvault · user-12345
AgentcardWalletConnected
OrderCard · $23.06 at amazon.comAuthorizing
Kernel swaps the card in at its network edge
browserbase.ts
// One card item per purchase, in the // user's vault await bb.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306, currency: 'usd' }, });
BROWSERBASEvault · user-12345
AgentcardWalletConnected
OrderCard · $23.06 at amazon.comAuthorizing
Browserbase swaps the card in at its network edge
browser use.ts
// One card item per purchase, in the // user's vault await browser.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306, currency: 'usd' }, });
BROWSER USEvault · user-12345
AgentcardWalletConnected
OrderCard · $23.06 at amazon.comAuthorizing
Browser Use swaps the card in at its network edge
anchor.ts
// One card item per purchase, in the // user's vault await anchor.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306, currency: 'usd' }, });
ANCHORvault · user-12345
AgentcardWalletConnected
OrderCard · $23.06 at amazon.comAuthorizing
Anchor swaps the card in at its network edge
browser.ts
// One card item per purchase, in the // user's vault await client.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306, currency: 'usd' }, });
BROWSERvault · user-12345
AgentcardWalletConnected
OrderCard · $23.06 at amazon.comAuthorizing
Browser swaps the card in at its network edge
Messaging integrations
iMessage agents built on top of Linq and Blooio can use Agentcard to complete payments.
linq payments
POST api.linq.com/v3/payments { "amount": 2306, "currency": "usd", "merchant": "amazon.com" }
Found it. Ready to check out?
Approved
blooio payments
POST api.blooio.com/v3/payments { "amount": 2306, "currency": "usd", "merchant": "amazon.com" }
Found it. Ready to check out?
Approved
IntegrationsIntegration sections with selectable tools and matching previews.
logo-strip
Working with Agentcard
Personal assistant companies use Agentcard as their payment infrastructure.
Orchid
Pally
Almanac
Endstack
Pickle
Persona
Ego
Orgo
Laso Finance
Bezalel
Runable
Paper Instruments
Logo stripCustomer logos in a responsive grid of small windows.
nav-dock
Nav dockFloating navigation that becomes a top bar and menu on phones.
page-header
Page headerTitle, optional label and introduction for an inner page.
pricing
Pricing
vault-free.plan
Vault Free
Store customers’ cards and buy with an agent
Freeup to 5,000 users
Store any cardConsumer, commercial or prepaid, from any country.
Points for customersThey keep earning on every purchase.
Bank-statement disputesA charge is disputed like any other.
Insured up to $250Covers the agent’s mistakes.
Auto-approveWithin the limits customers set.
Rewards routingPicks the card that earns the most.
White-labeledYour own identity throughout.
Passkey approvalOr a master password, before anything is paid.
Start free
vault-enterprise.plan
Vault Enterprise
Store customers’ cards and buy with an agent
Talk to us
All features in the Free plan, plus:
Unlimited usersNo cap on the Free plan’s 5,000.
The Vault belongs to youAnd so does every card in it.
Dedicated supportA named contact and a shared Slack channel.
SLAUptime and response-time guarantees in writing.
SSO and SCIMSign in with your identity provider and provision from it.
Talk to us
issuing.plan
Issuing
Cards for your own agents
$5,000/ month
One-time cardsA fresh card for every purchase.
Multi-use cardsWith a monthly limit you set.
Spend controlsMerchants, amounts and approvals per card.
Start now
issuing-startups.plan
Issuing Startups
For teams just starting out
Talk to us
All features in the Issuing plan.
Talk to us
purchase-agent.plan
Purchase Agent
Our agent inside yours
Talk to us
Book a call
PricingPricing plans grouped by product, with optional tabs.
product-grid
Explore our products
Vault, Issuing, Voice and the Purchase Agent: what an agent needs to pay for things.
agentcard···· 4832
Vault
Store customers’ cards and make purchases with agents safely.
Explore Vault
Purchase Agent
Integrate our agent into yours and enable purchases from Amazon, DoorDash and many other online stores.
Read the docs
issuing.product
Agentcard ···· 4832Active
Agentcard ···· 7719Active
Agentcard ···· 2051Active
Issuing
Create one-time and multi-use cards for your agent.
Explore Issuing
voice.product
Your usual from Rose Indian, $34.20Active
ApprovedActive
Voice
Let customers approve their agent’s purchases by speaking, with no screen to look at.
Explore Voice
Product gridProduct overview cards with text, actions and media.
prose
Compliance
Terms of Use
Last updated July 10, 2026
Welcome to the service (the “Service”). These terms govern your use of the website, the cards and the tools for agents. By using the Service you agree to them and to our Privacy Policy.
Eligibility
You must be at least 18 years old and able to form a binding contract. Cards are issued under the Cardholder Agreement.
Acceptable use
You agree not to:
Use the services for any unlawful purpose.
Attempt unauthorized access to any account or system.
Interfere with or disrupt the services.
Additional definitions
The issuing bank is an express third-party beneficiary of these terms.
An API key such as sk_live_… is yours to keep secret.
Fees
Fees
Annual fees None
International transaction 1% of each transaction in U.S. dollars
Late payment None. Learn more at consumerfinance.gov.
npx agent-cards setup
ProseTypography and layout for long-form content.
section
SectionPage section, section heading and optional label.
site-footer
We want agents to buy anything online
that you can buy as a human.
Product
Vault Issuing Voice Purchase Agent Pricing FAQ
Developers
Documentation API reference
Company
About Changelog Trust Center
Legal
Privacy Policy Terms of Service Card Terms Card Terms (International)E-Sign Consent Prohibited Uses
Social
X / Twitter Instagram TikTok
Agents buy at Amazon, Walmart, Target, Best Buy and more.
Site footerFooter with navigation groups, logos and optional merchant list.
site-header
Site headerPage header with the Agentcard logo and a primary link.
team-directory
Team
team.dir
AOAda OkaforCEO & Co-Founder
LRLuis RomeroCTO & Co-Founder
MLMara LindqvistMember of Technical Staff
NHNoor HaddadMember of Marketing Staff
We are not hiring, but you can always send us an email.
Investors
investors.dir
PRPriya RamanCo-founder, a fund
TBTom BeckerCEO, a commerce platform
ERElena RuizCTO, a CRM
SWSam WuCEO, an auth company
JBJonas BergCEO, a cloud
IDInes DuarteBoard, an AI lab
KMKofi MensahCEO, a delivery app
HSHana SatoDesign, a device maker
RPRavi PatelPayments
Backed by an accelerator
NORTHFUND
Team directoryResponsive directory of people with photos, roles and optional links.
testimonials
Powering payments for agentic startups
Consumer apps, B2B companies and crypto teams run their agents’ purchases on Agentcard.
orchid.case
Consumer apps like Orchid buy on Amazon for customers using Agentcard:
Orchid uses Agentcard to store customers’ cards safely and buy things on their behalf.”
OrchidConsumer
almanac.case
B2B companies like Almanac use Agentcard to give cards to company agents:
Almanac stores corporate cards using Agentcard and automates company purchases with their Slack agent.”
AlmanacB2B
laso.case
Crypto companies like Laso use Agentcard as their payment infrastructure:
When users have funds in crypto and their agent wants to make purchases using them, they can use Laso (powered by Agentcard) and create cards their agent can use.”
Laso FinanceCrypto
TestimonialsCustomer quotes with names, logos and optional context.
updates-feed
Wed Oct 14
Added
A company can now sell through its own agent: a new purchase package gives the agent one buy tool for each shopper, and every approval goes straight to the shopper.
A company can name its shopper agent, and the name shows on every message the agent sends.
Purchase API answers now carry the merchant's order number once the order is placed.
Improved
A shopper with no login merges into their account the first time they sign in.
A company now opens up to 10,000 cards at once.
Fixed
An iPhone with its passkey in a second keychain approves on the first try.
A card payment no longer fails when the merchant retries it.
Tue Oct 13
Fixed
The Purchase API now answers out-of-stock items with the closest match.
On a vague shopping request the agent asks one question before it searches.
Fri Feb 27
Added
Set up from your editor
One command adds the card tools to your coding agent and walks you through the first purchase.
▶
Updates feedDated release notes grouped by change type.

Fees
Annual fees	None
International transaction	1% of each transaction in U.S. dollars
Late payment	None. Learn more at consumerfinance.gov.

Pages

Page templates built from the library components.

about-page
Get started
The company
About
We are building Agentcard because we believe agents should have full autonomy to pay for things online. That is why we are starting with cards.
Team
team.dir
AOAda OkaforCEO & Co-Founder
LRLuis RomeroCTO & Co-Founder
MLMara LindqvistMember of Technical Staff
NHNoor HaddadMember of Marketing Staff
We are not hiring, but you can always send us an email.
Investors
investors.dir
PRPriya RamanCo-founder, a fund
TBTom BeckerCEO, a commerce platform
ERElena RuizCTO, a CRM
SWSam WuCEO, an auth company
JBJonas BergCEO, a cloud
IDInes DuarteBoard, an AI lab
Backed by Y Combinator
Pioneer
Backed by Y Combinator
We want agents to buy anything online
that you can buy as a human.
Product
Vault Issuing Voice Purchase Agent Pricing FAQ
Developers
Documentation API reference
Company
About Changelog Trust Center
Legal
Privacy Policy Terms of Service Card Terms Card Terms (International)
Social
X / Twitter Instagram
Amazon, Walmart, Target, Best Buy, Home Depot, Lowe’s, Macy’s, Wayfair, Staples, DoorDash, Good Eggs, Flights.
Home About Pricing
Get started
About pageAbout page template with a header, team directory, footer and navigation.
home-page
Get started
Let agents buy anything online
Cards your agents can use anywhere, under limits you set.
Get started
Powering payments for agentic startups
Consumer apps, B2B companies and crypto teams run their agents’ purchases on Agentcard.
orchid.case
Consumer apps like Orchid buy for customers using Agentcard:
Orchid uses Agentcard to store customers’ cards safely and buy things on their behalf.”
OrchidConsumer
almanac.case
B2B companies like Almanac give cards to company agents:
Almanac stores corporate cards using Agentcard and automates company purchases with their Slack agent.”
AlmanacB2B
laso.case
Crypto companies like Laso use it as their payment infrastructure:
Users with funds in crypto can create cards their agent can use.”
Laso FinanceCrypto
Explore our products
Vault, Issuing and the Purchase Agent: what an agent needs to pay for things.
agentcard···· 4832
Vault
Store customers’ cards and make purchases with agents safely.
Explore Vault
purchase.agent
Amazon
DoorDash
Walmart
Purchase Agent
Integrate our agent into yours and buy from many online stores.
Read the docs
issuing.product
Agentcard ···· 4832
Agentcard ···· 7719
Issuing
Create one-time and multi-use cards for your agent.
Explore Issuing
voice.product
Your usual from Rose Indian, $34.20
Approved
Voice
Let customers approve their agent’s purchases by speaking, with no screen to look at.
Explore Voice
Integrates natively with the tools you use
The browsers and messaging platforms your agent already runs on.
Browser integrations
Integrate with your agent’s browser and automate purchases online.
kernel.ts
await client.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306 }, });
KERNELvault · user-12345
The card is swapped in at checkout
browserbase.ts
await client.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306 }, });
BROWSERBASEvault · user-12345
The card is swapped in at checkout
your-own-browser.ts
await client.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306 }, });
YOUR OWN BROWSERvault · user-12345
The card is swapped in at checkout
Messaging integrations
iMessage agents built on Linq and Blooio can use Agentcard to complete payments.
linq payments
POST api.linq.com/v3/payments { "amount": 2306, "merchant": "amazon.com" }
Found it. Ready to check out?
Approved
blooio payments
POST api.blooio.com/v3/payments { "amount": 2306, "merchant": "amazon.com" }
Found it. Ready to check out?
Approved
Working with Agentcard
Personal assistant companies use Agentcard as their payment infrastructure.
Orchid
Pally
Almanac
Endstack
Pickle
Persona
Ego
Orgo
faq.help / Agentcard
Frequently asked questions
Everything you need to know about Agentcard.
Backed by Y Combinator
We want agents to buy anything online
that you can buy as a human.
Product
Vault Issuing Voice Purchase Agent Pricing FAQ
Developers
Documentation API reference
Company
About Changelog Trust Center
Legal
Privacy Policy Terms of Service Card Terms Card Terms (International)
Social
X / Twitter Instagram
Amazon, Walmart, Target, Best Buy, Home Depot, Lowe’s, Macy’s, Wayfair, Staples, DoorDash, Good Eggs, Flights.
Home About Pricing
Get started
Home pageHome page template with product sections, integrations, FAQ and navigation.
pricing-page
Get started
Pricing
vault-free.plan
Vault Free
Store customers’ cards and buy with an agent
Freeup to 5,000 users
Store any cardConsumer, commercial or prepaid, from any country.
Passkey approvalOr a master password, before anything is paid.
Encrypted on the deviceCards are encrypted before they’re stored.
Start free
vault-enterprise.plan
Vault Enterprise
Store customers’ cards and buy with an agent
Talk to us
All features in the Free plan, plus:
Unlimited usersNo cap on the Free plan’s 5,000.
Dedicated supportA named contact and a shared Slack channel.
Talk to us
issuing.plan
Issuing
Create one-time and multi-use cards for your agent
$5,000/ month
Unlimited cardsOne-time or multi-use, with limits you set.
Get started
purchase-agent.plan
Purchase Agent
Integrate our agent into yours and buy from online stores
Talk to us
Amazon, DoorDash and moreThe stores your users already buy from.
Pays with the VaultThe user’s own card, approved on their device.
Talk to us
Backed by Y Combinator
We want agents to buy anything online
that you can buy as a human.
Product
Vault Issuing Voice Purchase Agent Pricing FAQ
Developers
Documentation API reference
Company
About Changelog Trust Center
Legal
Privacy Policy Terms of Service Card Terms Card Terms (International)
Social
X / Twitter Instagram
Amazon, Walmart, Target, Best Buy, Home Depot, Lowe’s, Macy’s, Wayfair, Staples, DoorDash, Good Eggs, Flights.
Home About Pricing
Get started
Pricing pagePricing page template with product tabs, plans, footer and navigation.

Visuals

Dividers, logos and background effects.

band-divider
Band dividerStepped divider between page backgrounds.
marquee
Agents buy at Amazon, Walmart, Target and more.
Amazon, Walmart, Target, Best Buy, Home Depot, Lowe’s, Macy’s, Wayfair, Staples, Kohl’s, B&H Photo, DoorDash, Good Eggs, Locale, Flights.
MarqueeScrolling row of names that pauses on hover and respects reduced motion.
sticker-field
Sticker fieldDecorative floating objects positioned around section content.
striped-wordmark
Striped wordmarkSVG wordmark with horizontal stripes.