Kbd

Keyboard keycap component

⌘⇧⌥⌃Ctrl+B

import { Kbd, KbdGroup } from '@/components/ui/kbd'

...

import { Kbd, KbdGroup } from '@/components/ui/kbd'

export default function KbdDemoExample() {
  return <div class="grid gap-4"><KbdGroup><Kbd>⌘</Kbd><Kbd>⇧</Kbd><Kbd>⌥</Kbd><Kbd>⌃</Kbd></KbdGroup><KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>B</Kbd></KbdGroup></div>
}

Installation

npx @fictjs/shadcn@latest add kbd

Copy the Fict shadcn component into your project.

Source

components/ui/kbd.tsx

src/components/ui/kbd.tsx

import { cn } from '@/lib/cn'

type KbdProps = JSX.IntrinsicElements['kbd']

export function Kbd(props: KbdProps) {
  const { class: className, ...rest } = props
  return <kbd data-slot='kbd' class={cn('inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 text-xs font-medium text-muted-foreground', className)} {...rest} />
}

export function KbdGroup(props: KbdProps) {
  const { class: className, ...rest } = props
  return <kbd data-slot='kbd-group' class={cn('inline-flex items-center gap-1', className)} {...rest} />
}

Usage

Examples

Group

Use Ctrl + BCtrl + K to open the command palette

import { Kbd, KbdGroup } from '@/components/ui/kbd'

...

import { Kbd, KbdGroup } from '@/components/ui/kbd'

export default function KbdGroupExample() {
  return <p>Use <KbdGroup><Kbd>Ctrl + B</Kbd><Kbd>Ctrl + K</Kbd></KbdGroup> to open the command palette</p>
}

Button

import { Button } from '@/components/ui/button'
import { Kbd } from '@/components/ui/kbd'
...

import { Button } from '@/components/ui/button'
import { Kbd } from '@/components/ui/kbd'

export default function KbdButtonExample() {
  return <Button variant="outline">Accept <Kbd>⏎</Kbd></Button>
}

import { Button } from '@/components/ui/button'
import { Kbd, KbdGroup } from '@/components/ui/kbd'
...

import { Button } from '@/components/ui/button'
import { Kbd, KbdGroup } from '@/components/ui/kbd'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTriggerEl } from '@/components/ui/tooltip'

export default function KbdTooltipExample() {
  return <TooltipProvider><div class="flex"><Tooltip><TooltipTriggerEl asChild><Button variant="outline">Save</Button></TooltipTriggerEl><TooltipContent>Save Changes <Kbd>S</Kbd></TooltipContent></Tooltip><Tooltip><TooltipTriggerEl asChild><Button variant="outline">Print</Button></TooltipTriggerEl><TooltipContent>Print Document <KbdGroup><Kbd>Ctrl</Kbd><Kbd>P</Kbd></KbdGroup></TooltipContent></Tooltip></div></TooltipProvider>
}

Input Group

⌘K

import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'
import { Kbd } from '@/components/ui/kbd'
...

import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'
import { Kbd } from '@/components/ui/kbd'

function SearchIcon() { return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg> }

export default function KbdInputGroupExample() {
  return <InputGroup class="w-80"><InputGroupAddon><SearchIcon /></InputGroupAddon><InputGroupInput aria-label="Search" placeholder="Search..." /><InputGroupAddon><Kbd>⌘</Kbd><Kbd>K</Kbd></InputGroupAddon></InputGroup>
}

Rtl

⌘⇧⌥⌃Ctrl+B

import { Kbd, KbdGroup } from '@/components/ui/kbd'

...

import { Kbd, KbdGroup } from '@/components/ui/kbd'

export default function KbdRtlExample() {
  let language = $state<'ar' | 'he' | 'en'>('ar')
  const direction = () => language === 'en' ? 'ltr' : 'rtl'
  return <div class="grid gap-4"><select value={language} onChange={event => { language = event.currentTarget.value as 'ar' | 'he' | 'en' }}><option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option></select><div class="grid gap-4" dir={direction()}><KbdGroup><Kbd>⌘</Kbd><Kbd>⇧</Kbd><Kbd>⌥</Kbd><Kbd>⌃</Kbd></KbdGroup><KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>B</Kbd></KbdGroup></div></div>
}

Item Label