Arc
ComponentsBlocksDocsPricingTry the demo
Get Pro
Introduction
Installation
Theming
Motion
AI and MCP
Changelog
Metrics dashboardPro
KPI drilldownPro
Metric explorerPro
Revenue explorerPro
MRR waterfallPro
Cohort retentionPro
Usage forecastPro
Journey flowPro
Uptime statusPro
Pivot builderNewPro
Choropleth explorerPro
Connected scatterPro
Horizon chartPro
Account healthPro
Market terminalPro
Budget variancePro
Small multiplesPro
Line replayPro
AI chatPro
AI composerPro
AI answerPro
Model pickerPro
Model arenaPro
Prompt studioPro
Document extractionPro
Agent memoryPro
AI side panelPro
AI inline editPro
Research runPro
AI insight cardPro
Catch upPro
AI feature launchPro
AI search barPro
AI setup wizardPro
Call insightsPro
Lead scoringPro
Agent runPro
Agent tasksPro
Agent approvalsPro
Agent routinesPro
Agent orchestratorPro
MCP serversPro
Knowledge basePro
Eval suitePro
Agent builderPro
Agent galleryPro
SidebarPro4
Page header
Command palette
Notification center
Selection toolbarPro
Empty states
Search resultsPro
Login and sign up5, free and Pro variants
Onboarding illustrationPro
OTP input
Multi-step formPro
Two-factor setupPro
Magic linkPro
Settings pagePro
Settings commandPro
Security settingsPro
Billing overviewPro
Usage billingPro
Cancel flowPro
Onboarding surveyPro
Spend alertPro
Team membersPro
Invite peoplePro
Team directoryPro
Roles and permissionsPro
Profile pagePro
API keysPro
WebhooksPro
IntegrationsPro
Environment variablesPro
Domain verifyPro
Webhook testerPro
Plan comparison
Pricing calculatorPro
Usage pricingPro
Cart drawerPro
Checkout summaryPro
Live checkoutPro
Seat managerPro
Credit top-upPro
Invoice studioPro
Wallet cardPro
Delivery trackerPro
Product listingPro
Product detailPro
Seat mapPro
Activity feedPro
Inbox triagePro
Support conversationPro
Support widgetPro
Help centerPro
Feature votingPro
File upload
Media playerPro
Week calendarPro
Availability pickerPro
Project boardPro
Gantt timelineNewPro
Release readinessPro
Kanban boardPro
Feedback boardPro
Smart schedulerPro
Task breakdownPro
Goal trackerPro
Hero section
Hero signupPro
Scroll storyPro
Spotlight gridPro
Feature bentoPro
Comparison table
Logo marquee
Studio perspectivesPro
Stats band
Changelog feed
FAQ section
Contact section
Team showcasePro
Blog grid
Site header
Site footer
CTA section
Newsletter signup
Activity terrainPro
Revenue globePro
Customer galaxyPro
Semantic zoomPro
Layout morphPro
Exploded viewPro
What’s new4 new
BlocksAPI keys

API keys

Pro

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 "@/components/arc/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 · 134 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