Keyboard Shortcut Tag

A small monospace tag for displaying keyboard shortcuts.

A small monospace tag for displaying keyboard shortcuts. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

Root class newt-kbd

import { Kbd } from "@/registry/bases/newt/ui/kbd-tag"

export default function KbdTagDemo() {
  return (
    <div className="flex items-center gap-1">
      <Kbd>Ctrl</Kbd>
      <Kbd>K</Kbd>
    </div>
  )
}

<script setup lang="ts">
import { Kbd } from "~~/registry/bases/newt/ui/kbd-tag"
</script>

<template>
  <div class="flex items-center gap-1">
    <Kbd>Ctrl</Kbd>
    <Kbd>K</Kbd>
  </div>
</template>

Installation

pnpm dlx newtui@latest add kbd-tag

npx newtui@latest add kbd-tag

yarn dlx newtui@latest add kbd-tag

bunx newtui@latest add kbd-tag

Copy the source into your project

import * as React from "react"

import { cn } from "@/lib/utils"

const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
  ({ className, ...props }, ref) => (
    <kbd
      ref={ref}
      className={cn(
        "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-newt-border bg-newt-bg-base px-1.5 font-mono text-[11px] font-semibold text-newt-text-secondary shadow-[0_1px_0_var(--newt-border)]",
        className
      )}
      {...props}
    />
  )
)
Kbd.displayName = "Kbd"

const KbdTag = Kbd

export { Kbd, KbdTag }

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <kbd
    :class="
      cn(
        'inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-newt-border bg-newt-bg-base px-1.5 font-mono text-[11px] font-semibold text-newt-text-secondary shadow-[0_1px_0_var(--newt-border)]',
        props.class
      )
    "
  >
    <slot />
  </kbd>
</template>

export { default as KbdTag } from "./KbdTag.vue"
export { default as Kbd } from "./KbdTag.vue"

Update the import paths

The files import @/lib/utils and sibling components through the aliases in your components.json. Point them at wherever those live in your project.

Usage

import { KbdTag } from "@/components/ui/kbd-tag"

export function Example() {
  return <KbdTag />
}

<script setup lang="ts">
import { KbdTag } from "@/components/ui/kbd-tag"
</script>

<template>
  <KbdTag />
</template>

API reference

Kbd

PropType

children / default slot?React.ReactNode / Vue slot

Content rendered inside the component.

TypeReact.ReactNode / Vue slot

className / class?string

Additional classes merged with the component defaults.

Typestring

The registry exports Kbd, KbdTag. Parts without a table accept the native attributes for the element they render; React uses className, while Vue uses class and fallthrough attributes.

Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

Tokens

Keyboard Shortcut Tag reads its colours, radii and motion from the --newt-* tokens installed with the library. Override a token and every component that reads it follows, including this one — see the token layer. In the plain HTML and CSS distribution the same component is newt-kbd.