Components
Loading preview...
A powerful command palette with keyboard shortcuts, categorized results, and live search filtering. Perfect for SaaS apps, dashboards, and productivity tools to deliver a fast, intuitive, and modern search experience.
npx shadcn@latest add https://21st.dev/r/sshahaider/search-modalimport { SearchModal, CommandItem } from "@/components/ui/search-modal";
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import {
SearchIcon,
Moon,
Home,
Settings,
User,
Mail,
Bell,
Copy,
Share2,
RefreshCw,
Trash2,
Clock,
Bookmark,
HelpCircle,
FileText,
Zap,
Palette,
Globe,
Lock,
Volume2,
Smartphone,
Printer,
Camera,
Maximize,
Info,
GitBranch,
Twitter,
Play,
Terminal,
} from 'lucide-react';
export default function DemoOne() {
return (
<div className="relative flex min-h-screen w-full items-center justify-center px-4">
<SearchModal data={data}>
<Button
variant="outline"
className="relative h-9 w-60 justify-between px-3 py-2"
>
<span className="inline-flex">Search...</span>
<span className="sr-only">Search</span>
<SearchIcon className="size-4" />
</Button>
</SearchModal>
{/* Center Shade */}
<div
aria-hidden="true"
className={cn(
'pointer-events-none absolute -top-10 left-1/2 -z-10 size-full -translate-x-1/2 rounded-full',
'bg-[radial-gradient(ellipse_at_center,--theme(--color-foreground/.1),transparent_50%)]',
'blur-[30px]',
)}
/>
</div>
);
}
const data: CommandItem[] = [
// Navigation commands
{
id: 'nav-home',
title: 'Go to Home',
description: 'Navigate to the home page',
category: 'Navigation',
icon: Home,
},
{
id: 'nav-about',
title: 'Go to About',
description: 'Learn more about us',
category: 'Navigation',
icon: Info,
},
{
id: 'nav-settings',
title: 'Go to Settings',
description: 'Configure your preferences',
category: 'Navigation',
icon: Settings,
},
{
id: 'nav-profile',
title: 'Go to Profile',
description: 'View and edit your profile',
category: 'Navigation',
icon: User,
},
{
id: 'nav-messages',
title: 'Go to Messages',
description: 'Check your messages and notifications',
category: 'Navigation',
icon: Mail,
},
// System commands
{
id: 'theme-toggle',
title: 'Toggle Theme',
description: 'Switch between light, dark, and system themes',
category: 'System',
icon: Moon,
},
{
id: 'toggle-notifications',
title: 'Toggle Notifications',
description: 'Enable or disable notifications',
category: 'System',
icon: Bell,
},
{
id: 'toggle-fullscreen',
title: 'Toggle Fullscreen',
description: 'Enter or exit fullscreen mode',
category: 'System',
icon: Maximize,
},
{
id: 'copy-url',
title: 'Copy Current URL',
description: 'Copy the current page URL to clipboard',
category: 'Utility',
icon: Copy,
},
{
id: 'share-page',
title: 'Share This Page',
description: 'Share the current page with others',
category: 'Utility',
icon: Share2,
},
{
id: 'print-page',
title: 'Print Page',
description: 'Print the current page',
category: 'Utility',
icon: Printer,
},
{
id: 'take-screenshot',
title: 'Take Screenshot',
description: 'Capture the current page',
category: 'Utility',
icon: Camera,
},
// Application commands
{
id: 'refresh-page',
title: 'Refresh Page',
description: 'Reload the current page',
category: 'Application',
icon: RefreshCw,
},
{
id: 'clear-cache',
title: 'Clear Cache',
description: 'Clear browser cache and storage',
category: 'Application',
icon: Trash2,
},
{
id: 'view-history',
title: 'View History',
description: 'See your browsing history',
category: 'Application',
icon: Clock,
},
{
id: 'bookmark-page',
title: 'Bookmark Page',
description: 'Add current page to bookmarks',
category: 'Application',
icon: Bookmark,
},
// AI and Help commands
{
id: 'ask-ai',
title: 'Ask AI Assistant',
description: 'Get help from the AI assistant',
category: 'Tools',
icon: Zap,
},
{
id: 'help-center',
title: 'Help Center',
description: 'Visit the help center for assistance',
category: 'Tools',
icon: HelpCircle,
},
{
id: 'keyboard-shortcuts',
title: 'Keyboard Shortcuts',
description: 'View all keyboard shortcuts',
category: 'Tools',
icon: FileText,
},
// Social commands
{
id: 'social-twitter',
title: 'Open Twitter',
description: 'Visit our Twitter page',
category: 'Social',
icon: Twitter,
},
{
id: 'social-github',
title: 'Open GitHub',
description: 'Visit our GitHub repository',
category: 'Social',
icon: GitBranch,
},
{
id: 'media-play',
title: 'Play/Pause Media',
description: 'Control media playback',
category: 'Media',
icon: Play,
},
{
id: 'media-mute',
title: 'Mute/Unmute',
description: 'Toggle audio mute',
category: 'Media',
icon: Volume2,
},
// Development commands
{
id: 'dev-console',
title: 'Open Console',
description: 'Open browser developer console',
category: 'Development',
icon: Terminal,
},
{
id: 'dev-responsive',
title: 'Responsive Design Mode',
description: 'Test responsive layouts',
category: 'Development',
icon: Smartphone,
},
// Settings commands
{
id: 'settings-appearance',
title: 'Appearance Settings',
description: 'Customize the application appearance',
category: 'Settings',
icon: Palette,
},
{
id: 'settings-privacy',
title: 'Privacy Settings',
description: 'Manage your privacy preferences',
category: 'Settings',
icon: Lock,
},
{
id: 'settings-language',
title: 'Language Settings',
description: 'Change the application language',
category: 'Settings',
icon: Globe,
},
];