Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kbd examples · Shortcut

Save Shortcut Kbd for React

The ⌘S save shortcut as a key group.

Framework
UI library

People press save out of habit, even in apps that save on their own. This React example shows ⌘ and S in a KbdGroup, which spaces the two caps evenly and marks them as one shortcut. Put it next to a Save button or in an editor's menu, and show Ctrl S instead on Windows and Linux.

Preview

Preview width
⌘S

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.

FAQ

Why is ⌘S save in every app?

S for save was set early by the Macintosh's standard File menu, and Windows followed with Ctrl S. Decades of habit made it one of the shortcuts people press without thinking.

Is it ⌘S on Mac and Ctrl S everywhere else?

Yes: ⌘S on macOS, Ctrl S on Windows, Linux and ChromeOS. Show the one that matches the user's platform, as the Platform-Aware Shortcut example does.

Should a web app with autosave still handle ⌘S?

Yes. Without a handler, the browser opens its own Save Page dialog, which is never what someone in your editor wants. Handle it with a keydown listener and preventDefault, then save now or confirm that everything is already saved.

What should people see after pressing ⌘S?

A short confirmation: Saved in the toolbar, a check on the Save button or a toast. If saving takes time, show progress, and if it fails, say so and keep the changes.

Should ⌘S do nothing when there's nothing to save?

Still catch it so the browser's dialog doesn't open, and confirm that everything is saved. Disabling the Save button is fine; ignoring the shortcut silently isn't.

Can people save without the shortcut?

They must be able to: always offer a visible Save Button or menu item. The key caps next to it teach the shortcut to people who want it.