8-bit Command

Component 11

About

Pixel-art command palette from 8bitcn.com — retro pixel border on input + results panel. Wraps cmdk Command (inlined via esbuild).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 8-bit Command to your project and fits it to your theme.

Code

How 8-bit Command is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import {
  Command, CommandInput, CommandList, CommandEmpty, CommandGroup,
  CommandItem, CommandSeparator, CommandShortcut,
} from "@/components/ui/8bit-command";

export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden font-pixel">
      <Command className="rounded-md border w-80">
        <CommandInput placeholder="Type a command..." />
        <CommandList>
          <CommandEmpty>No results.</CommandEmpty>
          <CommandGroup heading="Actions">
            <CommandItem>Open Inventory <CommandShortcut>I</CommandShortcut></CommandItem>
            <CommandItem>Save Game <CommandShortcut>S</CommandShortcut></CommandItem>
            <CommandItem>Travel <CommandShortcut>T</CommandShortcut></CommandItem>
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="Quests">
            <CommandItem>The Lost Sword</CommandItem>
            <CommandItem>Goblin Hunt</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    </div>
  );
}