Kbd

Used to display textual user input from keyboard.

<div class="flex flex-col items-center gap-4">
    <twig:KbdGroup>
        <twig:Kbd>⌘</twig:Kbd>
        <twig:Kbd>⇧</twig:Kbd>
        <twig:Kbd>⌥</twig:Kbd>
        <twig:Kbd>⌃</twig:Kbd>
    </twig:KbdGroup>
    <twig:KbdGroup>
        <twig:Kbd>Ctrl</twig:Kbd>
        <span>+</span>
        <twig:Kbd>B</twig:Kbd>
    </twig:KbdGroup>
</div>

Installation

bin/console ux:install kbd --kit shadcn

That's it!

Install the following Composer dependencies:

composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your Symfony app:

templates/components/Kbd.html.twig

{# @block content The keyboard key text (e.g., "Ctrl", "⌘", "Enter") #}
<kbd
    data-slot="kbd"
    class="{{ ('pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*=\'size-\'])]:size-3 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</kbd>

templates/components/KbdGroup.html.twig

{# @block content The keyboard shortcut combination, typically multiple `Kbd` components #}
<kbd
    data-slot="kbd-group"
    class="{{ ('inline-flex items-center gap-1 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</kbd>

Happy coding!

Usage

<twig:Kbd>Ctrl</twig:Kbd>

Examples

Group

Use the KbdGroup component to group keyboard keys together.

<div class="flex flex-col items-center gap-4">
  <p class="text-muted-foreground text-sm">
    Use
    <twig:KbdGroup>
      <twig:Kbd>Ctrl + B</twig:Kbd>
      <twig:Kbd>Ctrl + K</twig:Kbd>
    </twig:KbdGroup>
    to open the command palette
  </p>
</div>

Button

Use the Kbd component inside a Button component to display a keyboard key inside a button.

<twig:Button variant="outline">
    Accept <twig:Kbd data-icon="inline-end" class="translate-x-0.5">⏎</twig:Kbd>
</twig:Button>

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

<div class="flex flex-wrap gap-4">
    <twig:ButtonGroup>
        <twig:Tooltip id="tooltip-kbd-save">
            <twig:Tooltip:Trigger>
                <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="rounded-r-none">Save</twig:Button>
            </twig:Tooltip:Trigger>
            <twig:Tooltip:Content>
                Save Changes <twig:Kbd>S</twig:Kbd>
            </twig:Tooltip:Content>
        </twig:Tooltip>
        <twig:Tooltip id="tooltip-kbd-print">
            <twig:Tooltip:Trigger>
                <twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="rounded-l-none border-l-0">Print</twig:Button>
            </twig:Tooltip:Trigger>
            <twig:Tooltip:Content>
                Print Document <twig:KbdGroup>
                    <twig:Kbd>Ctrl</twig:Kbd>
                    <twig:Kbd>P</twig:Kbd>
                </twig:KbdGroup>
            </twig:Tooltip:Content>
        </twig:Tooltip>
    </twig:ButtonGroup>
</div>

Input Group

You can use the Kbd component inside an InputGroup:Addon component to display a keyboard key inside an input group.

<div class="flex w-full max-w-xs flex-col gap-6">
    <twig:InputGroup>
        <twig:InputGroup:Input placeholder="Search..." />
        <twig:InputGroup:Addon>
            <twig:ux:icon name="lucide:search" />
        </twig:InputGroup:Addon>
        <twig:InputGroup:Addon align="inline-end">
            <twig:Kbd>⌘</twig:Kbd>
            <twig:Kbd>K</twig:Kbd>
        </twig:InputGroup:Addon>
    </twig:InputGroup>
</div>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

<div class="flex flex-col gap-8">
    {# Arabic #}
    <div class="flex flex-col items-center gap-4" dir="rtl">
        <twig:KbdGroup>
            <twig:Kbd>⌘</twig:Kbd>
            <twig:Kbd>⇧</twig:Kbd>
            <twig:Kbd>⌥</twig:Kbd>
            <twig:Kbd>⌃</twig:Kbd>
        </twig:KbdGroup>
        <twig:KbdGroup>
            <twig:Kbd>Ctrl</twig:Kbd>
            <span>+</span>
            <twig:Kbd>B</twig:Kbd>
        </twig:KbdGroup>
    </div>

    {# Hebrew #}
    <div class="flex flex-col items-center gap-4" dir="rtl">
        <twig:KbdGroup>
            <twig:Kbd>⌘</twig:Kbd>
            <twig:Kbd>⇧</twig:Kbd>
            <twig:Kbd>⌥</twig:Kbd>
            <twig:Kbd>⌃</twig:Kbd>
        </twig:KbdGroup>
        <twig:KbdGroup>
            <twig:Kbd>Ctrl</twig:Kbd>
            <span>+</span>
            <twig:Kbd>B</twig:Kbd>
        </twig:KbdGroup>
    </div>
</div>

API Reference

Component `Kbd`

Block	Description
`content`	The keyboard key text (e.g., "Ctrl", "⌘", "Enter")

Component `KbdGroup`

Block	Description
`content`	The keyboard shortcut combination, typically multiple `Kbd` components

Kbd