Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Modifier Keys Kbd for Ark UI

Shift, Ctrl, and Alt as three separate caps in a row, a legend of modifier names rather than one chord.

Three caps sit in a row with a small gap. They are not in a group, so they do not read as one shortcut. Each name is hard-coded.

Use the row on a keyboard reference page. In a real shortcut, group only the keys held together, on Kbd. In React, Ark UI does not treat these caps as modifiers.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Kbd anatomy: kbd, group

Usage

<div className="rounded-md border bg-background p-4">
  <div className="flex gap-1">
    <Kbd>Shift</Kbd>
    <Kbd>Ctrl</Kbd>
    <Kbd>Alt</Kbd>
  </div>
</div>

FAQ

Should I show Mac and Windows modifiers separately?

Show the user's own: ⌘ Command, ⌥ Option, ⌃ Control and ⇧ Shift on Mac; Ctrl, Alt and Shift on Windows and Linux. Ctrl usually maps to ⌘ and Alt to ⌥, but not always, so check each shortcut.

Should I document modifiers alone or in shortcuts?

In shortcuts, mostly: a modifier on its own does nothing. A row like this one belongs on a reference page that explains the keys before listing what they combine with.

Should I include the Windows or Command key?

Include ⌘ for Mac users, since most Mac shortcuts use it. The Windows key is mostly reserved for the operating system, so web apps rarely use it.

Are modifier shortcuts accessible?

Holding a modifier while pressing another key is hard for some people. Sticky keys in the operating system help, but every command should also be reachable without a shortcut.

In what order should modifiers appear in a shortcut?

On Mac, ⌃ ⌥ ⇧ ⌘, then the key. On Windows, Ctrl first, as in Ctrl Shift P or Ctrl Alt Delete. Keep one order across your app.

What about shortcuts the browser already uses?

Avoid them where you can: Ctrl T, Ctrl W and Ctrl N belong to the browser and can't be overridden. Others, like Ctrl S or Ctrl K, can be caught with preventDefault; do it only when your app has a clear use for them.

API Reference

Kbd

No extra props in this demo. The rest is on the Kbd page.

All 39 kbd examples