Packages
mishka_chelekom
0.0.9
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
usage-rules/components/keyboard.md
# Keyboard Component
Keyboard key display component for showing shortcuts, key combinations, and hotkeys.
**Documentation**: https://mishka.tools/chelekom/docs/keyboard
> **For LLM Agents**: If you need more details, examples, or edge cases not covered here, fetch the full documentation from the URL above.
## Generate
```bash
mix mishka.ui.gen.component keyboard
mix mishka.ui.gen.component keyboard --variant default,outline --color natural,dark
mix mishka.ui.gen.component keyboard --module MyAppWeb.Components.CustomKeyboard
```
## Dependencies
None (no other components, no JavaScript).
## Attributes
| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `id` | `:string` | `nil` | Unique identifier |
| `variant` | `:string` | `"base"` | Style variant — `base`, `default`, `outline`, `transparent`, `shadow`, `bordered`, `gradient` |
| `color` | `:string` | `"base"` | Color theme — `base`, `natural`, `white`, `primary`, `secondary`, `dark`, `success`, `warning`, `danger`, `info`, `silver`, `misc`, `dawn` |
| `size` | `:string` | `"medium"` | Key size — `extra_small`, `small`, `medium`, `large`, `extra_large` |
| `rounded` | `:string` | `"small"` | Border radius — `extra_small`, `small`, `medium`, `large`, `extra_large`, `full`, `none` |
| `class` | `:any` | `nil` | Custom CSS class |
## Slots
- `inner_block` — key label or content (required).
## Usage Examples
### Basic key / combination
```heex
<.keyboard>Ctrl</.keyboard>
<span class="flex items-center gap-1">
<.keyboard>Ctrl</.keyboard>
<span>+</span>
<.keyboard>C</.keyboard>
</span>
```
### Variants, colors, sizes, rounded
```heex
<.keyboard variant="default">Enter</.keyboard>
<.keyboard variant="outline">Enter</.keyboard>
<.keyboard variant="shadow">Enter</.keyboard>
<.keyboard variant="bordered">Enter</.keyboard>
<.keyboard color="natural">Esc</.keyboard>
<.keyboard color="primary">Tab</.keyboard>
<.keyboard color="dark">Space</.keyboard>
<.keyboard size="extra_small">A</.keyboard>
<.keyboard size="large">A</.keyboard>
<.keyboard size="extra_large">A</.keyboard>
<.keyboard rounded="none">Key</.keyboard>
<.keyboard rounded="large">Key</.keyboard>
<.keyboard rounded="full">Key</.keyboard>
```
### Arrow keys
```heex
<div class="flex flex-col items-center gap-1">
<.keyboard>↑</.keyboard>
<div class="flex gap-1">
<.keyboard>←</.keyboard>
<.keyboard>↓</.keyboard>
<.keyboard>→</.keyboard>
</div>
</div>
```
### Special keys
```heex
<.keyboard>⌘ Cmd</.keyboard>
<.keyboard>⌥ Alt</.keyboard>
<.keyboard>⇧ Shift</.keyboard>
<.keyboard>⌃ Ctrl</.keyboard>
```
## Common Patterns
### Shortcut documentation list
```heex
<div class="space-y-2">
<div class="flex justify-between items-center">
<span>Copy</span>
<span class="flex items-center gap-1">
<.keyboard size="small">⌘</.keyboard>
<.keyboard size="small">C</.keyboard>
</span>
</div>
<div class="flex justify-between items-center">
<span>Paste</span>
<span class="flex items-center gap-1">
<.keyboard size="small">⌘</.keyboard>
<.keyboard size="small">V</.keyboard>
</span>
</div>
</div>
```
### Inline shortcut hint
```heex
<p>
Press
<.keyboard size="small" variant="outline">Ctrl</.keyboard>
+
<.keyboard size="small" variant="outline">K</.keyboard>
to open the command palette.
</p>
```
### Search input with shortcut badge
```heex
<div class="relative">
<.text_field name="search" placeholder="Search..." />
<div class="absolute right-2 top-1/2 -translate-y-1/2">
<.keyboard size="extra_small" variant="outline" color="natural">/</.keyboard>
</div>
</div>
```
### Help modal shortcuts (grouped)
```heex
<div class="grid grid-cols-2 gap-4">
<div>
<h4 class="font-semibold mb-2">Navigation</h4>
<ul class="space-y-1">
<li class="flex justify-between">
<span>Go to Home</span>
<.keyboard size="small">G H</.keyboard>
</li>
<li class="flex justify-between">
<span>Go to Search</span>
<.keyboard size="small">/</.keyboard>
</li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-2">Actions</h4>
<ul class="space-y-1">
<li class="flex justify-between">
<span>New Item</span>
<.keyboard size="small">N</.keyboard>
</li>
<li class="flex justify-between">
<span>Edit</span>
<.keyboard size="small">E</.keyboard>
</li>
</ul>
</div>
</div>
```
### Button with shortcut hint
```heex
<.button>
Save
<span class="ml-2 opacity-60">
<.keyboard size="extra_small" variant="transparent">⌘S</.keyboard>
</span>
</.button>
```