Button
Hotkey Bound Button
The button owns its shortcut: it binds the listener, prints ⌘ on macOS and Ctrl elsewhere, and flashes when the combination actually fires.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- the caption through the label prop
- the shortcut through the combo prop: mod means Cmd on macOS and Ctrl elsewhere
- the action through the onAction prop, which a plain click fires as well
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.club/c/button-025?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
How to use
<Button025 combo="mod+s" onAction={saveDraft} label="Save draft" />A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Label
label· default: Save draft- Shortcut
combo· default: mod+s- Accent
accent· default: theme colour
More in Button
FAQ
- How do I add Hotkey Bound Button with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Hotkey Bound Button depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Hotkey Bound Button?
- Adapt: the caption through the label prop; the shortcut through the combo prop: mod means Cmd on macOS and Ctrl elsewhere; the action through the onAction prop, which a plain click fires as well. Keep as installed: the window listener together with the visible hint: the caption and the real behaviour come from the one combo prop and cannot drift apart; the ⌘ on macOS and Ctrl elsewhere substitution: a hint with the wrong modifier is worse than no hint; reading the platform through useSyncExternalStore with a false server snapshot — computing it during render would make server and client draw different keys and break hydration.
- Is Hotkey Bound Button free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/button-025.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
The component is self-contained: one file, no dependencies, its own palette in the local --vibeui-button-025-* variables. Client component: a keydown listener sits on window, and a combo of the form "mod+s" is parsed into modifiers and a main key. The platform is read through useSyncExternalStore: the server snapshot is always false, so the server and client markup match, and after hydration the keys are repainted for the system. While the focus is in an input field or a contenteditable, the shortcut is not intercepted. The handler is kept in a ref so that the listener does not resubscribe on every render.
Tags
- button
- hotkey
- keyboard
- shortcut
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…