Skip to content
zidane
UI kit reference

components/Keycap

import { … } from 'zidane-ui'ui/src/components/Keycap.tsx

CodeFrame with caption
agent.ts
const agent = createAgent({ ...basic, provider })
await agent.run({ prompt: 'build a REST API' })
CodeFrame plain (copy on hover), long line
cat packages/server/src/handlers/very-long-folder-name/another-nested-directory/session-title-generator.ts | head -n 200 # a long line scrolls inside the frame
CodePanel
$ bun test
41 passed
CopyButton inline, Keycaps
Command KCommand Shift Returnesc

Components#

KeycapComponent#

One key, for places that show a single glyph or word (esc, ↵).

TypeScript
function Keycap(props: KeycapProps): Element

Parameters

Parameters
NameTypeDescription
propsKeycapProps

Component props.

Returns

Element

Props

Keycap props
NameTypeDescription
childrenReactNode

The key's glyph or word.

className?string

Extra classes on the keycap.

style?CSSProperties

Inline styles on the root element, merged after the component's own.

ui/src/components/Keycap.tsx:35

KeyComboComponent#

One chord as keycaps (cmd+k → ⌘ K), macOS glyphs. size="sm" for dense rows (footer hints), default for lists. Several alternatives (ctrl+w | cmd+w) are the caller's business: render one KeyCombo each.

TypeScript
function KeyCombo(props: KeyComboProps): Element

Parameters

Parameters
NameTypeDescription
propsKeyComboProps

Component props.

Returns

Element

Props

KeyCombo props
NameTypeDefaultDescription
className?string

Extra classes on the wrapping element.

physical?boolean

The chord names physical keys (an app key binding): a punctuation key shows what the user's keyboard layout prints on it (< for the backquote key on a French Mac), once the layout is known.

size?'sm' | 'md''md'

Cap size. Use sm for dense rows such as footer hints.

specstring

The chord, keys joined by +, such as cmd+shift+k. Modifiers are ctrl, cmd (or meta), shift and alt (or option); named keys are enter, up, down, left, right, tab and esc. Any other key shows as typed, uppercased when one character.

spoken?boolean

Off where the control already announces the chord (aria-keyshortcuts on a menu row).

style?CSSProperties

Inline styles on the root element, merged after the component's own.

ui/src/components/Keycap.tsx:76

Interfaces#

KeycapPropsInterface#

Props for Keycap.

TypeScript
interface KeycapProps

Properties

KeycapProps properties
NameTypeDescription
childrenReactNode

The key's glyph or word.

className?string

Extra classes on the keycap.

style?CSSProperties

Inline styles on the root element, merged after the component's own.

ui/src/components/Keycap.tsx:21

KeyComboPropsInterface#

Props for KeyCombo.

TypeScript
interface KeyComboProps

Properties

KeyComboProps properties
NameTypeDefaultDescription
className?string

Extra classes on the wrapping element.

physical?boolean

The chord names physical keys (an app key binding): a punctuation key shows what the user's keyboard layout prints on it (< for the backquote key on a French Mac), once the layout is known.

size?'sm' | 'md''md'

Cap size. Use sm for dense rows such as footer hints.

specstring

The chord, keys joined by +, such as cmd+shift+k. Modifiers are ctrl, cmd (or meta), shift and alt (or option); named keys are enter, up, down, left, right, tab and esc. Any other key shows as typed, uppercased when one character.

spoken?boolean

Off where the control already announces the chord (aria-keyshortcuts on a menu row).

style?CSSProperties

Inline styles on the root element, merged after the component's own.

ui/src/components/Keycap.tsx:44