Command component

components/retroui/Command.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Dialog } from "@/components/retroui/Dialog";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Check, LucideIcon, Search } from "lucide-react";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-background text-foreground  border-border shadow-md",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type CommandDialogProps = DialogProps & { className?: string };
+
+const CommandDialog = ({
+  children,
+  className,
+  ...props
+}: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <Dialog.Content
+        className={cn(
+          "overflow-hidden p-0 shadow-lg w-full max-w-md",
+          className,
+        )}
+      >
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </Dialog.Content>
+    </Dialog>
+  );
+};
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      className="flex items-center border-border border-b px-3"
+      cmdk-input-wrapper=""
+      data-slot="command-input"
+    >
+      <Search className="me-2 h-4 w-4 shrink-0 opacity-50 text-foreground" />
+      <CommandPrimitive.Input
+        className={cn(
+          "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-body",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[400px] overflow-auto overscroll-contain transition-[height]  h-[calc(min(300px,var(--cmdk-list-height)))] bg-background",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm text-muted-foreground font-body"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground font-body",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "relative flex text-foreground cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground transition-all font-body",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ms-auto text-xs tracking-widest text-muted-foreground font-body",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+interface CommandCheckProps {
+  icon?: LucideIcon;
+  className?: string;
+}
+
+function CommandCheck({
+  icon: Icon = Check,
+  className,
+  ...props
+}: CommandCheckProps) {
+  return (
+    <Icon
+      data-slot="command-check"
+      data-check="true"
+      className={cn("size-4 ms-auto text-primary", className)}
+      {...props}
+    />
+  );
+}
+
+const CommandComponent = Object.assign(Command, {
+  Check: CommandCheck,
+  Dialog: CommandDialog,
+  Empty: CommandEmpty,
+  Group: CommandGroup,
+  Input: CommandInput,
+  Item: CommandItem,
+  List: CommandList,
+  Separator: CommandSeparator,
+  Shortcut: CommandShortcut,
+});
+
+export { CommandComponent as Command };

components/retroui/index.ts

@@ -24,5 +24,6 @@ export * from "./Sonner";
 export * from "./Tooltip";
 export * from "./Breadcrumb";
 export * from "./CommandDisplay";
-export * from "./ContextMenu";
+export * from "./Command";
 export * from "./Loader";
+export * from "./ContextMenu";

config/components.ts

@@ -137,6 +137,10 @@ export const componentConfig: {
       name: "breadcrumb",
       filePath: "components/retroui/Breadcrumb.tsx",
     },
+    command: {
+      name: "command",
+      filePath: "components/retroui/Command.tsx",
+    },
     "context-menu": {
       name: "context-menu",
       filePath: "components/retroui/ContextMenu.tsx",
@@ -604,6 +608,16 @@ export const componentConfig: {
         () => import("@/preview/components/breadcrumb-link-component"),
       ),
     },
+    "command-style-default": {
+      name: "command-style-default",
+      filePath: "preview/components/command-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/command-style-default")),
+    },
+    "command-style-dialog": {
+      name: "command-style-dialog",
+      filePath: "preview/components/command-style-dialog.tsx",
+      preview: lazy(() => import("@/preview/components/command-style-dialog")),
+    },
     "context-menu-style-default": {
       name: "context-menu-style-default",
       filePath: "preview/components/context-menu-style-default.tsx",
@@ -634,7 +648,7 @@ export const componentConfig: {
     "loader-style-custom": {
       name: "loader-style-custom",
       filePath: "preview/components/loader-style-custom.tsx",
-      preview: lazy(() => import("@/preview/components/loader-style-custom")),
+      preview: lazy(() => import("@/preview/components/loader-style-custom"))
     },
   },
 };

config/navigation.ts

@@ -51,6 +51,7 @@ export const navConfig: INavigationConfig = {
         { title: "Button", href: `${componentsRoute}/button` },
         { title: "Card", href: `${componentsRoute}/card` },
         { title: "Checkbox", href: `${componentsRoute}/checkbox` },
+        { title: "Command", href: `${componentsRoute}/command` },
         { title: "Dialog", href: `${componentsRoute}/dialog` },
         { title: "Input", href: `${componentsRoute}/input` },
         { title: "Label", href: `${componentsRoute}/label` },

content/docs/components/command.mdx

@@ -0,0 +1,40 @@
+---
+title: Command
+description: A command palette component for quick navigation and actions
+lastUpdated: 21 Aug, 2025
+links:
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Command.tsx
+---
+
+<ComponentShowcase name="command-style-default" />
+<br />
+<br />
+
+<ComponentInstall>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add &quot;https://retroui.dev/r/command.json&quot;" />
+  <ComponentInstall.Manual>
+#### 1. Install dependencies:
+
+```sh
+npm install class-variance-authority cmdk
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="command" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Dialog
+
+<ComponentShowcase name="command-style-dialog" />
+<br />
+<br />

package.json

@@ -33,6 +33,7 @@
     "@vercel/speed-insights": "^1.2.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "contentlayer": "^0.3.4",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.445.0",