shadcn.io is not affiliated with official shadcn/ui
Event Checklist Map Detail Integration Block for Svelte
An 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.
Installation
Overview
An integration detail 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. Behind a split divider that runs from the top rule to the block's foot, the start column has the title ("Cairnstep for PostHog") with one sentence, the mark pair (Cairnstep's own tile and PostHog's neutral lettermark tile, joined by a connector) beside the Connect PostHog Shine Button and a View docs link, and what it can read and write: three read scopes in code (query:read, person:read, cohort:read) each with its reason, a Writes row that says nothing, and a note that the key is a personal API key starting with phx_. The end column is a framed figure: three event names in code (signed_up, invited_teammate, published_first_page), each joined by a hairline arrow to the checklist step it ticks, the first two done and the third waiting, then the three steps of how it works on a numbered rail. The block ends on content, so no rule closes it. On a phone the parts stack in reading order and the arrows turn down. 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, Badge, Button and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. PostHog is named in text only: no PostHog logo, colour or wordmark ships with the block. The product, its events and the steps are example data.
FAQ
Can I show PostHog's logo?
The block names PostHog in text, the way any integration page says what it works with, and ships no PostHog logo, colour or wordmark. PostHog's tile is a neutral lettermark, Ph in a muted square, sitting in an icon slot that a code comment marks: drop in the official logo only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. Cairnstep's own tile has an icon slot for your logo. The pair is hidden from assistive technology because the heading already names both products.
Where should Connect PostHog go?
Both buttons are links (href="#"). Point Connect PostHog at your own connect flow, where the buyer pastes a personal API key, and View docs at your setup guide. Nothing connects, signs in or sends anything from the block itself. Connect PostHog is a Shine Button, the block's one primary action; View docs is an outline button.
Both buttons' asChild receives their props: spread them onto your router's link.
How do I change the permissions?
Edit READS at the top of the file: each entry is a PostHog API scope in code and a short reason. person:read and cohort:read are scope names in PostHog's API reference, and query:read is the scope its query endpoint asks for; check the list against the key settings in your own PostHog before you ship, and list exactly the scopes your product requests so the page and the key agree. PostHog's personal API keys start with phx_, and the block says so beside the list.
How is the figure built, and how does it read to a screen reader?
It is a real list of three rows. Each row is the event name in code, a visually hidden "ticks", a hairline arrow drawn with CSS and an icon, and the checklist step with a filled or hollow tick and the words "Done" or "Waiting for the event", so the state never rests on shade alone. The caption counts the ticked steps from the data. Change LINKS to show your own events and steps.
How do I use it for another service or product?
The product is PRODUCT and the service is SERVICE, a name and a two-letter mark for its lettermark tile. The letters are typed, not worked out from the name, so services that share a first letter stay apart. MarkTile draws either side: filled for your product, with your logo as its child, and neutral for the service. Then rewrite READS, STEPS and LINKS in that service's own terms.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
Below lg the divider gives way to a rule between the parts, which stack in reading order, and below sm each arrow turns down between an event and its step. In a right-to-left layout the columns and the step rail flip and the arrows mirror, while scopes and event names keep their left-to-right order. The header and the buttons fade up once on load with CSS transitions; with reduced motion they simply appear. The block has no state.