Install snippet
ProA "get started in 30 seconds" card where framework tabs, three numbered steps and highlighted snippets take a developer from install to first event. Generate key wipes a fresh API key into the placeholder in place.
Live · keyboard ready
Get started in 30 seconds
Three steps to your first event.
Install
Add the SDK to your projectnpm install @lumen/nextAdd your key
Create a project key.env.localNEXT_PUBLIC_LUMEN_KEY=YOUR_LUMEN_KEYShip
Deploy and watch events arriveapp/layout.tsximport { Lumen } from "@lumen/next"; export default function RootLayout({ children }) { return ( <html lang="en"> <body>{children}<Lumen /></body> </html> );}
- A quickstart that has to work for several frameworks without three pages of docs.
- Onboarding where creating an API key is part of getting started.
- Marketing pages for developer tools that want to show how little setup it takes.
- A single code sample with no steps: use code-block.
- Trying requests against a live API: use api-playground.
- Long setup guides with many branches: write docs pages and link to them.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { InstallSnippet } from "@/components/arc/install-snippet/install-snippet"; export function Onboarding() { return ( <InstallSnippet generateKey={async signal => { const res = await fetch("/api/keys", { method: "POST", signal }); if (!res.ok) throw new Error("Could not create a key"); return (await res.json()).key; }} onCopy={(step) => track("onboarding_copy", { step })} /> );}InstallSnippet
A "get started in 30 seconds" card for SDK onboarding: framework tabs with real marks (Next.js, React, Vue, HTML), three numbered steps (Install, Add your key, Ship), highlighted code blocks that crossfade in reserved space, package manager tabs (npm, pnpm, yarn, bun), Arc copy buttons, and a Generate key button that wipes the new key into the placeholder. With no props it shows the sample Lumen analytics SDK with a simulated key generator.
PropTypeDefaultDescription
titleReactNode"Get started in 30 seconds"Card title.descriptionReactNode"Three steps to your first event."One line under the title.versionReactNode"v2.4.0"Muted label at the top right, such as the SDK version. Pass null to hide it.frameworksInstallSnippetFramework[]Next.js, React, Vue, HTML samplesOne entry per tab: id, label, install ({ packages } for package managers, or { file, code } for a CDN tag), key ({ file, code }) and code ({ file, code }). Write {{key}} where the API key goes. The ids next, react, vue and html get their marks automatically.frameworkstring–Controls the selected framework id. Pair with onFrameworkChange.defaultFrameworkstringfirst frameworkFramework selected on mount when uncontrolled.onFrameworkChange(id: string) => void–Called when someone picks another framework tab.packageManager"npm" | "pnpm" | "yarn" | "bun"–Controls the package manager used in step 1.defaultPackageManager"npm" | "pnpm" | "yarn" | "bun""npm"Package manager selected on mount when uncontrolled.onPackageManagerChange(id: InstallSnippetPackageManager) => void–Called when the package manager changes. Persist it to remember the reader's choice across pages.apiKeystring–Controlled key. When set, the snippets show it and the Generate key button is hidden, for signed-in readers who already have a key.keyPlaceholderstring"YOUR_LUMEN_KEY"Shown, tinted, wherever {{key}} appears until a key exists. Copies as written.generateKey(signal: AbortSignal) => Promise<string>–Creates a real key. Resolve with the key and it wipes into step 2; reject to show the error state with Try again. Aborted on unmount or when a new key is requested. Leave it out to simulate one (nothing is sent, and the step says so).onKeyGenerated(key: string) => void–Called with each new key.onCopy(step: "install" | "key" | "code", value: string) => void–Called after a copy with the exact clipboard text. Useful for onboarding analytics.classNamestring–Extra class on the card.- Tab
- Moves between the framework tabs, package manager tabs, copy buttons and the Generate key button.
- ArrowLeftorArrowRight
- Inside a tab list, moves to and selects the previous or next tab.
- HomeorEnd
- Inside a tab list, selects the first or last tab.
- EnterorSpace
- Copies a snippet or generates a key.
- Framework and package manager tabs are real tablists with roving tabindex; the steps list is the framework tab panel.
- Steps are an ordered list with h4 titles; a finished step announces ", done" and swaps its number for a check, so progress is never color alone.
- A polite live region announces framework changes, key generation, and that the default key is simulated. Copy buttons announce Copied on their own.
- Errors show an alert icon plus text, and the button changes to Try again.
- Marks are decorative (aria-hidden); every tab has a text label, and package manager tabs keep an aria-label when the narrow layout hides their names.
- Tab highlights slide to the measured tab on a bounce-free spring (visualDuration .24).
- Snippets, file names and step descriptions crossfade: the old one fades out in 100ms, the new one fades in over 160ms with a 2px rise. Old and new share one grid cell and every code block reserves the height of its longest snippet, so nothing moves.
- A new key eases the slot from the placeholder width to the key width (exact, in ch) while the key wipes in from the left over 340ms, then its tint fades out.
- Reduced motion keeps every end state and drops the wipe, rise and slide.
- Fills its container up to 640px. Below 460px the padding tightens and package manager tabs show marks only; below 380px framework tabs drop their marks and keep their names, and the version label hides.
- Code scrolls horizontally inside its block, never the page.
- Highlighting is a small regex tokenizer, memoized per snippet. No highlighter dependency.
- Only transforms, opacity, clip-path and one measured width animate. No loops, nothing runs when idle.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for SDK, API or CLI onboarding: the first screen after sign-up, a docs quickstart, or an empty dashboard waiting for its first event.
- Wire generateKey to your key endpoint and pass apiKey for readers who already have one. Keep snippets short (under ten lines) so the card stays scannable.
- Replace the sample frameworks with your own; any id other than next, react, vue or html shows a text-only tab.
- Do not use it to display existing secret keys in full; mask them in an API keys page instead.
The full library index for assistants is at /llms.txt.