PremiumNew

CommandBar

Floating command palette with search input, grouped sections, keyboard shortcut hints, and selected item highlight.

Navigation & Layoutcommandsearchspotlightpalette

Dependencies

shadcn/ui components needed:

npx shadcn@latest add commandnpx shadcn@latest add dialognpx shadcn@latest add badge

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Search, FileText, Settings, Users, Layout, Command } from 'lucide-react';
4import {
5  CommandDialog,
6  CommandEmpty,
7  CommandGroup,
8  CommandInput,
9  CommandItem,
10  CommandList,
11  CommandSeparator,
12  CommandShortcut,
13} from '@/components/ui/command';
14import { Badge } from '@/components/ui/badge';
15import { Button } from '@/components/ui/button';
16
17export default function CommandBar() {
18  return (
19    <div className="flex items-center justify-center min-h-[400px] bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-950 p-4">
20      <div className="w-full max-w-lg">
21        <Button
22          variant="outline"
23          className="w-full h-12 justify-start gap-3 text-slate-500 bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 shadow-sm"
24        >
25          <Search className="w-4 h-4" />
26          <span>Search...</span>
27          <CommandShortcut className="ml-auto flex items-center gap-1">
28            <Command className="w-3.5 h-3.5" />
29            <span>K</span>
30          </CommandShortcut>
31        </Button>
32        
33        <div className="mt-4 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 shadow-2xl overflow-hidden">
34          <div className="flex items-center border-b border-slate-200 dark:border-slate-800 px-3">
35            <Search className="w-4 h-4 text-slate-400 mr-2" />
36            <input
37              placeholder="Type a command or search..."
38              className="flex-1 h-12 bg-transparent outline-none text-sm text-slate-900 dark:text-white placeholder:text-slate-400"
39            />
40            <Badge variant="secondary" className="text-xs">ESC</Badge>
41          </div>
42          <CommandList className="max-h-80">
43            <CommandEmpty>No results found.</CommandEmpty>
44            <CommandGroup heading="Recent">
45              <CommandItem className="flex items-center gap-3 px-3 py-2">
46                <FileText className="w-4 h-4 text-slate-400" />
47                <span>Project Documentation</span>
48                <CommandShortcut className="ml-auto text-xs text-slate-400">⌘P</CommandShortcut>
49              </CommandItem>
50              <CommandItem className="flex items-center gap-3 px-3 py-2">
51                <Users className="w-4 h-4 text-slate-400" />
52                <span>Team Settings</span>
53                <CommandShortcut className="ml-auto text-xs text-slate-400">⌘T</CommandShortcut>
54              </CommandItem>
55            </CommandGroup>
56            <CommandSeparator />
57            <CommandGroup heading="Actions">
58              <CommandItem className="flex items-center gap-3 px-3 py-2 bg-blue-50 dark:bg-blue-950/30">
59                <Layout className="w-4 h-4 text-blue-600 dark:text-blue-400" />
60                <span className="text-blue-600 dark:text-blue-400">New Dashboard</span>
61                <CommandShortcut className="ml-auto text-xs text-slate-400">⌘D</CommandShortcut>
62              </CommandItem>
63              <CommandItem className="flex items-center gap-3 px-3 py-2">
64                <Settings className="w-4 h-4 text-slate-400" />
65                <span>Open Settings</span>
66                <CommandShortcut className="ml-auto text-xs text-slate-400">⌘,</CommandShortcut>
67              </CommandItem>
68            </CommandGroup>
69          </CommandList>
70        </div>
71      </div>
72    </div>
73  );
74}