Kbd

Used to display textual user input from keyboard.

Loading... 
<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

Ensure the Symfony UX Toolkit is installed in your Symfony app:

$ composer require --dev symfony/ux-toolkit

Then, run the following command to install the component and its dependencies:

$ bin/console ux:install kbd --kit shadcn

The UX Toolkit is not mandatory to install a component. You can install it manually by following the next steps:

  1. Copy the following file(s) into your Symfony app:
    templates/components/Kbd.html.twig 
    {# @block content The default block #}
<kbd
    class="{{ ('bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</kbd>
    templates/components/KbdGroup.html.twig 
    {# @block content The default block #}
<kbd class="inline-flex items-center gap-1">
    {%- block content %}{% endblock -%}
</kbd>
  2. If necessary, install the following Composer dependencies: 
    $ composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0
  3. And the most important, enjoy!

Usage

<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>

Examples

Default

Loading... 
<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>

Group

Use the KbdGroup component to group keyboard keys together.

Loading... 
<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.

Loading... 
<div class="flex flex-wrap items-center gap-4">
  <twig:Button size="sm" class="pr-2">
    Accept <twig:Kbd>⏎</twig:Kbd>
  </twig:Button>
  <twig:Button variant="outline" size="sm" class="pr-2">
    Cancel <twig:Kbd>Esc</twig:Kbd>
  </twig:Button>
</div>

API Reference

Kbd

Block Description
content The default block

KbdGroup

Block Description
content The default block