caliper uidocs
DemoSign inGet Pro

Search results

Pro

A list of results with highlights, filters and counts.

Installs components/ui/search-results.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/search-results

7 results for “webhook”

  1. DocsDevelopers

    Caliper UI retries failed webhook deliveries with exponential backoff for up to 24 hours. Verify every request with the signing secret.

    GuideUpdated Oct 8

  2. DocsAPIEvents

    Every event type with its payload, including invoice.paid, invoice.failed and subscription.cancelled.

    ReferenceUpdated Sep 29

  3. DocsGetting started

    Add an https endpoint, choose events and send a test delivery from the dashboard.

    GuideUpdated Aug 14

  4. CommunityTroubleshooting

    A 502 usually means your server was unreachable. Check the delivery log and retry from the dashboard.

    CommunityOct 2

Try “webhok” to see a suggestion, or “zzz” for nothing.

When to use #

Use it for

  • Showing matches for a query.

Skip it when

  • There is a single answer.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/search-results

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { SearchResults } from "@/components/ui/search-results"

The worked example comes with Pro

The 33-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

SearchResults

component
PropTypeDefaultDescription
query *string—
onQueryChange *(q: string) => void—
hits *readonly SearchHit[]—
loadingboolean—
suggestionstring—A corrected search, shown as "Did you mean".
onOpen((hit: SearchHit) => void)—
pageSizenumber5
classNamestring—

Accessibility #

It exposes status and group semantics, with aria-label, aria-hidden, aria-pressed and aria-busy kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.