# Kbd
```astro --- import { Kbd } from "@/components/starwind/kbd"; ---
Press Ctrl to continue
```
```tsx import { Kbd } from "@/components/starwind/kbd"; export function Example() { return (
Press Ctrl to continue
); } ```
```vue ```
## Installation ```bash npx starwind@latest add kbd --framework astro ``` ```bash npx starwind@latest add kbd --framework react ``` ```bash npx starwind@latest add kbd --framework vue ``` ## Usage
```astro --- import { Kbd } from "@/components/starwind/kbd"; ---
Press Ctrl to continue
```
```tsx import { Kbd } from "@/components/starwind/kbd"; export function Example() { return (
Press Ctrl to continue
); } ```
```vue ```
## Composition Use `KbdGroup` when a shortcut contains more than one key: ```text KbdGroup ├── Kbd └── Kbd ``` ## Basic
```astro --- import { Kbd } from "@/components/starwind/kbd"; --- Ctrl Shift Alt ⌘ ⏎ Esc ```
```tsx import { Kbd } from "@/components/starwind/kbd"; export function Example() { return ( <> Ctrl Shift Alt ⌘ ⏎ Esc ); } ```
```vue ```
## Group Use the `KbdGroup` component to group keyboard keys together.
```astro --- import { Kbd, KbdGroup } from "@/components/starwind/kbd"; ---

Use{" "} Ctrl + K {" "}to open the command palette

Press{" "} ⌘ + Shift + P {" "}to open command palette

```
```tsx import { Kbd, KbdGroup } from "@/components/starwind/kbd"; export function Example() { return ( <>

Use{" "} Ctrl + K {" "}to open the command palette

Press{" "} ⌘ + Shift + P {" "}to open command palette

); } ```
```vue ```
## With Button Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.
```astro --- import { Button } from "@/components/starwind/button"; import { Kbd, KbdGroup } from "@/components/starwind/kbd"; --- ```
```tsx import { Button } from "@/components/starwind/button"; import { Kbd, KbdGroup } from "@/components/starwind/kbd"; export function Example() { return ( <> ); } ```
```vue ```
## Common Shortcuts
```astro --- import { Kbd, KbdGroup } from "@/components/starwind/kbd"; ---
Copy Ctrl + C
Paste Ctrl + V
Cut Ctrl + X
Undo Ctrl + Z
```
```tsx import { Kbd, KbdGroup } from "@/components/starwind/kbd"; export function Example() { return ( <>
Copy Ctrl + C
Paste Ctrl + V
Cut Ctrl + X
Undo Ctrl + Z
); } ```
```vue ```
## Arrow Keys
```astro --- import { Kbd } from "@/components/starwind/kbd"; ---
↑
← ↓ →

Use arrow keys to navigate

```
```tsx import { Kbd } from "@/components/starwind/kbd"; export function Example() { return ( <>
↑
← ↓ →

Use arrow keys to navigate

); } ```
```vue ```
## API Reference ### Kbd - Inherits kbd attributes. ### KbdGroup - Inherits kbd attributes. ## Changelog ### v1.1.1 - Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly. ### v1.1.0 - Added contract-generated Astro and React implementations while preserving the component's existing public API and styling. ### v1.0.2 - Refactor tailwind variants functions into separate `variants.ts` file ### v1.0.0 - Initial release with starwind v1.11.0