snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/bases/radix/examples/kbd-example.tsx

@@ -0,0 +1,194 @@
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/radix/components/example"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/registry/bases/radix/ui/input-group"
+import { Kbd, KbdGroup } from "@/registry/bases/radix/ui/kbd"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/bases/radix/ui/tooltip"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export default function KbdExample() {
+  return (
+    <ExampleWrapper>
+      <KbdBasic />
+      <KbdModifierKeys />
+      <KbdGroupExample />
+      <KbdArrowKeys />
+      <KbdWithIcons />
+      <KbdWithIconsAndText />
+      <KbdInInputGroup />
+      <KbdInTooltip />
+      <KbdWithSamp />
+    </ExampleWrapper>
+  )
+}
+
+function KbdBasic() {
+  return (
+    <Example title="Basic">
+      <div className="flex items-center gap-2">
+        <Kbd>Ctrl</Kbd>
+        <Kbd>⌘K</Kbd>
+        <Kbd>Ctrl + B</Kbd>
+      </div>
+    </Example>
+  )
+}
+
+function KbdModifierKeys() {
+  return (
+    <Example title="Modifier Keys">
+      <div className="flex items-center gap-2">
+        <Kbd>⌘</Kbd>
+        <Kbd>C</Kbd>
+      </div>
+    </Example>
+  )
+}
+
+function KbdGroupExample() {
+  return (
+    <Example title="KbdGroup">
+      <KbdGroup>
+        <Kbd>Ctrl</Kbd>
+        <Kbd>Shift</Kbd>
+        <Kbd>P</Kbd>
+      </KbdGroup>
+    </Example>
+  )
+}
+
+function KbdArrowKeys() {
+  return (
+    <Example title="Arrow Keys">
+      <div className="flex items-center gap-2">
+        <Kbd>↑</Kbd>
+        <Kbd>↓</Kbd>
+        <Kbd>←</Kbd>
+        <Kbd>→</Kbd>
+      </div>
+    </Example>
+  )
+}
+
+function KbdWithIcons() {
+  return (
+    <Example title="With Icons">
+      <KbdGroup>
+        <Kbd>
+          <IconPlaceholder
+            lucide="CircleDashedIcon"
+            tabler="IconCircleDashed"
+            hugeicons="DashedLineCircleIcon"
+            phosphor="CircleDashedIcon"
+            remixicon="RiLoaderLine"
+          />
+        </Kbd>
+        <Kbd>
+          <IconPlaceholder
+            lucide="ArrowLeftIcon"
+            tabler="IconArrowLeft"
+            hugeicons="ArrowLeft01Icon"
+            phosphor="ArrowLeftIcon"
+            remixicon="RiArrowLeftLine"
+          />
+        </Kbd>
+        <Kbd>
+          <IconPlaceholder
+            lucide="ArrowRightIcon"
+            tabler="IconArrowRight"
+            hugeicons="ArrowRight01Icon"
+            phosphor="ArrowRightIcon"
+            remixicon="RiArrowRightLine"
+          />
+        </Kbd>
+      </KbdGroup>
+    </Example>
+  )
+}
+
+function KbdWithIconsAndText() {
+  return (
+    <Example title="With Icons and Text">
+      <KbdGroup>
+        <Kbd>
+          <IconPlaceholder
+            lucide="ArrowLeftIcon"
+            tabler="IconArrowLeft"
+            hugeicons="ArrowLeft01Icon"
+            phosphor="ArrowLeftIcon"
+            remixicon="RiArrowLeftLine"
+          />
+          Left
+        </Kbd>
+        <Kbd>
+          <IconPlaceholder
+            lucide="CircleDashedIcon"
+            tabler="IconCircleDashed"
+            hugeicons="DashedLineCircleIcon"
+            phosphor="CircleDashedIcon"
+            remixicon="RiLoaderLine"
+          />
+          Voice Enabled
+        </Kbd>
+      </KbdGroup>
+    </Example>
+  )
+}
+
+function KbdInInputGroup() {
+  return (
+    <Example title="InputGroup">
+      <InputGroup>
+        <InputGroupInput />
+        <InputGroupAddon>
+          <Kbd>Space</Kbd>
+        </InputGroupAddon>
+      </InputGroup>
+    </Example>
+  )
+}
+
+function KbdInTooltip() {
+  return (
+    <Example title="Tooltip">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button size="icon-sm" variant="outline">
+            <IconPlaceholder
+              lucide="SaveIcon"
+              tabler="IconDeviceFloppy"
+              hugeicons="FloppyDiskIcon"
+              phosphor="FloppyDiskIcon"
+              remixicon="RiSaveLine"
+            />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent className="pr-1.5">
+          <div className="flex items-center gap-2">
+            Save Changes <Kbd>S</Kbd>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </Example>
+  )
+}
+
+function KbdWithSamp() {
+  return (
+    <Example title="With samp">
+      <Kbd>
+        <samp>File</samp>
+      </Kbd>
+    </Example>
+  )
+}