Kbd

scificn/kbd

FreeComponent

Keyboard key display element styled as a terminal key cap.

Live preview

live · rendered by the registry

Rendered by scificn on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://www.scificn.dev/r/kbd.json

Source

ui/kbd/kbd.tsxwww.scificn.dev/r/kbd.json

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4export interface KbdProps extends React.HTMLAttributes<HTMLElement> {}
5 
6const Kbd = React.forwardRef<HTMLElement, KbdProps>(
7  ({ className, children, ...props }, ref) => (
8    <kbd
9      ref={ref}
10      className={cn(
11        'inline-flex items-center justify-center',
12        'font-mono text-[0.7rem] font-medium uppercase tracking-widest',
13        'px-1.5 py-0.5 min-w-[1.4rem]',
14        'border border-[var(--border)] bg-[var(--surface-raised)]',
15        'text-[var(--text-secondary)]',
16        'rounded-none',
17        className
18      )}
19      {...props}
20    >
21      {children}
22    </kbd>
23  )
24)
25Kbd.displayName = 'Kbd'
26 
27export { Kbd }

More from scificn

All 33 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Alertalert	scificn	Components	Free	1 dep
Badgebadge	scificn	Components	Free	1 dep
Bar Chartbar-chart	scificn	Components	Free	no deps
Breadcrumbbreadcrumb	scificn	Components	Free	no deps
Buttonbutton	scificn	Components	Free	2 deps
Cardcard	scificn	Components	Free	no deps
Checkboxcheckbox	scificn	Components	Free	1 dep
Dialogdialog	scificn	Components	Free	1 dep