shadcn.io is not affiliated with official shadcn/ui
Region And Key Setup Integration Block for React
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.
Installation
Overview
An integration setup section for React with Base 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.
Related
- Pro
Event Checklist Map Detail Integration
With a product drawingAn integration detail section for an onboarding-checklist tool connecting to PostHog: what it can read and write as three read scopes, and a framed figure that joins three event names to the checklist steps they tick.
- Pro
Trigger Event Wall Grid Integration
Switch and tick gridsAn integration grid section for an onboarding-checklist tool connected to PostHog: eight event cells on shared hairlines, each a checkbox with the event name, how often it was seen this week and the checklist step it ticks, with a live tally.
- Pro
Cohort Sync Table List Integration
Synced tablesAn integration list section for an onboarding-checklist tool connected to PostHog: a table of seven cohorts with a type filter that holds the page's height, a state for each, and a Retry on the one that failed.
- Pro
Hourly Event Strip Stats Integration
Rings and talliesAn integration stats section for an onboarding-checklist tool connected to PostHog: a strip of 24 hour cells shaded on a foreground ramp, a readout for the hour you point at or focus, and three figures worked out from the typed counts.
- Pro
Frame Thumbnails Setup Integration
Guided stepsAn integration setup section for a design-docs tool connecting to Figma, in one framed window: paste a personal access token, tick greyscale wireframe thumbnails of the frames to link, name the link and watch its address follow, then finish with an honest result.
- Pro
Rollback Wizard Changelog
Deploys and rolloutsA three-step rollback wizard in one framed window: pick a previous release, review what reverts and what stays, then type the version to unlock a Shine Button that opens an alert dialog and ends on a stated demo result.