unkeyed · MichaelUnkey · Jun 2, 2025 · May 28, 2025 · May 29, 2025 · May 29, 2025
@@ -1,7 +1,7 @@
 import { isDisplayProperty, useLogsContext } from "@/app/(app)/logs/context/logs";
-import { KeyboardButton } from "@/components/keyboard-button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
+import { KeyboardButton } from "@unkey/ui";
 import {
   type KeyboardEvent,
   type PropsWithChildren,

@@ -1,7 +1,6 @@
-import { KeyboardButton } from "@/components/keyboard-button";
 import { Drover } from "@/components/ui/drover";
 import { CaretRight } from "@unkey/icons";
-import { Button } from "@unkey/ui";
+import { Button, KeyboardButton } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 import type React from "react";
 import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from "react";

@@ -1,6 +1,6 @@
-import { KeyboardButton } from "@/components/keyboard-button";
 import { Drover } from "@/components/ui/drover";
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
+import { KeyboardButton } from "@unkey/ui";
 import React, {
   type KeyboardEvent,
   type PropsWithChildren,

@@ -1,5 +1,5 @@
-import { KeyboardButton } from "@/components/keyboard-button";
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
+import { KeyboardButton } from "@unkey/ui";
 import { type KeyboardEvent, useCallback, useState } from "react";
 import type { FilterValue } from "../validation/filter.types";
 import { ControlPill } from "./control-pill";

@@ -1,13 +1,12 @@
 "use client";
 
-import { KeyboardButton } from "@/components/keyboard-button";
 import { Drawer } from "@/components/ui/drawer";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn, processTimeFilters } from "@/lib/utils";
 import { ChevronDown } from "@unkey/icons";
-import { Button, DateTime, type Range, type TimeUnit } from "@unkey/ui";
+import { Button, DateTime, KeyboardButton, type Range, type TimeUnit } from "@unkey/ui";
 import { type PropsWithChildren, type ReactNode, useEffect, useState } from "react";
 import { CUSTOM_OPTION_ID, DEFAULT_OPTIONS } from "./constants";
 import { DateTimeSuggestions } from "./suggestions";

@@ -1,7 +1,6 @@
-import { KeyboardButton } from "@/components/keyboard-button";
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { CircleCaretRight } from "@unkey/icons";
-import { Button } from "@unkey/ui";
+import { Button, KeyboardButton } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 
 type LiveSwitchProps = {

@@ -1,8 +1,8 @@
-import { KeyboardButton } from "@/components/keyboard-button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import type { User } from "@/lib/auth/types";
 import { trpc } from "@/lib/trpc/client";
+import { KeyboardButton } from "@unkey/ui";
 import { useEffect, useRef, useState } from "react";
 import type { FilterValue } from "../validation/filter.types";
 import { EmptyQueries } from "./empty";

@@ -1,8 +1,6 @@
-import { KeyboardButton } from "@/components/keyboard-button";
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { Refresh3 } from "@unkey/icons";
-import { InfoTooltip } from "@unkey/ui";
-import { Button } from "@unkey/ui";
+import { Button, InfoTooltip, KeyboardButton } from "@unkey/ui";
 import { useState } from "react";
 
 type RefreshButtonProps = {

@@ -1,10 +1,9 @@
 "use client";
-import { KeyboardButton } from "@/components/keyboard-button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { CaretRight } from "@unkey/icons";
-import { Button } from "@unkey/ui";
+import { Button, KeyboardButton } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 import { usePathname, useRouter } from "next/navigation";
 import { type PropsWithChildren, useCallback, useEffect, useRef, useState } from "react";

@@ -0,0 +1,16 @@
+"use client";
+import { RenderComponentWithSnippet } from "@/app/components/render";
+import { KeyboardButton } from "@unkey/ui";
+
+export const Default = () => {
+  return (
+    <RenderComponentWithSnippet>
+      <div className="flex w-[300px] h-32 border border-gray-6 rounded-md justify-center items-center p-3 gap-2">
+        <span className="text-gray-9 text-[13px]">Default</span>
+        <KeyboardButton shortcut="D" />
+        <span className="text-gray-9 text-[13px]">Modifier Key</span>
+        <KeyboardButton modifierKey="⌘" shortcut="K" className="w-full m-0 p-0 gap-2" />
+      </div>
+    </RenderComponentWithSnippet>
+  );
+};
@@ -0,0 +1,49 @@
+---
+title: 'KeyboardButton'
+description: 'A component for displaying keyboard shortcuts with optional modifier keys'
+---
+import { Default } from "./buttons/keyboard-button.examples"
+
+# KeyboardButton
+
+The `KeyboardButton` component is designed to display keyboard shortcuts in a visually appealing and accessible way. It supports displaying both regular keys and modifier keys (like ⌘, ⇧, CTRL, ⌥) in a consistent format.
+
+## Features
+
+- Displays keyboard shortcuts with optional modifier keys
+- Accessible with proper ARIA attributes
+- Supports both light and dark themes
+- Responsive design with mobile considerations
+- Customizable through className prop
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `shortcut` | `string` | The main key of the keyboard shortcut |
+| `modifierKey` | `"⌘" \| "⇧" \| "CTRL" \| "⌥" \| null` | Optional modifier key to be displayed before the main shortcut |
+| `className` | `string` | Additional CSS classes to customize the component |
+
+The component also accepts all standard HTML div element props.
+
+## Usage
+
+Default and Modifier Key
+
+<Default />
+
+## Accessibility
+
+The component includes:
+- Proper ARIA labels for screen readers
+- Keyboard focus management
+- Descriptive title attributes for tooltips
+
+## Design
+
+The component features:
+- Consistent padding and sizing
+- Drop shadow effects
+- Hover and focus states
+- Dark mode support
+- Responsive behavior (hidden on mobile devices)
@@ -1,5 +1,8 @@
-import { cn } from "@/lib/utils";
+"use client";
+// biome-ignore lint: React in this context is used throughout, so biome will change to types because no APIs are used even though React is needed.
+import * as React from "react";
 import type { ComponentProps } from "react";
+import { cn } from "../lib/utils";
 
 type ModifierKey = "⌘" | "⇧" | "CTRL" | "⌥";
 
@@ -8,7 +11,7 @@ interface KeyboardButtonProps extends ComponentProps<"div"> {
   modifierKey?: ModifierKey | null;
 }
 
-export const KeyboardButton = ({
+const KeyboardButton = ({
   shortcut,
   modifierKey,
   className = "",
@@ -31,8 +34,13 @@ export const KeyboardButton = ({
       title={`Press '${modifierKey ?? ""}${shortcut?.toUpperCase()}' to toggle`}
       {...props}
     >
-      {modifierKey && <kbd>{modifierKey}+</kbd>}
-      <kbd>{shortcut?.toUpperCase()}</kbd>
+      {/* className="not-prose" added to prevent markdown rendering issues */}
+      {modifierKey && <kbd className="not-prose">{modifierKey}+</kbd>}
+      <kbd className="not-prose">{shortcut?.toUpperCase()}</kbd>
     </span>
   );
 };
+
+KeyboardButton.displayName = "KeyboardButton";
+
+export { KeyboardButton };
@@ -13,3 +13,4 @@ export * from "./components/textarea";
 export * from "./components/checkbox";
 export * from "./components/timestamp-info";
 export * from "./components/tooltip";
+export * from "./components/keyboard-button";