Kbd

import { Kbd } from "@grassroot/ui-react";
 
<Kbd>⌘K</Kbd>
<span className="inline-flex gap-1">
  <Kbd>⇧</Kbd>
  <Kbd>⌘</Kbd>
  <Kbd>P</Kbd>
</span>

<script setup lang="ts">
import { Kbd } from "@grassroot/ui-vue";
</script>
 
<template>
  <Kbd>⌘K</Kbd>
  <Kbd>⇧</Kbd>
  <Kbd>⌘</Kbd>
  <Kbd>P</Kbd>
</template>

import { Component } from "@angular/core";
import { GrassrootKbd } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootKbd],
  template: `
    <grassroot-kbd>⌘K</grassroot-kbd>
    <grassroot-kbd>⇧</grassroot-kbd>
    <grassroot-kbd>⌘</grassroot-kbd>
    <grassroot-kbd>P</grassroot-kbd>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Kbd } from "@grassroot/ui-svelte";
</script>
 
<Kbd>⌘K</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌘</Kbd>
<Kbd>P</Kbd>

import { Kbd } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Kbd>⌘K</Kbd>
      <Kbd>⇧</Kbd>
      <Kbd>⌘</Kbd>
      <Kbd>P</Kbd>
    </>
  );
}