shadcn.io is an independent project built on shadcn/ui
⌘ and S sit in one group. That is the Mac save chord as text. No save runs.
Show it on a save control, and use Ctrl S off a Mac. If save can discard work, confirm in an Alert Dialog. In Vue, Ark UI does not save the document.
Installation
Anatomy
Usage
<div class="rounded-md border bg-background p-4">
<KbdGroup><Kbd>⌘</Kbd><Kbd>S</Kbd></KbdGroup>
</div>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.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
