On this page

Kbd

Press Ctrl to continue

---
import { Kbd } from "@/components/starwind/kbd";
---

<div class="flex items-center gap-2">
  <span class="text-sm text-muted-foreground">Press</span>
  <Kbd>Ctrl</Kbd>
  <span class="text-sm text-muted-foreground">to continue</span>
</div>

import { Kbd } from "@/components/starwind/kbd";

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <span className="text-sm text-muted-foreground">Press</span>
      <Kbd>Ctrl</Kbd>
      <span className="text-sm text-muted-foreground">to continue</span>
    </div>
  );
}

<script setup lang="ts">
import { Kbd } from "@/components/starwind/kbd";
</script>

<template>
  <div class="flex items-center gap-2">
    <span class="text-sm text-muted-foreground">Press</span>
    <Kbd>Ctrl</Kbd>
    <span class="text-sm text-muted-foreground">to continue</span>
  </div>
</template>

Installation

pnpx starwind@latest add kbd --framework astro

npx starwind@latest add kbd --framework astro

yarn dlx starwind@latest add kbd --framework astro

pnpx starwind@latest add kbd --framework react

npx starwind@latest add kbd --framework react

yarn dlx starwind@latest add kbd --framework react

pnpx starwind@latest add kbd --framework vue

npx starwind@latest add kbd --framework vue

yarn dlx starwind@latest add kbd --framework vue

Usage

---
import { Kbd } from "@/components/starwind/kbd";
---

<div class="flex items-center gap-2">
  <span class="text-sm text-muted-foreground">Press</span>
  <Kbd>Ctrl</Kbd>
  <span class="text-sm text-muted-foreground">to continue</span>
</div>

import { Kbd } from "@/components/starwind/kbd";

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <span className="text-sm text-muted-foreground">Press</span>
      <Kbd>Ctrl</Kbd>
      <span className="text-sm text-muted-foreground">to continue</span>
    </div>
  );
}

<script setup lang="ts">
import { Kbd } from "@/components/starwind/kbd";
</script>

<template>
  <div class="flex items-center gap-2">
    <span class="text-sm text-muted-foreground">Press</span>
    <Kbd>Ctrl</Kbd>
    <span class="text-sm text-muted-foreground">to continue</span>
  </div>
</template>

Composition

Use KbdGroup when a shortcut contains more than one key:

KbdGroup
├── Kbd
└── Kbd

Basic

Ctrl Shift Alt ⌘ ⏎ Esc

---
import { Kbd } from "@/components/starwind/kbd";
---

<Kbd>Ctrl</Kbd>
<Kbd>Shift</Kbd>
<Kbd>Alt</Kbd>
<Kbd>⌘</Kbd>
<Kbd>⏎</Kbd>
<Kbd>Esc</Kbd>

import { Kbd } from "@/components/starwind/kbd";

export function Example() {
  return (
    <>
      <Kbd>Ctrl</Kbd>
      <Kbd>Shift</Kbd>
      <Kbd>Alt</Kbd>
      <Kbd>⌘</Kbd>
      <Kbd>⏎</Kbd>
      <Kbd>Esc</Kbd>
    </>
  );
}

<script setup lang="ts">
import { Kbd } from "@/components/starwind/kbd";
</script>

<template>
  <Kbd>Ctrl</Kbd>
  <Kbd>Shift</Kbd>
  <Kbd>Alt</Kbd>
  <Kbd>⌘</Kbd>
  <Kbd>⏎</Kbd>
  <Kbd>Esc</Kbd>
</template>

Group

Use the KbdGroup component to group keyboard keys together.

Use

Ctrl + K

to open the command palette

Press

⌘ + Shift + P

to open command palette

---
import { Kbd, KbdGroup } from "@/components/starwind/kbd";
---

<p class="text-sm text-muted-foreground">
  Use{" "}
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <span>+</span>
    <Kbd>K</Kbd>
  </KbdGroup>
  {" "}to open the command palette
</p>

