Overlays searchfullscreenoverlay

Fullscreen Search

Immersive search interface that covers the entire viewport.

Start searching...
Search for components, guides, or authors

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { FullscreenSearch } from 'astro-component-kit';
---

<SearchOverlayFullscreen>Content</SearchOverlayFullscreen>
--- import { FullscreenSearch } from 'astro-component-kit'; --- <SearchOverlayFullscreen>Content</SearchOverlayFullscreen>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/FullscreenSearch.astro and paste the following code:

astro 
---
---
<div class="search-hero">
  <div class="close">Esc</div>
  <input type="text" placeholder="Start searching..." autofocus />
  <div class="hints">Search for <span>components</span>, <span>guides</span>, or <span>authors</span></div>
</div>
<style>
  .search-hero { position: fixed; inset: 0; background: #080b14; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
  .close { position: absolute; top: 3rem; right: 3rem; color: #64748b; font-weight: 700; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.1); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }
  input { width: 100%; max-width: 800px; background: transparent; border: none; color: #fff; font-size: 3rem; font-weight: 800; text-align: center; outline: none; }
  .hints { margin-top: 2rem; color: #64748b; font-size: 1rem; }
  span { color: #818cf8; text-decoration: underline; cursor: pointer; }
  @media (max-width: 768px) { input { font-size: 1.5rem; } }
</style>
--- --- <div class="search-hero"> <div class="close">Esc</div> <input type="text" placeholder="Start searching..." autofocus /> <div class="hints">Search for <span>components</span>, <span>guides</span>, or <span>authors</span></div> </div> <style> .search-hero { position: fixed; inset: 0; background: #080b14; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; } .close { position: absolute; top: 3rem; right: 3rem; color: #64748b; font-weight: 700; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.1); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; } input { width: 100%; max-width: 800px; background: transparent; border: none; color: #fff; font-size: 3rem; font-weight: 800; text-align: center; outline: none; } .hints { margin-top: 2rem; color: #64748b; font-size: 1rem; } span { color: #818cf8; text-decoration: underline; cursor: pointer; } @media (max-width: 768px) { input { font-size: 1.5rem; } } </style>

Quick Info

Category
Overlays
Filename
FullscreenSearch.astro
Dependencies
None — pure Astro + CSS
Tags
searchfullscreenoverlay