1 GitHub star = 1 new component.

Star the repo
Overlayssearchfullscreenoverlay

Fullscreen Search

Full-screen search interface with prominent search field.

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

Usage

Copy and paste this code into your React component:

tsx
import { SearchOverlayFullscreen } from 'react-component-kit-ui/overlays';

<SearchOverlayFullscreen>Content</SearchOverlayFullscreen>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/SearchOverlayFullscreen.tsx + SearchOverlayFullscreen.css:

SearchOverlayFullscreen.tsx
'use client';

import './SearchOverlayFullscreen.css';

/** SearchOverlayFullscreen โ€” ported from astro-component-kit. */
export interface SearchOverlayFullscreenProps {
}

export function SearchOverlayFullscreen({}: SearchOverlayFullscreenProps) {
  return (
    <>
      <div className="search-hero" data-rk-a5f9ea="">
        <div className="close" data-rk-a5f9ea="">Esc</div>
        <input type="text" placeholder="Start searching..." autoFocus data-rk-a5f9ea="" />
        <div className="hints" data-rk-a5f9ea="">Search for <span data-rk-a5f9ea="">components</span>, <span data-rk-a5f9ea="">guides</span>, or <span data-rk-a5f9ea="">authors</span></div>
      </div>
    </>
  );
}

export default SearchOverlayFullscreen;
SearchOverlayFullscreen.css
/* SearchOverlayFullscreen โ€” ported from astro-component-kit (overlays/SearchOverlayFullscreen.astro) */

.search-hero:where([data-rk-a5f9ea]) { position: fixed; inset: 0; background: #080b14; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
.close:where([data-rk-a5f9ea]) { 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:where([data-rk-a5f9ea]) { width: 100%; max-width: 800px; background: transparent; border: none; color: #fff; font-size: 3rem; font-weight: 800; text-align: center; outline: none; }
.hints:where([data-rk-a5f9ea]) { margin-top: 2rem; color: #64748b; font-size: 1rem; }
span:where([data-rk-a5f9ea]) { color: #818cf8; text-decoration: underline; cursor: pointer; }
@media (max-width: 768px) { input:where([data-rk-a5f9ea]) { font-size: 1.5rem; } }

Quick Info

Category
Overlays
Filename
SearchOverlayFullscreen.tsx
Dependencies
None โ€” pure React + CSS
Tags
searchfullscreenoverlay