Aki UI

Command Palette

コマンドパレット

The ⌘K overlay: type to filter, arrow through, Enter to run. Groups are derived from the actions themselves rather than declared separately, so a heading disappears on its own once filtering empties it. Filtering and keyboard navigation come from cmdk↗↗, already in the project behind Combobox — no new dependency. Built with Framer Motion and Tailwind CSS.

Click it, or press ⌘K

Installation

Install the following dependencies:1

npm install cmdknpm install framer-motion

Copy and paste the following code into a new component file:2

"use client"

import { Command } from "cmdk"

import { AnimatePresence, motion } from "framer-motion"

import { useEffect, useState, type ReactNode } from "react"

export type PaletteAction = {

id: string,

label: string,

group: string,

How to use it3

"use client"

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

const actions = [

{ id: "new", label: "New file", group: "Actions", shortcut: "⌘N" },

{ id: "docs", label: "Documentation", group: "Go to" },

]

export default function Page() {

Props

CommandPalette

Name	Default	Description
actions	—	PaletteAction[] Everything the palette can run or navigate to
hotkey	"k"	string Key combined with ⌘ or Ctrl to toggle the palette
placeholder	"Type a command or search"	string Text on the trigger and in the input
dark	false	boolean Render the dark palette

PaletteAction (type)

Name	Default	Description
id	—	string Stable key for the entry
label	—	string Text shown and matched against the query
group	—	string Heading this entry sits under; repeated values are merged
shortcut	—	string Keys shown on the right of the row
icon	—	ReactNode Optional glyph before the label
onSelect	—	() => void Run when the entry is chosen; the palette closes after