<p class="text-sm text-muted-foreground">
  Press{" "}
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <span>+</span>
    <Kbd>Shift</Kbd>
    <span>+</span>
    <Kbd>P</Kbd>
  </KbdGroup>
  {" "}to open command palette
</p>

import { Kbd, KbdGroup } from "@/components/starwind/kbd";

export function Example() {
  return (
    <>
      <p className="text-sm text-muted-foreground">
        Use{" "}
        <KbdGroup>
          <Kbd>Ctrl</Kbd>
          <span>+</span>
          <Kbd>K</Kbd>
        </KbdGroup>
        {" "}to open the command palette
      </p>

      <p className="text-sm text-muted-foreground">
        Press{" "}
        <KbdGroup>
          <Kbd>⌘</Kbd>
          <span>+</span>
          <Kbd>Shift</Kbd>
          <span>+</span>
          <Kbd>P</Kbd>
        </KbdGroup>
        {" "}to open command palette
      </p>
    </>
  );
}

<script setup lang="ts">
import { Kbd, KbdGroup } from "@/components/starwind/kbd";
</script>

<template>
  <p class="text-sm text-muted-foreground">
    Use
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <span>+</span>
      <Kbd>K</Kbd>
    </KbdGroup>
    to open the command palette
  </p>

  <p class="text-sm text-muted-foreground">
    Press
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <span>+</span>
      <Kbd>Shift</Kbd>
      <span>+</span>
      <Kbd>P</Kbd>
    </KbdGroup>
    to open command palette
  </p>
</template>

With Button

Use the Kbd component inside a Button component to display a keyboard key inside a button.

---
import { Button } from "@/components/starwind/button";
import { Kbd, KbdGroup } from "@/components/starwind/kbd";
---

<Button variant="outline" size="sm" class="pr-2">
  Accept
  <Kbd>⏎</Kbd>
</Button>

<Button variant="outline" size="sm" class="pr-2">
  Cancel
  <Kbd>Esc</Kbd>
</Button>

<Button variant="outline" size="sm" class="pr-2">
  Save
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <span>+</span>
    <Kbd>S</Kbd>
  </KbdGroup>
</Button>

import { Button } from "@/components/starwind/button";
import { Kbd, KbdGroup } from "@/components/starwind/kbd";

export function Example() {
  return (
    <>
      <Button variant="outline" size="sm" className="pr-2">
        Accept
        <Kbd>⏎</Kbd>
      </Button>

      <Button variant="outline" size="sm" className="pr-2">
        Cancel
        <Kbd>Esc</Kbd>
      </Button>

      <Button variant="outline" size="sm" className="pr-2">
        Save
        <KbdGroup>
          <Kbd>Ctrl</Kbd>
          <span>+</span>
          <Kbd>S</Kbd>
        </KbdGroup>
      </Button>
    </>
  );
}

<script setup lang="ts">
import { Button } from "@/components/starwind/button";
import { Kbd, KbdGroup } from "@/components/starwind/kbd";
</script>

<template>
  <Button variant="outline" size="sm" class="pr-2">
    Accept
    <Kbd>⏎</Kbd>
  </Button>

  <Button variant="outline" size="sm" class="pr-2">
    Cancel
    <Kbd>Esc</Kbd>
  </Button>

  <Button variant="outline" size="sm" class="pr-2">
    Save
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <span>+</span>
      <Kbd>S</Kbd>
    </KbdGroup>
  </Button>
</template>

Common Shortcuts

Copy Ctrl + C

Paste Ctrl + V

Cut Ctrl + X

Undo Ctrl + Z

---
import { Kbd, KbdGroup } from "@/components/starwind/kbd";
---

