Kbd

Keycaps and shortcut hints ("⌘K to search", "Press Esc") that show ⌘ or Ctrl for the visitor's platform and read as words to screen readers.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/kbd

First time? Add the @portfolio-kit registry to components.json

components.json

{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

"Press this" hints inside running text, the way portfolios announce hidden shortcuts: md in body copy, the default sm in small meta text.

Force a platform to document both: ⌘ symbols on macOS, words joined with "+" on Windows and Linux.

sm for buttons and menus, md for running text, lg for a standalone prompt on a 404 or an intro screen.