Components
Command Menu
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.
'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>
);
}