<div class="flex flex-col gap-3 min-w-sm">
  <div class="flex items-center gap-3 justify-between">
    <span class="text-sm">Copy</span>
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <span>+</span>
      <Kbd>C</Kbd>
    </KbdGroup>
  </div>
  <div class="flex items-center gap-3 justify-between">
    <span class="text-sm">Paste</span>
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <span>+</span>
      <Kbd>V</Kbd>
    </KbdGroup>
  </div>
  <div class="flex items-center gap-3 justify-between">
    <span class="text-sm">Cut</span>
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <span>+</span>
      <Kbd>X</Kbd>
    </KbdGroup>
  </div>
  <div class="flex items-center gap-3 justify-between">
    <span class="text-sm">Undo</span>
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <span>+</span>
      <Kbd>Z</Kbd>
    </KbdGroup>
  </div>
</div>

import { Kbd, KbdGroup } from "@/components/starwind/kbd";

export function Example() {
  return (
    <>
      <div className="flex flex-col gap-3 min-w-sm">
        <div className="flex items-center gap-3 justify-between">
          <span className="text-sm">Copy</span>
          <KbdGroup>
            <Kbd>Ctrl</Kbd>
            <span>+</span>
            <Kbd>C</Kbd>
          </KbdGroup>
        </div>
        <div className="flex items-center gap-3 justify-between">
          <span className="text-sm">Paste</span>
          <KbdGroup>
            <Kbd>Ctrl</Kbd>
            <span>+</span>
            <Kbd>V</Kbd>
          </KbdGroup>
        </div>
        <div className="flex items-center gap-3 justify-between">
          <span className="text-sm">Cut</span>
          <KbdGroup>
            <Kbd>Ctrl</Kbd>
            <span>+</span>
            <Kbd>X</Kbd>
          </KbdGroup>
        </div>
        <div className="flex items-center gap-3 justify-between">
          <span className="text-sm">Undo</span>
          <KbdGroup>
            <Kbd>Ctrl</Kbd>
            <span>+</span>
            <Kbd>Z</Kbd>
          </KbdGroup>
        </div>
      </div>
    </>
  );
}

<script setup lang="ts">
import { Kbd, KbdGroup } from "@/components/starwind/kbd";
</script>

<template>
  <div class="flex flex-col gap-3 min-w-sm">
    <div class="flex items-center gap-3 justify-between">
      <span class="text-sm">Copy</span>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>C</Kbd>
      </KbdGroup>
    </div>
    <div class="flex items-center gap-3 justify-between">
      <span class="text-sm">Paste</span>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>V</Kbd>
      </KbdGroup>
    </div>
    <div class="flex items-center gap-3 justify-between">
      <span class="text-sm">Cut</span>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>X</Kbd>
      </KbdGroup>
    </div>
    <div class="flex items-center gap-3 justify-between">
      <span class="text-sm">Undo</span>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>Z</Kbd>
      </KbdGroup>
    </div>
  </div>
</template>

Arrow Keys

↑

← ↓ →

Use arrow keys to navigate

---
import { Kbd } from "@/components/starwind/kbd";
---

<div class="flex flex-col items-center gap-2">
  <Kbd>↑</Kbd>
  <div class="flex gap-2">
    <Kbd>←</Kbd>
    <Kbd>↓</Kbd>
    <Kbd>→</Kbd>
  </div>
</div>
<p class="text-sm text-muted-foreground">Use arrow keys to navigate</p>

import { Kbd } from "@/components/starwind/kbd";

export function Example() {
  return (
    <>
      <div className="flex flex-col items-center gap-2">
        <Kbd>↑</Kbd>
        <div className="flex gap-2">
          <Kbd>←</Kbd>
          <Kbd>↓</Kbd>
          <Kbd>→</Kbd>
        </div>
      </div>
      <p className="text-sm text-muted-foreground">Use arrow keys to navigate</p>
    </>
  );
}

<script setup lang="ts">
import { Kbd } from "@/components/starwind/kbd";
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <Kbd>↑</Kbd>
    <div class="flex gap-2">
      <Kbd>←</Kbd>
      <Kbd>↓</Kbd>
      <Kbd>→</Kbd>
    </div>
  </div>
  <p class="text-sm text-muted-foreground">Use arrow keys to navigate</p>
</template>

API Reference

Changelog

View version history v1.1.1 4 releases

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