shadcn.io is an independent project built on shadcn/ui
The first cap is ⌃ and the second is Space, in one group. It is how Mac menus write Control. The demo does not register the keys.
Use ⌃ for Mac Control, not for Windows Ctrl. Put the hint on the control that handles it, such as a Button. In React, Base UI does not bind Control Space.
Installation
Anatomy
Usage
<div className="rounded-md border bg-background p-4">
<KbdGroup>
<Kbd>⌃</Kbd>
<Kbd>Space</Kbd>
</KbdGroup>
</div>FAQ
What's the difference between Control and Command on Mac?
Command runs app shortcuts like copy and save. Control is used for terminal shortcuts, some system shortcuts and a few app ones, and Control click opens the context menu.
What is the ⌃ symbol and how do I type it?
It's the up arrowhead, U+2303. Paste it from macOS's Character Viewer or copy it from here; it's a plain character in the string.
Which Control shortcuts do Mac users need?
⌃Space to switch input sources, ⌃⌘Space for the emoji and symbol picker, ⌃ with the arrow keys for Mission Control and spaces, and ⌃Tab to switch tabs in many apps.
Is ⌃Space the Spotlight shortcut?
No, Spotlight is ⌘Space. ⌃Space switches between input sources by default, and code editors often use it to show suggestions.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
