shadcn.io is not affiliated with official shadcn/ui
Write Key Log Setup Integration Block for React
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 React with Base 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.
Related
- Pro
Source Fan-Out Detail Integration
With a product drawingAn integration detail section for a tracking-plan checker connecting to Segment: what it can read and write as an accordion of three groups, and a framed figure of one source fanning out to four destinations, one of them barred.
- Pro
Region And Key Setup Integration
Guided stepsAn 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.
- 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
AWS Setup Integration
Guided stepsAn integration setup flow for a cloud cost tool connecting to AWS: a scope and 12-digit account ID, two aws iam commands built from that ID with a derived External ID, and a pasted role ARN that is parsed and checked against the account.
- Pro
Four Photo Slots Contact
Quotes and estimatesFour fixed photo tiles for an antiques appraiser, each filling with a thumbnail and a check, plus a category combobox and an estimated value.
- Pro
Terminal Command Showcase Features
App screensA features section for a command-line tool: four tabs (Deploy, Build, Test, Log) swap a dark terminal session typed out once, with commands, output and exit status, above three cells with overshoot that each carry a small chip.