Code Key

beta

A picture of owning the code: a key whose handle holds a code mark, with scrambled characters in the corner.

Preview

brand tone, no characters

no dots, narrow container

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```
3. Add the illustration. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.
```
npx shadcn@latest add @txbrendan/code-key
```

A feature section about owning what you get, like code that is copied into your app for you to change.
Put it in a Feature Grid item's `illustration`, or a Bento Card's `preview`.
Set `tone` to color the code mark, like brand for your main color.
Write `label` as one sentence that says what the picture shows. Screen readers hear it in place of the drawing.

glyphs
Scrambled characters in the top corner, four to a row. An empty string hides them.
string · default "0x1F{}<>;=/*"
label
What the picture says, read out in its place.
string · default a sentence about the key
tone
The color of the code mark in the key's handle.
"neutral" | "brand" | "danger" | "success" | "warning" · default "neutral"
pattern
A field of dots behind the key.
boolean · default true
className
Extra classes on the root.
string

Prop	Type	Default	What it does
glyphs	string	"0x1F{}<>;=/*"	Scrambled characters in the top corner, four to a row. An empty string hides them.
label	string	a sentence about the key	What the picture says, read out in its place.
tone	"neutral" \| "brand" \| "danger" \| "success" \| "warning"	"neutral"	The color of the code mark in the key's handle.
pattern	boolean	true	A field of dots behind the key.
className	string	-	Extra classes on the root.

The root is one image, named by `label`. The drawing and the characters are hidden from screen readers.
Nothing inside takes focus.
On hover the key lifts by the motion distance. Reduced motion sets that to 0, so it stays still.

<CodeKey />

<CodeKey glyphs="" tone="brand" label="The code is copied into your app, and it is yours." />