Arc
ComponentsBlocksDocsPricingTry the demo
Introduction
Installation
Theming
Motion
AI and MCP
Changelog
Metrics dashboard
KPI drilldownNew
Metric explorer
Revenue explorer
MRR waterfall
Cohort retention
Usage forecast
Journey flow
Connected scatterNew
Market terminalNew
Budget varianceNew
Small multiplesNew
Line replayNew
AI chatNew
AI composer
Agent runNew
SidebarPro4
Page header
Command palette
Notification center
Empty states
Login and sign up5
OTP input
Multi-step formPro
Settings page
Security settings
Billing overview
Usage billingNew
Team members
Invite peopleNew
Team directory
Roles and permissions
API keys
Webhooks
Integrations
Plan comparison
Pricing calculatorNewPro
Usage pricingPro
Cart drawerNewPro
Checkout summaryNewPro
Invoice studio
Wallet card
Product listingNew
Product detailNew
Inbox triage
Support conversation
Support widget
File upload
Media playerPro
Week calendarNew
Availability picker
Project board
Release readiness
Hero sectionNew
Hero signupNewPro
Scroll storyNewPro
Spotlight gridNewPro
Feature bentoNewPro
Comparison tableNew
Logo marquee
Studio perspectivesPro
Stats bandNew
Changelog feed
FAQ sectionNew
Contact sectionNew
Team showcasePro
Blog gridNew
Site headerNew
Site footerNew
CTA sectionNew
Newsletter signupNew
Revenue globe
Customer galaxy
Semantic zoom
Layout morph
What’s new80 new
BlocksAPI keys

API keysPro

API key management where Create key unfolds into its form and each secret is shown once.

Live block · sample data

API keys

Secret keys sign requests from your servers to the Halden API. Keep them out of browsers and source control.

55 active keys

Create key

Open a key to see who created it and where it was last used

When to use

  • The developer settings page of an API product.
  • Key management with scopes, environments, and a one-time secret reveal.
  • Revoking keys where a stray click must not fire.

When not to use

  • Use webhooks for event endpoints and signing secrets.
  • Use integrations for OAuth connections to other apps.
  • Use roles-permissions for user access.

Installation

Pro source and install commands unlock with a Pro plan.

Usage

Use this on the developer settings page of an API product. Create keys on your server, pass the one-time secret to the reveal step, and connect Hold to revoke to your key revocation endpoint; every key in the preview is simulated.

example.tsx
1import { ApiKeys } from "@/registry/blocks/api-keys/api-keys";2 3export default function DeveloperSettings() {4  return (5    <main>6      <ApiKeys />7    </main>8  );9}
Built fromHold to confirmCopy buttonInputSegmented controlCheckboxBadgeAvatarButton

API reference

ApiKeys

API key management where Create key unfolds into a form with scopes and environment, each new secret is shown once, and keys revoke with hold to confirm. Keys and secrets are simulated.

No props.

Keyboard interactions

Escape
Closes the create key form and returns focus to its button.

Accessibility

  • Each key opens a labelled role="region" detail panel.
  • Revoke uses hold to confirm, so it cannot fire from a stray click.
  • Creation, copy, and revoke results are announced in a polite status region.

Motion

  • The Create key button unfolds into its form, and new keys slide into the list.
  • Reduced motion replaces the unfold with an instant swap.

Responsive behavior

  • Below 700px container width key rows stack scopes and dates under the name; below 540px detail facts go single column.
  • The create form drops to one column below 560px of its own width.

Performance

  • Key rows are not virtualized, which suits the handful of keys most accounts have.
  • A ResizeObserver drives the create button's unfold into the form.

Notes for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Use on the developer settings page of an API product.
  • Create keys on your server and pass the one-time secret to the reveal step; never store it client side.
  • Connect hold to revoke to your revocation endpoint. Composes Arc hold-to-confirm, copy-button, input, segmented-control, checkbox, badge, avatar, and button.
/components/blocks/api-keys/markdown

The full library index for assistants is at /llms.txt.

Related

WebhooksProBlockA webhooks console with delivery history, a payload inspector and retries that roll the rate.IntegrationsProBlockAn integrations directory where Connect morphs to Connected and the filters recount as you go.Hold to confirmComponentConfirm a destructive action by holding, not tapping.Copy buttonComponentCopy a value with immediate confirmation.Roles and permissionsProBlockA permissions matrix with group toggles that ripple, role duplication and a review bar.
PreviousBilling overviewNextTeam members
Arc · 75 block pagesllms.txt

On this page

  • Preview
  • When to use
  • When not to use
  • Installation
  • Usage
  • API reference
  • Keyboard
  • Accessibility
  • Motion
  • Responsive behavior
  • Performance
  • Notes for AI
  • Related
View as Markdown