# Code Key

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

- Name: `code-key`
- Status: beta
- Categories: ownership, code, key, open
- Files: the install writes `code-key.tsx`, and any part files named `code-key-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Gallery: https://arbokui.com/illustrations/code-key
- Registry item: https://arbokui.com/r/code-key.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the illustration. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @arbokui/code-key
   ```

## Use it for

- 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.

## Avoid it for

- A sign-in or locked screen. Use No Access.
- A small icon beside text. Use the Key icon from lucide-react.

## Props

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

## Accessibility

- 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.

## Examples

### The default key

```tsx
<CodeKey />
```

### No characters, in your brand color

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