Search
Search components and interfaces for finding content throughout the application.
Basic Search
Simple search input with icon and placeholder text.
HTML
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
<input type="text" placeholder="Search..."
class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
</div>Search with Button
Search input with dedicated search button.
HTML
<div class="flex">
<div class="relative flex-1">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
<input type="text" placeholder="Search projects, tasks, people..."
class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-l-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
</div>
<button type="button"
class="px-4 py-2 bg-primary-600 text-white border border-primary-600 rounded-r-md shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
Search
</button>
</div>Search with Filters
Advanced search with filter options and categories.
HTML
<div class="space-y-4">
<!-- Search Input -->
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
<input type="text" placeholder="Search across all content..."
class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
</div>
<!-- Filter Chips -->
<div class="flex flex-wrap gap-2">
<button class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 hover:bg-primary-200 dark:hover:bg-primary-800">
All
</button>
<button class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600">
Projects
</button>
<!-- More filter buttons... -->
</div>
</div>Search Results
Search results display with highlighting and metadata.
Showing 3 results for "design system"
0.12 seconds
Project
Design System Implementation
Building a comprehensive design system for the TaskFlow application with reusable components...
Updated 2 hours ago • 12 tasks • 3 team members
Task
Create button components for design system
Design and implement reusable button components following the design system guidelines...
Assigned to Sarah Miller • Due tomorrow • High priority
File
Design System Guidelines.pdf
Complete documentation for the TaskFlow design system including colors, typography, and components...
Uploaded by John Doe • 2.4 MB • Last week
No results found
Try adjusting your search terms or filters.
HTML
<div class="space-y-4">
<!-- Results Header -->
<div class="flex items-center justify-between">
<div class="text-sm text-gray-600 dark:text-gray-400">
Showing 3 results for <span class="font-medium text-gray-900 dark:text-white">"design system"</span>
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
0.12 seconds
</div>
</div>
<!-- Result Item -->
<div class="p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-md transition-shadow">
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center space-x-2 mb-1">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
Project
</span>
<h3 class="text-lg font-medium text-gray-900 dark:text-white">
<span class="bg-yellow-200 dark:bg-yellow-800">Design System</span> Implementation
</h3>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-2">
Building a comprehensive <span class="bg-yellow-200 dark:bg-yellow-800">design system</span> for the TaskFlow application...
</p>
<div class="text-sm text-gray-500 dark:text-gray-400">
Updated 2 hours ago • 12 tasks • 3 team members
</div>
</div>
</div>
</div>
<!-- No Results State -->
<div class="text-center py-12">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
<h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">No results found</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">
Try adjusting your search terms or filters.
</p>
</div>
</div>Global Search Modal
Full-screen search modal with keyboard shortcuts.
Modal Content Preview:
Recent Searches
design system components
project deadlines
HTML
<!-- Trigger Button -->
<button type="button" class="w-full flex items-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-left bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
<svg class="h-5 w-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
<span class="text-gray-500 dark:text-gray-400 flex-1">Search anything...</span>
<kbd class="hidden sm:inline-block px-2 py-1 text-xs text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-400 border border-gray-200 dark:border-gray-600 rounded">
⌘K
</kbd>
</button>
<!-- Modal Content -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 p-4">
<div class="relative mb-4">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
<input type="text" placeholder="Search across TaskFlow..."
class="w-full pl-10 pr-4 py-3 border-0 text-lg bg-transparent text-gray-900 dark:text-white focus:outline-none">
</div>
Recent Searches
design system components
project deadlines
HTML
<!-- Trigger Button -->
<button type="button" class="w-full flex items-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-left bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
<svg class="h-5 w-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
<span class="text-gray-500 dark:text-gray-400 flex-1">Search anything...</span>
<kbd class="hidden sm:inline-block px-2 py-1 text-xs text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-400 border border-gray-200 dark:border-gray-600 rounded">
⌘K
</kbd>
</button>