Search
Search with Algolia integration; Cmd+K in trigger
Same BEM classes and behavior as Astro, Svelte, and Vue.
Add this component
The command below includes <strong>Search</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
pnpm dlx rizzo-css add Search
bunx rizzo-css add Search
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Search from '../components/astro/Search.astro';
---
<Search placeholder="Search…" client:load />
<!-- Shipped Navbar includes Search; standalone below. Include js/main.js for open/close. -->
<div class="search" data-search>...</div>
<script>
import { Search } from '$lib/rizzo';
</script>
<Search placeholder="Search…" />
<script setup>
import Search from '@/components/rizzo/Search.vue';
</script>
<template>
<Search id="search-1" placeholder="Search…" />
</template>
import { Search } from './components/react';
<Search id="search-1" placeholder="Search…" />
Other frameworks: Astro · Vanilla · Svelte · Vue