Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Error blocks

Pro

Missing API Key Error Block for Ark UI

A full-screen page for a developer whose API key is missing: the steps to fix it, and a numbered .env window whose empty key line is marked and can be filled with a sample key that shows as a diff.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Tell a developer exactly what is missing, with this missing API key error for React with Ark UI. It's a whole screen with the page's rails and one band across it, split by a divider. At the start are the headline, one sentence, the Shine Button Open the API keys page, the only colored control, and three numbered Steps to follow: create a key, add it to .env, restart the dev server. At the end, in a themed window with a numbered gutter, sits the .env file with its empty key line marked by a heavy edge and the word missing. A Copy Button copies the file, and Generate a sample key fills the line with a typed sample and shows the change as a removed line and an added line, with an Undo. The window keeps its height in both states. The band's rules and the window's frame come from Guides, and the entrance is CSS only. For a metrics API, a developer portal or any SDK's getting-started error.

FAQ

What is real here, and what stays local?

The Copy button is real: it writes the file as it stands, with or without the sample line, to the clipboard. Generate a sample key only changes the window in the page: nothing is saved, requested or sent, and the sample is not a credential for anything. To wire it for real, drop the sample and show the line your SDK reports as missing, and send the visitor to your own key page from the one button.

Why is the key marked as not a real key?

A page that prints something that looks like a secret gets copied into real projects and trips secret scanners. The sample is a typed pw_test_demo_ value for a made-up product, it appears with the words "not a real key" next to it, and you should keep your own sample just as obviously fake. A real key is created on your keys page and never shown in an error page.

How does the diff change the file without moving the window?

The window always draws six lines. Before, the sixth is an empty numbered line; after, the key line becomes two lines, the old one struck through and marked with a minus and the new one with a plus. Screen readers get the words Removed and Added, since the signs are decoration, so the window is the same height either way.

Is the code window accessible, and what about right-to-left pages?

The line numbers are hidden from assistive technology, so only the code is read. The window scrolls sideways inside itself when a line is long, it takes a tab stop of its own and is named by its file name, and the code stays left to right in a right-to-left page, as code should. The missing line carries the word missing as well as the edge.

Do the steps change when I generate a key?

No. They are a read-only list, not a wizard: what to do, in order, with a short note each. The notes are hidden from sight on a phone to keep the button on the first screen, and stay available to screen readers.

What changes on a phone?

The headline, the sentence and the button come first, then the steps as titles, then the window with the sample controls and the status line. Nothing makes the page scroll sideways down to 320 px; a long line scrolls inside the window.

All 100 error blocks