Efniv0.1

Components

Kbd

Renders a keyboard key. Use in tooltips, menus, and shortcut lists so operators can learn the keys as they work.

When to useto name a keyboard key or a shortcut combo inside prose, menus, or tooltips.

Import

import { Kbd, KbdGroup } from "@ravnhq/efni/kbd"

Inline

Press ⌘ K to open the palette. On Windows, substitute Ctrl.

Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the palette.

Grouped

⌘+K⌘+⇧+P
<KbdGroup>
  <Kbd>⌘</Kbd>
  <span className="text-muted-foreground">+</span>
  <Kbd>K</Kbd>
</KbdGroup>

Shortcut list

  • Open command palette⌘+K
  • New mission⌘+N
  • Assign operator⌘+⇧+A
  • Focus search/
  • Toggle theme⌘+⇧+L

Props

PropTypeDefaultDescription
…props (Kbd)React.ComponentProps<"kbd">—Everything Kbd passes to the element it renders.
…props (KbdGroup)React.ComponentProps<"div">—Everything KbdGroup passes to the element it renders.