Kbd

Used to display textual user input from keyboard.

⌘ ⇧ ⌥ ⌃Ctrl +B

package examples import "github.com/axadrn/shadcn-templ/v2/components/kbd"

package examples import "github.com/axadrn/shadcn-templ/v2/components/kbd" templ KbdDemo() {	<div class="flex flex-col items-center gap-4">		@kbd.Group() {			@kbd.Kbd() {				⌘			}			@kbd.Kbd() {				⇧			}			@kbd.Kbd() {				⌥			}			@kbd.Kbd() {				⌃			}		}		@kbd.Group() {			@kbd.Kbd() {				Ctrl			}			<span>+</span>			@kbd.Kbd() {				B			}		}	</div>}

Installation

shadcn-templ add kbd

Copy and paste the following code into your project.

components/kbd/kbd.templ

package kbd import "github.com/axadrn/shadcn-templ/v2/utils" type Props struct {	ID         string	Class      string	Attributes templ.Attributes} type GroupProps struct {	ID         string	Class      string	Attributes templ.Attributes} templ Kbd(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	<kbd		if p.ID != "" {			id={ p.ID }		}		data-slot="kbd"		class={			utils.CN(				"cn-kbd pointer-events-none inline-flex items-center justify-center select-none",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</kbd>} templ Group(props ...GroupProps) {	{{ var p GroupProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<kbd		if p.ID != "" {			id={ p.ID }		}		data-slot="kbd-group"		class={ utils.CN("cn-kbd-group inline-flex items-center", p.Class) }		{ p.Attributes... }	>		{ children... }	</kbd>}

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/kbd"

@kbd.Kbd() {	Ctrl}

Composition

Use the following composition to build Kbd and KbdGroup:

kbd.Kbdkbd.Group├── kbd.Kbd└── kbd.Kbd

Group

Use the kbd.Group component to group keyboard keys together.

Use Ctrl + B Ctrl + K to open the command palette

package examples import "github.com/axadrn/shadcn-templ/v2/components/kbd"

package examples import "github.com/axadrn/shadcn-templ/v2/components/kbd" templ KbdGroupExample() {	<div class="flex flex-col items-center gap-4">		<p class="text-sm text-muted-foreground">			Use{ " " }			@kbd.Group() {				@kbd.Kbd() {					Ctrl + B				}				@kbd.Kbd() {					Ctrl + K				}			}			{ " " }to open the command palette		</p>	</div>}

Button

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

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/kbd") templ KbdButton() {	@button.Button(button.Props{Variant: button.VariantOutline}) {		Accept		@kbd.Kbd(kbd.Props{			Class:      "translate-x-0.5",			Attributes: templ.Attributes{"data-icon": "inline-end"},		}) {			⏎		}	}}

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

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/buttongroup"	"github.com/axadrn/shadcn-templ/v2/components/kbd"	"github.com/axadrn/shadcn-templ/v2/components/tooltip") templ KbdTooltip() {	<div class="flex flex-wrap gap-4">		@buttongroup.ButtonGroup() {			@tooltip.Tooltip() {				@button.Button(button.Props{					Variant:    button.VariantOutline,					Attributes: tooltip.Trigger(ctx),				}) {					Save				}				@tooltip.Content() {					Save Changes					@kbd.Kbd() {						S					}				}			}			@tooltip.Tooltip() {				@button.Button(button.Props{					Variant:    button.VariantOutline,					Attributes: tooltip.Trigger(ctx),				}) {					Print				}				@tooltip.Content() {					Print Document					@kbd.Group() {						@kbd.Kbd() {							Ctrl						}						@kbd.Kbd() {							P						}					}				}			}		}	</div>}

Input Group

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

⌘ K

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/components/inputgroup"	"github.com/axadrn/shadcn-templ/v2/components/kbd") templ KbdInputGroup() {	<div class="flex w-full max-w-xs flex-col gap-6">		@inputgroup.InputGroup() {			@inputgroup.Input(inputgroup.InputProps{Placeholder: "Search..."})			@inputgroup.Addon() {				@icon.Search()			}			@inputgroup.Addon(inputgroup.AddonProps{Align: inputgroup.AlignInlineEnd}) {				@kbd.Kbd() {					⌘				}				@kbd.Kbd() {					K				}			}		}	</div>}

API Reference

Kbd

Use the Kbd component to display a keyboard key.

Prop	Type	Default
`Class`	`string`	-

@kbd.Kbd() {	Ctrl}

KbdGroup

Use the kbd.Group component to group Kbd components together.

Prop	Type	Default
`Class`	`string`	-

@kbd.Group() {	@kbd.Kbd() {		Ctrl	}	@kbd.Kbd() {		B	}}

Item Label

On This Page

Installation Usage Composition Group Button Tooltip Input Group API Reference Kbd KbdGroup

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.