shadcn.io is an independent project built on shadcn/ui
Three caps in a row read Esc, Tab, and Enter. They are not grouped, so each one stands alone. None of them is wired to a key event.
Show the one key a screen actually uses, next to that control. A Dialog already closes on Esc, so that hint is optional. In Vue, Ark UI does not listen for these three keys.
Installation
Anatomy
Usage
<div class="rounded-md border bg-background p-4">
<div class="flex gap-1"><Kbd>Esc</Kbd><Kbd>Tab</Kbd><Kbd>Enter</Kbd></div>
</div>FAQ
Which special keys should I document?
The ones whose behavior isn't obvious in your app: Esc if it closes panels or cancels edits, Enter if it submits or confirms, Tab if focus moves through a custom widget. Standard form behavior rarely needs a hint.
Should I show them alone or with modifiers?
Alone when the key does the job by itself, like Esc to close. Combined when it needs a modifier, like Shift Tab to go back or ⌘ Enter to send a message in a multi-line field.
When should a form show Esc, Tab or Enter?
When the form does something unexpected with them: Enter adds a tag instead of submitting, ⌘ Enter submits from a text area, Esc discards changes. Put the hint next to the field or button it affects.
Should dialogs show that Esc closes them?
The Dialog closes on Esc already, and most people expect it, so a hint is optional. It helps in focused tools like a command palette, where Esc is part of the flow.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
