Linear · Command Palette

React Command Palette: Linear-style

Part of Better Design's React component library. The dark, sharp, keyboard-first command palette pattern Linear popularized: built on cmdk + Radix Dialog, ships as a shadcn-compatible registry item.

Install

npx shadcn@latest add https://better-design.com/registry/linear/command.json

Lands in components/ui/command.tsx. Fully editable source, no SDK lock-in.

Live preview

Open the full Linear showcase

Why this command palette

•Dark surface with 8px radius: matches Linear's signature feel
•cmdk under the hood: fuzzy filter, keyboard nav, group headings out of the box
•Drops into any shadcn/ui project unchanged: install with npx shadcn@latest add
•Same primitive across the whole Better Design Linear DS: Dialog, Popover, Tooltip all share the surface treatment

Usage

import {
  Command, CommandDialog, CommandInput, CommandList,
  CommandEmpty, CommandGroup, CommandItem,
} from "@/components/ui/command";

export function CommandMenu({ open, onOpenChange }) {
  return (
    <CommandDialog open={open} onOpenChange={onOpenChange}>
      <CommandInput placeholder="Search projects, issues..." />
      <CommandList>
        <CommandEmpty>No results.</CommandEmpty>
        <CommandGroup heading="Issues">
          <CommandItem>BD-42: Add command palette</CommandItem>
          <CommandItem>BD-43: Wire MCP</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  );
}

FAQ

What's this built on?

cmdk for the command primitive, @radix-ui/react-dialog for the modal shell, lucide-react for the search icon. Identical primitive stack to shadcn/ui: Better Design just re-skins it for the Linear aesthetic.

Is it free?

Yes. MIT-licensed, ships as a shadcn-compatible registry item. Install with npx shadcn@latest add and the source lands in your components/ui folder: fully editable, no SDK lock-in.

Does it work with React 19 and Next.js 15?

Yes. Better Design targets React 19 + Next.js 15 + Tailwind v4. Components use "use client" where needed.

How is this different from Linear's actual command bar?

Inspired-by, not lifted. Better Design ships the visual signature (dark surface, 8px radius, sharp typography) on standard cmdk + Radix primitives: Linear's real bar has internal-only data bindings and product-specific shortcuts that aren't open source.

Related component pages

React Data Table

/components/data-table

Airbnb-style Date Picker

/components/airbnb-date-picker

Linear-style Sidebar

/components/linear-sidebar