Command Menu

Component 106

About

A pill that grows into a command panel on hover, tap or Cmd+K: a highlight that slides between items and even diagonally into the theme row, a rotating status line, arrow/j-k navigation, Escape and click-outside. Inspired by Colin Lienard's personal site (colinlienard.com), rebuilt for React from scratch.

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

Code

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

Usage.tsx

'use client';

import { useState } from 'react';
import CommandMenu, { type ThemeValue } from '@/components/ui/command-menu';

export default function CommandMenuDemo() {
	const [theme, setTheme] = useState<ThemeValue>('system');

	function applyTheme(next: ThemeValue) {
		setTheme(next);
		document.documentElement.classList.toggle(
			'dark',
			next === 'dark' ||
				(next === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches),
		);
	}

	return (
		// The menu does not position itself: this is the container you would make fixed.
		<div className="relative flex h-80 w-full items-start justify-center p-8">
			<div className="flex w-full max-w-xs items-start justify-center">
				<CommandMenu
					title="Your Name"
					avatar={
						<span className="block size-10 shrink-0 rounded-full bg-gradient-to-br from-orange-300 to-red-500" />
					}
					status={[
						'Full-Stack Engineer',
						<span key="available" className="flex items-center gap-1.5">
							<span className="size-1.5 rounded-full bg-green-400" />
							Available for new work
						</span>,
						'hello@example.com',
					]}
					sections={[
						{
							label: 'Sections',
							items: [
								{ name: 'Home', onSelect: () => alert('Home') },
								{ name: 'Experience', onSelect: () => alert('Experience') },
								{ name: 'Projects', onSelect: () => alert('Projects') },
							],
						},
					]}
					theme={theme}
					onThemeChange={applyTheme}
				/>
			</div>
		</div>
	);
}