Kbd Component
React kbd component for rendering keyboard shortcuts and key combinations with a native <kbd> element, styled with Tailwind CSS.
Import
javascript
1import { Kbd } from "@neuctra/ui";Basic Usage
Press ⌘ + K to search
Sizes & Combinations
Esc·CtrlShiftP
Props
All available props for the Kbd component.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Key text (required) |
| size | "sm" | "md" | "md" | Key cap size |
Accessibility
- Uses the semantic
<kbd>element, announced as keyboard input by screen readers.
Frequently Asked Questions
How do I install and import the Kbd component?
Install the @neuctra/ui package, then import it with: import { Kbd } from "@neuctra/ui";
What variants and sizes does Kbd support?
Kbd supports sizes: sm, md. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Kbd component accessible?
Kbd is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.