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
BlocksWebhooks

Webhooks

Pro

A webhooks console with delivery history, a payload inspector and retries that roll the rate.

Live block · sample data

Webhooks

Halden signs every event and posts it to your endpoints. Failed deliveries retry on their own for three days, or you can retry them now.

33endpoints1 with failed deliveries

Add endpoint

Ledger sync

Added by Emma Collins on Mar 4, 2026whsec_••••7f3aAPI 2026-08-01

297 events3 failed

15:0021:0003:0009:00Now

Recent deliveries

invoice.payment_failed

evt_GAYU3UijOD, attempt 1

Response500Internal Server Error in 2,318 ms{"error":"ledger_write_failed","message":"connection pool exhausted"}
1{2  "id": "evt_GAYU3UijOD",3  "type": "invoice.payment_failed",4  "created": 1790086364,5  "api_version": "2026-08-01",6  "livemode": true,7  "data": {8    "object": {9      "id": "in_1Q8uXe7",10      "object": "invoice",11      "number": "FW-2026-1179",12      "customer": "cus_P2mZr6",13      "amount_due": 129900,14      "currency": "usd",15      "attempt_count": 2,16      "next_payment_attempt": 179026560017    }18  }19}

Pick a delivery to inspect its payload and headers

When to use

  • A developer settings page for webhook endpoints, delivery history, and retries.
  • Consoles that need a payload and headers inspector next to the delivery list.

When not to use

  • Use api-keys for managing tokens.
  • Use audit-log for account activity rather than outgoing events.
  • Use integrations for a catalogue of third-party connections.

Installation

Pro source and install commands unlock with a Pro plan.

Usage

Use this on a developer settings page. Load endpoints, event volume and delivery attempts from your webhook service into webhooks-data.ts and connect retry, test event and endpoint creation to your API; the preview is simulated.

example.tsx
1import { Webhooks } from "@/components/arc/blocks/webhooks/webhooks";2 3export default function DeveloperSettings() {4  return (5    <main>6      <Webhooks />7    </main>8  );9}
Built fromBadgeButtonCheckboxCopy buttonInputAvatar

API reference

Webhooks

A webhooks console with an endpoint list, delivery volume chart, delivery history, a payload and headers inspector, retries and an add endpoint form. Takes no props; endpoints, deliveries and payloads are sample data in webhooks-data.ts, and retries, test events and creation are simulated.

No props.

Keyboard interactions

Arrow uporArrow down
Moves focus and selection through endpoints or deliveries.
HomeorEnd
Jumps to the first or last endpoint or delivery, or the first or last inspector tab.
Arrow leftorArrow right
Switches between the Payload and Headers tabs.
Escape
Closes the add endpoint panel.

Accessibility

  • Payload and headers use a tablist with roving tabindex, and the code panel is a focusable tabpanel.
  • Endpoint and delivery rows mark the current item with aria-current and point at the detail region with aria-controls.
  • Form errors render with role="alert", and the add toggle exposes aria-expanded.

Motion

  • Selection highlights and the active tab slide with shared layout springs; new rows grow in and flash once.
  • A successful retry swaps to Resolved and the delivery rate rolls to its new value.
  • Reduced motion replaces growth and rolls with instant or opacity-only changes.

Responsive behavior

  • Below an 880px container the delivery list and inspector stack, and below 760px endpoint rows wrap onto two lines.
  • Below 540px padding tightens and the footer stacks; inner container queries also reflow the add form, delivery rows, and headers on their own widths.

Performance

  • Delivery rows are not virtualized; paginate from your webhook service for busy endpoints.
  • ResizeObservers size the volume chart; there is no animation loop.

Notes for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Use on a developer settings page for managing webhook endpoints.
  • Load endpoints, event volume and delivery attempts from your webhook service into webhooks-data.ts.
  • Connect retry, send test event and endpoint creation to your API, and return the real signing secret once.
/components/blocks/webhooks/markdown

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

Related

API keysProBlockAPI key management where Create key unfolds into its form and each secret is shown once.Code blockComponentPresent code with legible hierarchy and copy access.Copy buttonComponentCopy a value with immediate confirmation.IntegrationsProBlockAn integrations directory where Connect morphs to Connected and the filters recount as you go.
PreviousMRR waterfallNextRoles and permissions
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