# API keys

A developer makes, copies and revokes the keys that connect their own tools to the account: a table of keys, a create dialog that shows the new key once, and a curl example beside the webhook events.

Block · With a Pass · https://tactileui.dev/blocks/api-keys

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Use it

With a Pass, install it with npx shadcn add @tactile/api-keys (https://tactileui.dev/docs/registry-and-mcp). It lands in tactile/api-keys/.

Load the stylesheet as well as the module, or it renders unstyled: tactile/api-keys/api-keys.css. In a bundler such as Vite, import each CSS file next to the module import; in plain HTML, link it.

Then mount(element, options) from tactile/api-keys/api-keys.mjs. Every option has a default; tactile/api-keys-example.html shows it running. The sample copy (headings, labels, figures) is placeholder: replace it with the page's own.

## Anatomy

Key table, Row menu, Create dialog two step, Secret field once, Copy key, Scope checkboxes, Expiry select, Revoke alert dialog, Curl example, Webhook events timeline, Phone cards, Full screen dialog, Finish following, Quiet volume

## Usage notes

The developer settings screen of an app: a key is made once, copied before the panel closes, and revoked with a question that says what stops. The page head carries the one contrast key; the table is the record of every key with its prefix, scopes, dates and state; the code block and the webhook events say how a key is used. The create dialog takes a name, scopes and an expiry, then the key is shown in a secret field with a copy key and never again.

## Options

| Option | Type | Description |
| - | - | - |
| title | text | Page title |
| lead | text | Lead |
| state | enum | Normal, the skeleton while the scopes load, no keys yet, the name field’s error, or a key just created. |
| finish | enum | Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. |

## Methods

- rows
- update
- destroy

## States

1. **At rest**: The breadcrumb Settings then API keys; the page head with the title, the lead and the Create key; the Keys panel with three rows; the curl example and the four webhook events below. Nothing runs.
2. **Create dialog**: Create key opens a native dialog: Name with the placeholder Billing sync, the Scopes checkboxes with Read invoices and Read clients checked, Expiry at 90 days, a flat Cancel and the contrast key Create key. Focus starts in the Name field.
3. **Name missing**: Pressing Create key with an empty name puts Give the key a name you will recognise. in the field's hint, marks the field in error and leaves the focus there. No scope chosen says Choose at least one scope. under the scopes.
4. **Key created**: A named key closes the dialog and shows a Panel headed Key created with a lit lamp and Shown once, the warning that this is the only time the key is shown, the key in a Secret field and a Copy key under it. The new row appears at the top with its prefix, scopes, today's date, Never and Active.
5. **Revoking**: The row menu's Revoke key opens the Alert dialog with a red lamp and Cannot be undone. The title names the key and the body reads Anything using this key stops working at once. Keep key is the safe key and has the focus; confirming marks the row Revoked and puts its lamp out.
6. **Loading**: The last used cell of every row is a skeleton bar; Create key is disabled until the scopes load and the row menu keys are disabled. The name, prefix, scopes, created date and state still print.
7. **Empty**: No keys yet. Create one to connect your own tools. with a plain Create key, and the curl example and webhook events stay visible under it.
8. **Error**: The create dialog is open with Give the key a name you will recognise. under the empty Name field; the revoke alert dialog reads Anything using this key stops working at once.
9. **Success**: The Key created panel sits above the keys panel, the copy key says Copied and its lamp lights, and the new row is at the top.
10. **Phone**: The create dialog takes the whole screen.
11. **Keyboard**: Enter opens the create dialog from Create key and Escape returns the focus there; Space reveals the secret field and checks the scopes; the copy key says Copied; the row menu opens from its key and Escape returns the focus.
12. **Reduced motion**: The Key created panel appears whole and its lamp is steady; the copy lamp does not wink; nothing else moves.
13. **Finishes and volume**: Every surface and lamp reads the kit's tokens, so all fourteen finishes follow. The screen is set in the Quiet volume; its parts keep their sizes and draw hairlines and a whisper of depth.

## How it works

Original composition. Ledgerly, its keys, the addresses and the webhook events are sample copy for an invented invoicing app, and the preview says so. The screen is made only of the Tactile UI Kit's parts, with the kit's tokens for every surface and lamp; the block writes no colour and changes no part's finish. It needs the kit's kit.css and kit.mjs beside it.