shadcn.io is not affiliated with official shadcn/ui
API Key Setup Onboarding Block for Ark UI
A first-key step that asks where the key will be used: two radio cards (browser or server), the one extra field each needs, the key drawn with its scopes and a Copy button, and a secret key masked after Continue.
Installation
Overview
Ask the one question most key pages skip with this API key step for React with Ark UI. It is a step of Parcelwick, a shipping-rates API, as a whole screen: the page's rails and one band, a step header (“Step 4 of 6” and a hairline) and a framed panel in two halves. At the start two native radio cards choose where the key will live (Browser or mobile app gets a publishable key that can only read; My server gets a secret key that can also write) and show the field that choice needs: allowed https origins as chips, or a tick that you will keep the key out of source control. At the end the key is drawn: its kind, its scopes in a Data List and a read-only field in an Input Group with a Copy Button. Create key is the one Shine Button and becomes Continue; a secret key is shown once and masked after it, a publishable one stays visible. On a phone the key sits under the fields.
FAQ
What decides the kind of key?
The card you pick. Each entry in KINDS has an id, a title, a hint, a prefix, the demo key, its scopes and how it is shown. Publishable means the key can only read and may sit in a page or an app; secret means it can also write and must stay on a server. The extra field follows the kind: origins for a publishable key, a tick for a secret one. Both fields share one cell, so switching cards never moves the page.
What does “shown once” do here?
After Create key the key is in the field with a working Copy button and the primary reads Continue. Continue masks a secret key (pw-sec-demo-••••••••) and turns Copy off, because nothing can bring it back; a publishable key stays visible and copyable. In your app show the real key once from the API response and store only its hash.
How are origins checked?
Each chip must be an https address with a host that has a dot and no path, such as https://shop.example.test, and the same origin can't be added twice. The check is ORIGIN at the top of the file, and a refused one says why in the line under the field. Create key refuses a publishable key with no origin and puts focus back in that field. Replace the check with your own rules, for example wildcards for subdomains.
Is the Copy button real, and is the key?
The clipboard is real: Copy puts the text on it, and says “Copied” to a screen reader. The key isn't: it's a typed string with no vendor's shape, and nothing is issued, saved or sent. Replace the click in submit with a call that creates the key and shows what the response returns.
What stays local in the demo, and how do I wire it?
Everything. Create key shows the typed key and Continue says the key was stored in this demo. In your app send the kind and origins to your server where submit says so, show the key you get back once, and store it where the visitor's secrets belong. The tick is a promise, not a control: check it against how your docs tell people to store keys.