Search blocks by description or jump to a page.
A three step SDK onboarding stepper with package manager install tabs, a client initialization snippet, a first event call, and a live waiting panel.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
SDK Quickstart is the three step onboarding path for the @acme/node client, laid out as a numbered stepper joined by a vertical rail. Step one installs the package through package manager tabs for npm, pnpm, and yarn, each with a Copy button and the note that the SDK supports Node 18 and later. Step two initializes the client in lib/acme.ts from an ACME_API_KEY environment variable, with a line pointing to the test key under Settings, then API keys. Step three sends a first event by calling acme.events .track in an API route, and a live panel below pulses while it waits for the first event to arrive. A Test mode badge sits in the header and a footer line confirms test events never count toward the plan quota.
Install commands are a small typed array rendered inside shadcn Tabs, and the two code samples are template literals so the whitespace stays exact. The rail is an absolutely positioned span behind each step marker.
Reach for this block on a documentation or onboarding page for an API product, shown the moment a developer creates their first key. Keep the panel in test mode until a real event lands, then swap it for a success state that links to the events explorer.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the first event quickstart. Other stepper shapes:
Tip: keep the waiting panel live; the moment it flips to a received event is what confirms the wiring works.