shadcn.io is not affiliated with official shadcn/ui
Write Key Log Setup Integration Block for Solid
An integration setup section for a tracking-plan checker connecting to Segment: a source type combobox, the write key with a Copy button, and a check that prints four example calls into a dark log window and ends on a result that says it ran in this demo.
Installation
Overview
An integration setup section for Solid with Ark UI, written for Schemawick, a fictional tracking-plan checker that holds events which break the plan, and its Segment connection. A start-aligned header carries the title and one sentence and, at its end, the mark pair (Schemawick's own tile and Segment's neutral lettermark tile). Under a band rule, a split. At the start, three ruled rows in a form: a combobox for the source type (Website, iOS, Android, Server) that narrows as you type; the write key in a password field with a Copy button (a made-up 32-character key, since Segment shows the real one in the source's Settings, under API Keys); and Check connection beside the Finish setup Shine Button, which waits for the check. At the end, inside overshooting hairline corners, a log window that is dark by nature, like any terminal, while the block follows the theme: the check prints a command and then four example calls one line at a time (an identify, a track, a page for web and server sources or a screen for iOS and Android, and a track), each marked "on plan", and ends on "Connected in this demo." A polite status line at the foot, present from load, says what stays local; Disconnect, a ghost button, starts over. On a phone the log sits under the form. 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, Combobox, Field, Password Input, Copy Button, Button and Shine Button, with CSS transitions and your theme's tokens for every colour. Segment is named in text only: no Segment logo, colour or wordmark ships with the block. Nothing is stored or sent: the key stays in the page.
FAQ
How does the source picker work?
It is a combobox over four types, so typing narrows them and a click or Enter chooses one. Choosing a source clears any earlier check and the log's command follows it (schemawick check --source ios). The sample calls differ with the source the way Segment's libraries do: web and server sources send a page call and mobile ones a screen call.
Is that a real write key, and where do I find mine?
The key in the field is made up (EXAMPLEwriteKeyNotReal0123456789, 32 characters like Segment's) and belongs to no account. In Segment, a write key is on the source's Settings tab, under API Keys; the hint says so. Copy copies the field's current value and announces "Copied". Editing the key clears the check, and an empty key makes the check ask for one instead of running.
What does Check connection do?
It runs a typed script in the page: a command line, then four calls (identify, track "Signed Up", page or screen, track "Plan Selected") one every 0.45 seconds, then "Connected in this demo." With reduced motion every line appears at once. Nothing is sent to Segment and no plan is read; the foot line says so before, during and after. Finish setup is disabled until the check has run, and Enter in the key field also runs the check.
Why is the log window dark?
A terminal is dark by nature, so only the window takes the dark scope and the rest of the block follows your theme. The window's text uses the dark scope's own tokens, so it keeps its contrast in every preset.
Can I show Segment's logo?
The block names Segment in text and ships no Segment logo, colour or wordmark. Segment's tile is a neutral lettermark, Sg 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 fit on a phone, in right-to-left layouts and with reduced motion?
Below lg the form rows stack, the key field keeps its Copy button beside it, and the log window sits under the form between two rules. In a right-to-left layout the labels and rows flip while the key and the log, which are code, keep their left-to-right order. The header and the split fade up once on load; with reduced motion they simply appear and the log prints at once.