121 Pro components and page blocks

Get Pro
uibrik

Updated

Cited Answer

Pro

Preview

Customize

Color

Installation

Pro

Cited Answer is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/cited-answer

Usage

import { CitedAnswer } from "@/components/uibrik/cited-answer/cited-answer";​const answer = "Modern cold-climate heat pumps use variable-speed inverter compressors that keep running at low output instead of cycling off [1]. Many add vapour injection, which pushes extra refrigerant into the compressor and holds capacity near 100% down to −15 °C [2][1]. Below that, efficiency falls, but field data still shows a seasonal COP around 2.5, so they deliver more heat than the electricity they use [3]. Backup resistance strips only switch on during the coldest hours [4].";​const sources = [  {    title: "How inverter compressors handle part load",    site: "thermalworks.io",    kind: "web",    score: 0.92,    passage: "Unlike single-speed units, an inverter compressor varies its speed, so it can run continuously at low output rather than switching on and off.",    quote: "run continuously at low output rather than switching on and off",  },  {    title: "Vapour injection in cold-climate units",    site: "Polar Labs",    kind: "pdf",    score: 0.88,    passage: "Enhanced vapour injection maintained rated heating capacity down to −15 °C ambient in all tested units, with gradual decline beyond.",    quote: "maintained rated heating capacity down to −15 °C",  },  // …2 more];​const query = "How do heat pumps keep working in very cold weather?";​<CitedAnswer  answer={answer}  sources={sources}  query={query}  color="#5b7bd6"  // activeSource={0}  // onActiveSourceChange={(index) => {}}/>

Where to use Cited Answer

  • AI search and RAG apps

    Every claim links to the passage it came from, so users can check the answer without leaving the page.

    Pairs with Streaming Chat and Prompt Input

  • Internal knowledge assistants

    PDF, doc and data sources show their kind and relevance, so teams can tell which documents an answer relied on.

    Pairs with File Card

  • Research and support tools

    Highlighting the sentences behind each source makes it easy to see which parts of an answer are well supported.

    Pairs with Agent Trace

Props

CitedAnswer
query
Type string
"How do heat pumps keep working in very cold weather?"
The question, shown above the answer.
color
Type string
"#5b7bd6"
Accent for pills, bars and highlights.
answerrequired
Type string
–
The answer, with citations written as [1], [2] (1-based into sources).
sourcesrequired
Type { title; site; url?; kind?: "web" | "pdf" | "doc" | "data"; score?: 0–1; passage; quote? }[]
–
What the answer cites. quote is the part of passage to highlight.
activeSource / onActiveSourceChange
Type number | null / (index) => void
–
Controlled highlighted source.
className
Type string
–
Classes for the card. Two columns from 640px wide, stacked below.