Kbd

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Kbd, KbdGroup } from "@line/abc-def-react/kbd";

<script setup lang="ts">
import { Kbd, KbdGroup } from "@line/abc-def-vue/kbd";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { Kbd, KbdGroup } from "@line/abc-def-react/kbd";

export function Example() {
  return (
    <KbdGroup>
      <Kbd>Command</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}

<script setup lang="ts">
import { Kbd, KbdGroup } from "@line/abc-def-vue/kbd";
</script>

<template>
  <KbdGroup>
    <Kbd>Control</Kbd>
    <Kbd>K</Kbd>
  </KbdGroup>
</template>

Component tokens

Composition exports

Usage notes

• Show shortcuts only when they are implemented.
• Use groups for key chords.
• Related component tokens use the `kbd` token group in `@line/abc-def-styles/css`.