{
  "title": "Kbd",
  "description": "Inline keyboard key hint — semantic <kbd> on web, styled Text on native.",
  "url": "/docs/components/kbd",
  "since": "0.8.0",
  "tags": [
    "display",
    "typography"
  ],
  "platform": "both",
  "source": "---\ntitle: Kbd\ndescription: Inline keyboard key hint — semantic &lt;kbd&gt; on web, styled Text on native.\nsince: 0.8.0\ntags: [display, typography]\nplatform: both\ncategory: display\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Kbd\" />\n\n## At a glance\n\n- Renders a styled monospace pill for keyboard shortcuts in prose or UI labels.\n- On web, uses a semantic `<kbd>` element (via react-native-web).\n- On native, renders a styled `<Text>` with the same visual appearance.\n- Subtle border + slight bottom shadow for the classic key look.\n\n## Preview\n\n<Preview name=\"kbd-basic\" />\n\n## Usage\n\n```tsx\nimport { Kbd } from '@nori-ui/core';\n\n// Standalone\n<Kbd>⌘K</Kbd>\n<Kbd>Ctrl+S</Kbd>\n<Kbd>Esc</Kbd>\n\n// Inside prose\n<Text>Press <Kbd>⌘K</Kbd> to open the command palette.</Text>\n```\n\n## Props\n\n<PropsTable component=\"Kbd\" />\n"
}