Kbd

<div class="flex flex-wrap items-center gap-3">
    <x-ui.kbd size="xs">kbd xs </x-ui.kbd>
    <x-ui.kbd size="sm">Kbd sm</x-ui.kbd>
    <x-ui.kbd> Kbd md</x-ui.kbd>
    <x-ui.kbd size="lg">Kbd lg</x-ui.kbd>
    <x-ui.kbd size="xl"> Kbd xl</x-ui.kbd>
</div>

<div class="flex flex-wrap items-center gap-3">
    <x-ui.kbd>
        <span aria-hidden="true" class="flex iconify ph--caret-down"></span>
    </x-ui.kbd>
    <x-ui.kbd variant="outline">
        <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round">
            <path d="M9 18v-6H5l7-7 7 7h-4v6H9z" />
        </svg>
    </x-ui.kbd>
    <x-ui.kbd variant="outline" class="min-w-[30px] flex items-center justify-center text-sm">
        /
    </x-ui.kbd>
</div>

<div class="flex flex-wrap gap-3">
    <div class="flex items-center gap-x-2">
        <x-ui.kbd class="flex items-center gap-0.5">
            <span aria-hidden="true" class="flex iconify ph--command"></span> K
        </x-ui.kbd>
        <span class="text-fg">
            And
        </span>
        <x-ui.kbd class="flex items-center gap-0.5">
            <span aria-hidden="true" class="flex iconify ph--command"></span> + R
        </x-ui.kbd>
    </div>
</div>