Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Region And Key Setup Integration Block for Svelte

An integration setup section for an onboarding-checklist tool connecting to PostHog, in one hairline-framed panel with a vertical Steps rail: choose a region with radio cards, add the project key, send a test event that shows its capture payload.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An integration setup section for Svelte with Ark UI, written for Cairnstep, a fictional tool that builds onboarding checklists whose steps tick off when a PostHog event arrives, and its PostHog connection. A start-aligned header carries the title with one sentence and, at its end, the mark pair (Cairnstep's own tile and PostHog's neutral lettermark tile). Under it, one panel framed by hairlines with overshooting corners: the catalog's vertical Steps as a rail at the start, with numbers and titles (and a line for each from lg), and one step at a time at the end. Step 1 picks where the data lives with two radio cards, US Cloud and EU Cloud, each naming its capture host (us.i.posthog.com, eu.i.posthog.com). Step 2 takes the project API key, which starts with phc_, in a password field with a show and hide control. Step 3 sends a test event: it shows the capture call (POST to the chosen host's /i/v0/e/) and a payload with api_key, event, distinct_id and properties, in code, and says it was captured in this demo with nothing sent. A foot band holds Back, a line that says what is missing, and Continue, which becomes the Finish setup Shine Button on the last step and waits for the test. Every step sits in one grid cell with an unseen copy of them all, so the panel keeps the tallest step's height. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Steps, Radio Group, Field, Password Input, Syntax Text, Button and Shine Button, with CSS transitions and your theme's tokens for every colour. PostHog is named in text only: no PostHog logo, colour or wordmark ships with the block. Nothing is stored or sent: the key stays in the page and is cleared when you start over.

FAQ

Does it check or send the key?

No. The block only requires something to be typed and checks no format: the placeholder is phc_, the prefix of PostHog's project API keys, which PostHog also calls the project token. The value lives in the component's state, is never echoed (the payload shows <your project API key>), and is cleared on Start over. Wire the last step to your own server, where the key is stored safely, and never log it.

What do the region cards do?

They pick which of PostHog's two clouds the project is on, and the host shown in the test call follows: us.i.posthog.com or eu.i.posthog.com, the capture hosts PostHog documents for US Cloud and EU Cloud. The choice changes text only; nothing is requested from either host. Replace REGIONS if your product needs more.

What does Send a test event do?

It shows the call a real check would make: PostHog's capture endpoint takes a POST to /i/v0/e/ with a project key, an event name and a distinct_id, plus optional properties. The payload here is typed in the file and shown in code once the button is pressed, the line says it was captured in this demo, and nothing leaves the page. Finish setup stays disabled until the test has been sent, and a line says so.

Can I show PostHog's logo?

The block names PostHog in text and ships no PostHog logo, colour or wordmark. PostHog's tile is a neutral lettermark, Ph in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it, under the owner's brand guidelines, and never redraw it.

How does it behave for keyboard and screen reader users?

Each new step's heading takes focus when you move between steps with the buttons or the rail, never on load, and a polite status line announces the step ("Step 2 of 3: Add the project key"). Steps you haven't reached are disabled in the rail. The rail is one tab stop (the current step) and the Up and Down arrow keys move between the enabled steps. Continue is disabled until the step has what it needs, with a line beside it that says what is missing.

How does it fit on a phone and with reduced motion?

The rail stays a short vertical list of numbers and titles above the step (its descriptions show from lg), the radio cards stack, and the buttons fill the width with Back above Continue. The panel takes the height of its tallest step, so nothing shifts as you move. The header fades up once on load with a CSS transition; with reduced motion it simply appears.

All 100 integration blocks