ui/docs/content/1.getting-started/4.shortcuts.md

description

description
Learn how to display and define keyboard shortcuts in your app.

Overview

Some components like Dropdown, Command Palette and Tooltip support the display of keyboard shortcuts.

<UDropdown :items="[{ label: 'Edit', shortcuts: ['E'] }]" />

Shortcuts are displayed and styled through the Kbd component.

<template>
  <div class="flex items-center gap-0.5">
    <UKbd>⌘</UKbd>
    <UKbd>K</UKbd>
  </div>
</template>

::alert{icon="i-heroicons-light-bulb"} You will have a preview of how shortcuts are rendered in each component page. ::

defineShortcuts

This module provides a defineShortcuts composable that allows you to define keyboard shortcuts in your app really easily.

<template>
  <UModal v-model="isOpen" />
</template>

<script setup lang="ts">
const isOpen = ref(false)

defineShortcuts({
  meta_k: {
    usingInput: true,
    handler: () => {
      isOpen.value = !isOpen.value
    }
  }
})
</script>

useShortcuts

To display shortcuts in your app according to the user's OS, you can use the useShortcuts composable.

<script setup>
const { metaSymbol } = useShortcuts()
</script>

<template>
  <UKbd>{{ metaSymbol }}</UKbd>
</template>