KeyCap
A visual component for displaying keyboard keys, shortcuts, and key combinations with proper styling.
Source
LLM docs
Package
Examples
4
Properties
41
Hooks
1
Playground
Basics
Basic keyboard key display for showing shortcuts and key combinations.
Loading demo…
import { Block, KeyCap, Row } from '@plocks/ui';
export function Demo() {
return (
<Block align="flex-start">
<Row gap="sm" wrap="wrap">
<KeyCap>A</KeyCap>
<KeyCap>Enter</KeyCap>
<KeyCap>Space</KeyCap>
<KeyCap>⌘</KeyCap>
<KeyCap>Ctrl</KeyCap>
<KeyCap>⇧</KeyCap>
</Row>
</Block>
);
}Sizes
Different sizes for KeyCap components from extra small to extra large.
Loading demo…
import { Block, KeyCap, Row } from '@plocks/ui';
export function Demo() {
return (
<Block align="flex-start">
<Row gap="sm" align="center" wrap="wrap">
<KeyCap size="xs">XS</KeyCap>
<KeyCap size="sm">SM</KeyCap>
<KeyCap size="md">MD</KeyCap>
<KeyCap size="lg">LG</KeyCap>
<KeyCap size="xl">XL</KeyCap>
</Row>
</Block>
);
}Variants
Different visual variants for KeyCap components including default, filled, minimal, and outline styles.
Loading demo…
import { Block, KeyCap, Row } from '@plocks/ui';
export function Demo() {
return (
<Block align="flex-start">
<Row gap="sm" wrap="wrap">
<KeyCap variant="default">Default</KeyCap>
<KeyCap variant="filled">Filled</KeyCap>
<KeyCap variant="minimal">Minimal</KeyCap>
<KeyCap variant="outline">Outline</KeyCap>
</Row>
</Block>
);
}Modifiers
KeyCap components with modifier keys for displaying keyboard shortcuts and key combinations.
Loading demo…
import { Block, KeyCap, Row, Text } from '@plocks/ui';
export function Demo() {
return (
<Block>
<Row gap="xs" align="center">
<Text>Copy</Text>
<KeyCap keyCode="C" modifiers={['cmd']} size="sm">⌘</KeyCap>
<Text>+</Text>
<KeyCap keyCode="C" modifiers={['cmd']} size="sm">C</KeyCap>
</Row>
<Row gap="xs" align="center">
<Text>Save</Text>
<KeyCap keyCode="S" modifiers={['cmd']} size="sm">⌘</KeyCap>
<Text>+</Text>
<KeyCap keyCode="S" modifiers={['cmd']} size="sm">S</KeyCap>
</Row>
<Row gap="xs" align="center">
<Text>Undo</Text>
<KeyCap keyCode="Z" modifiers={['cmd']} size="sm">⌘</KeyCap>
<Text>+</Text>
<KeyCap keyCode="Z" modifiers={['cmd']} size="sm">Z</KeyCap>
</Row>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources