Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kbd examples · Pressed State

Pressed Down Kbd for React

A ⌘K shortcut whose Command key sits lower, as if pressed down.

Framework
UI library

A real key moves when you press it. This React example moves the Command key of a ⌘K KbdGroup down by two pixels with translate-y-0.5, so it sits a little below K, as if held down. The color doesn't change: the offset alone suggests the press.

Preview

Preview width
⌘K

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

FAQ

When should keys show a pressed-down effect?

In shortcut trainers and on-screen keyboards that react to the keys the user presses, and in step-by-step tutorials that show which key to hold. In static documentation, leave every key flat.

How does translate-y create the pressed effect?

translate-y-0.5 moves the cap down by two pixels without affecting the layout around it, so the next key doesn't shift. The Kbd has no shadow, so there's nothing to remove; if you add a shadow to your caps, drop it on the pressed one to make it look flush.

How long should the pressed state last?

As long as the key is held. In an interactive demo, add the class on keydown and remove it on keyup; in a static illustration it stays on.

Can several keys look pressed at once?

Yes, that's how a chord works: ⌘ goes down, then K. Put the class on each key that's held, and the caps that aren't stay up.

Should the release be instant or animated?

A very short transition, under 100 milliseconds, feels like a key springing back; a longer one feels sluggish. Respect reduced motion by dropping the transition.

Is the pressed effect accessible?

A two-pixel shift is easy to miss, and screen readers don't see it at all. Pair it with a color change, as the Active State example does, and say what's pressed in text when it matters.

All 39 kbd examples