dashboardcn

Search documentation

Search for a page or component.

Command Palette

PreviousNext

A data-driven Command+K menu with dialog and inline variants, grouped results, metadata, shortcuts, and a replaceable footer.

Command palette

Search for a command to run.

"use client"

import * as React from "react"

Installation

pnpm dlx shadcn@latest add @dashboardcn/command-palette

Also installs command from shadcn/ui if missing.

Usage

import { CommandPalette, useCommandPaletteShortcut } from "@/components/ui/command-palette"

const [open, setOpen] = React.useState(false)
useCommandPaletteShortcut(setOpen)

<CommandPalette
  open={open}
  onOpenChange={setOpen}
  groups={groups}
  onSelect={() => setOpen(false)}
/>

Examples

Inline

variant="inline" embeds the same searchable command surface in a page or popover.

4 commandsType to filter
"use client"

import { FileText, LayoutDashboard, Plus, Users } from "lucide-react"

Compact settings menu

density="compact" tightens the rows for navigation-heavy menus. The keycaps are optional hints defined by your application.

"use client"

import { Bell, CreditCard, UserRound, UsersRound } from "lucide-react"

App launcher

layout="grid" turns the same command data into a searchable workspace launcher.

Workspace launcher6 apps
"use client"

import { CalendarDays, ChartNoAxesCombined, FileText, Inbox, Settings, Users } from "lucide-react"