shadcn-templ

Examples

DashboardAuthenticationCardsTasksFormsMusicMail

Components

AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Kbd

Kbd

Used to display textual user input from keyboard.

Press⌘ + Kto open command palette.

Ctrl + Cto copy.

⇧⌘P

templ
templ KbdDemo() {
	<div class="flex flex-wrap items-center gap-4">
		<p class="text-sm text-muted-foreground">
			Press
			@ui.Kbd("", nil) {
				{ "⌘" }
			}
			{ " + " }
			@ui.Kbd("", nil) {
				K
			}
			to open command palette.
		</p>
		<p class="text-sm text-muted-foreground">
			@ui.Kbd("", nil) {
				Ctrl
			}
			{ " + " }
			@ui.Kbd("", nil) {
				C
			}
			to copy.
		</p>
		<p class="text-sm text-muted-foreground">
			@ui.Kbd("", nil) {
				{ "⇧⌘P" }
			}
		</p>
	</div>
}