Search Component — Astro

Search component with Algolia integration and live filtering

Search Component

An accessible search component with Algolia integration for fast, relevant search results. Includes live filtering, keyboard navigation, and a client-side fallback.

Features

  • Full-screen overlay - When open, the overlay covers the viewport; the search modal is centered inside it both horizontally and vertically
  • Algolia integration with client-side fallback
  • Keyboard shortcut - Ctrl+K / Cmd+K to open
  • Close button on desktop (X icon with screen reader label)
  • Close button on mobile with text label
  • Live search results as you type
  • Full keyboard navigation (Arrow keys, Enter, Escape, Tab)
  • Mobile responsive - Full-width panel on mobile
  • Mutually exclusive with mobile menu (only one open at a time)
  • Accessible - ARIA attributes and screen reader support

Live example

Search is in the navbar (top of page) — click the search icon or press Ctrl+K / Cmd+K. You can also use the standalone search below.

Standalone search (same as navbar)

Usage

astro astro 
---
import Search from '../../components/Search.astro';
---

<!-- Client-side search (default; uses built-in index when no Algolia credentials) -->
<Search />

<!-- With Algolia (pass credentials via props or env) -->
<Search
  useAlgolia={true}
  algoliaAppId="YOUR_APP_ID"
  algoliaApiKey="YOUR_SEARCH_ONLY_API_KEY"
  algoliaIndexName="rizzo-css-docs"
/>

Props

  • useAlgolia (boolean, optional) - Enable Algolia search (default: false)
  • algoliaAppId (string, optional) - Algolia Application ID
  • algoliaApiKey (string, optional) - Algolia Search-Only API Key
  • algoliaIndexName (string, optional) - Algolia index name (default: "rizzo-css-docs")

Keyboard Shortcuts

  • Ctrl+K / Cmd+K - Open/close search
  • Escape - Close search
  • Arrow Down - Navigate to next result
  • Arrow Up - Navigate to previous result
  • Enter - Navigate to selected result

Algolia Setup

To use Algolia search in production:

  1. Create an account at algolia.com
  2. Create a new application and get your credentials
  3. Index your documentation using the indexing script:
    nodejs nodejs 
    # Install Algolia client
pnpm add algoliasearch

# Set environment variables
export ALGOLIA_APP_ID="your-app-id"
export ALGOLIA_API_KEY="your-admin-api-key"
export ALGOLIA_INDEX_NAME="rizzo-css-docs"

# Run indexing script
node scripts/index-docs.js
  4. Configure your Search component with the credentials

See Search Documentation for complete setup instructions.

Accessibility

The Search component includes comprehensive accessibility features:

  • ARIA Roles: role="dialog", role="listbox", role="option"
  • ARIA Labels: Descriptive labels for all interactive elements
  • Keyboard Navigation: Full keyboard support for all interactions
  • Focus Management: Focus trapping and restoration
  • Screen Reader Support: Proper announcements and labels
  • Live Regions: Search results announced to screen readers

Svelte & Vanilla: Svelte ¡ Vanilla: same HTML and BEM as in Usage above; add JS for Cmd+K and Algolia.