Components

Web Search

The sources behind an AI answer, shown as a search pill, source cards, a streaming answer, and inline citations.

Dependencies

motion

Interaction Type

Press Replay to watch a search run and the answer type itself out. Hover the favicons to fan them out, and hover a citation to preview its source.

Props

Options you can pass to customize this component.

Prop
Type
Description
sources*
WebSource[]

The results, each an id, a title, and a url, plus an optional snippet and favicon. Without a favicon, a colored letter stands in.

status
searchingdone

Searching shimmers the label and holds empty slots for results still on the way.

query
string

Shown in the label while searching.

label
string

Replaces the label. By default it reads "Searching the web", then "Searched 6 sites".

progress
number

How far the search is, 0 to 1, drawn as the ring around the globe. Leave it out and the ring fills a step with each source.

linked
boolean

Whether cards and citations open their source in a new tab. Turn it off to keep visitors on the page; the previews still work.

open
boolean

Pass this to control whether the cards show. Pair it with onOpenChange.

defaultOpen
boolean

Whether the cards show on first render.

onOpenChange
(open: boolean) => void

Called each time the cards show or hide.

play
boolean

On WebSearchAnswer only. Starts typing the answer. Paragraphs, lists, and bold text are typed into; citations land whole. Children that grow later are typed in as they arrive.

speed
number

On WebSearchAnswer only. Average characters per second. A long backlog types faster so a live stream never falls behind.

onComplete
() => void

On WebSearchAnswer only. Called once the last character is typed.

source
WebSource

On WebSearchCitation only. The source the inline chip links to and previews.

index
number

On WebSearchCitation only. A number shown after the site name, for numbered references.

className
string

Extra classes merged onto the root element (data-slot="web-search", with data-status). The width defaults to 560px.

Installation

npx shadcn@latest add swamimalode07/rare-ui/web-search

How to use

"use client"


import {
  WebSearch,
  WebSearchAnswer,
  WebSearchCitation,
} from "@/components/ui/web-search"


const sources = [
  {
    id: "mdn",
    title: "prefers-reduced-motion",
    url: "https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion",
    snippet: "Detects if the user asked for less motion.",
  },
]


export function Answer() {
  return (
    <div>
      <WebSearch sources={sources} />
      <WebSearchAnswer>
        Turn animations off when the user asks for less motion{" "}
        <WebSearchCitation source={sources[0]} />.
      </WebSearchAnswer>
    </div>
  )
}


// while results stream in, pass status="searching" and grow the array

Source Code

Click the code icon in the top-right corner to view the source code.

Keep in mind

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

  • •MIT with the Commons Clause and an attribution requirement. Free to use, modify and ship in personal and commercial projects, closed source included. You own the code once it is in your project.
  • •Credit is required. Any project shipping a Rare UI component must credit Rare UI with a visible link back to rareui.com, in a footer, an about page, a credits screen or a README.
  • •Don't strip the credit or the copyright notice from the source you copied.
  • •Don't sell, sublicense or redistribute the components themselves, on their own, bundled into a template, kit, theme or paid course, or ported to another framework.
  • •Don't republish them. No mirrors, no re-uploads, no listing them as your own work.
  • •Don't repackage the registry as a competing component library.
  • •Don't claim authorship of a component or of Rare UI itself.
  • •The LICENSE file in the repository is the full text and governs. Ask first if your use doesn't fit these rules.
Web Search