Arc
ComponentsBlocksScreensDocsPricingTry the demo
Get Pro
Saved

Docs

IntroductionInstallationThemingMotionAI and MCPChangelog

Components136

ButtonAction buttonSplit buttonButton groupFloating button groupExpanding button groupCopy buttonAction swapIcon morphConfirm morphTheme switcher

Hold to confirmSwipe actionsReactions

Dropdown menuContext menuUser menu

InputTextareaPassword fieldPassword strengthSearch fieldExpanding searchInline edit

Number fieldMoney inputPhone inputScrub inputTag inputMention inputShortcut recorder

SelectComboboxMulti-selectMorph selectChip group

Radio cardsBilling toggleCheckboxRadio groupSwitchSegmented controlRatingToggle group

SliderElastic sliderRange histogram sliderRuler sliderWindow rangeNewProLens rangeNewPro

CalendarDate pickerDate range pickerTime pickerColor pickerEmoji pickerPro

Rich text editorSignature padFile dropzoneAvatar uploadPro

TabsBreadcrumbPaginationMega menu morphProTable of contents progressPro

Scroll areaAccordionExpandable cardResizable panelsExpandable text

DialogDrawerBottom sheetPopoverHover cardTooltipShare accessProConfirm popoverPro

AlertToastToast stackAnnouncement barCookie consentUndo toastPro

ProgressSkeletonStepperCountdownUsage meterOnboarding checklist

AvatarAvatar groupBadgePresence stackPro

CardMetric cardEmpty stateMetric tickerPro

Line chartBar chartDonut chartStreamgraphBrush chartWaffle chartSlope chartSparklineGaugeActivity heatmapAnimated counterRidgelineTreemapSplit barPro

SunburstProSankey flowProFunnel chartProRadar chartProRealtime streamProRace bar chartProData gridPro

Sortable data tableTree tableTree viewReorderable listFilter toolbarCode blockJSON viewer

TimelineComment threadChat thread

Image compareCarouselCard stack

Text revealIn-view titleText morphText shimmer

Blocks122

KPI drilldownProMetric explorerProRevenue explorerProMRR waterfallProCohort retentionProUsage forecastProJourney flowProUptime statusProPivot builderProChoropleth explorerProConnected scatterProHorizon chartProAccount healthPro

Budget variancePro

Small multiplesProLine replayPro

AI chatProAI composerProAI answerProModel pickerProModel arenaProPrompt studioProDocument extractionProAgent memoryProAI side panelProAI inline editProResearch runProAI insight cardProCatch upProAI feature launchProAI search barProAI setup wizardProCall insightsProLead scoringPro

Agent runProAgent tasksProAgent approvalsProAgent routinesProAgent orchestratorProMCP serversProKnowledge baseProEval suiteProAgent builderProAgent galleryPro

SidebarPro4Page headerCommand paletteNotification centerSelection toolbarProEmpty statesSearch resultsPro

Login and sign up5, free and Pro variantsOnboarding illustrationProOTP inputMulti-step formProTwo-factor setupProMagic linkPro

Settings pageProSettings commandProSecurity settingsProBilling overviewProUsage billingProCancel flowProOnboarding surveyProSpend alertPro

Team membersProInvite peopleProRoles and permissionsProProfile pagePro

API keysProWebhooksProIntegrationsProImport wizardNewProEnvironment variablesProDomain verifyProWebhook testerPro

Plan comparisonPricing calculatorProUsage pricingProCart drawerProCheckout summaryProLive checkoutProSeat managerProCredit top-upPro

Wallet cardProDelivery trackerProSeat mapPro

Activity feedProSupport widgetProFeature votingPro

File uploadMedia playerPro

Availability pickerProRelease readinessProFeedback boardProSmart schedulerProTask breakdownProGoal trackerPro

Hero sectionHero signupPro

Scroll storyProSpotlight gridProFeature bentoProComparison table

Logo marqueeStudio perspectivesProStats band

Changelog feedFAQ sectionContact sectionTeam showcaseProBlog grid

Site headerSite footerCTA sectionNewsletter signup

Activity terrainProRevenue globeProCustomer galaxyProSemantic zoomProLayout morphProExploded viewPro

Screens14

Metrics dashboardProMarket terminalPro

Kanban boardProProject boardProGantt timelinePro

Week calendarProMonth calendarNewPro

Team directoryPro

Inbox triageProSupport conversationProHelp centerPro

Product listingProProduct detailProInvoice studioPro

Special components106

Share sheetProAction morphProMorph navProDockProLiquid tab barProOrbit menuPro

Glass menuProGlass segmentedProGlass cardProGlass tab barPro

Sheet stackProWallet stackProControl centerProHolo cardProCard to articleProLink unfurlPro

Product galleryProLightbox galleryProPhoto gridProCover flowPro

Voice orbProNow playingProVoice recorderPro

Booking pillProActivity ringsProTime dialProDate reelPro

Keycap keyboardProSlot textSand textProTypewriter terminalPro

Stretch refreshProMorph loaderProSkeleton morphProBlack holeProCharge sessionPro

Sticker peelProTicket tearProPage curlProOrbit logosProPrize wheelPro

Dot gridProImage trailProGravity wellProInk fluidProCursor trail drawPro

Agent statusProTool callProAgent planProAgent timelineProContext windowProReasoning blockProSource cardsProModel cardProAI workflowProCode suggestionProGhost textProImage generationProDictation buttonProSpeech playerProMeeting summaryProReply draftProAgent handoffProPII redactionProResponse feedbackProLLM cost calculatorProProvider keysProGeneration statsProAI translateProTL;DR toggleProConnector setupProSmart form fillProEnrich columnProTicket routerProAsk your dataProAgent cursorProProvider statusProTraining runProAI commandProStarter promptsProAI mascotProImage revealProAI sparkProPixel mascotProGhost mascotProCube mascotProTone tunerProUpgrade promptProReferral cardProTrial bannerProTeam switcherProLive visitorsProSocial proof toastProInstall snippetPro

Data flowProPayment flowProDNS resolutionProModel trainingProMulti-region failoverProVector searchProBranch graphProAgent loopProMixture of expertsProSpeculative decodingProPrompt cacheProReasoning treePro
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 · 122 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