Inline Citation

Hoverable citations inline with text - a pill shows source hostnames, and the card carousels full titles, URLs, and quotes.

Default

Hover the citation pill to browse sources in a carousel with title, URL, and description.

Loading…

Installation

CLI

npx @sonojs/ui@latest add inline-citation

Also needs

npx @sonojs/ui@latest add badge carousel hover-card

npm i lucide-react

Usage

inline-citation.tsx

import {
  InlineCitation,
  InlineCitationCard,
  InlineCitationCardBody,
  InlineCitationCardTrigger,
  InlineCitationSource,
  InlineCitationText,
} from "@/components/sonojs/inline-citation"

export function Example() {
  return (
    <p>
      AI keeps improving.{" "}
      <InlineCitation>
        <InlineCitationText>
          New breakthroughs are announced regularly
        </InlineCitationText>
        <InlineCitationCard>
          <InlineCitationCardTrigger
            sources={["https://example.com/nlp-advances"]}
          />
          <InlineCitationCardBody className="p-4">
            <InlineCitationSource
              title="Advances in NLP"
              url="https://example.com/nlp-advances"
              description="A short summary of the source."
            />
          </InlineCitationCardBody>
        </InlineCitationCard>
      </InlineCitation>
      .
    </p>
  )
}

Props

Prop	Type	Default	Description
InlineCitationCardTrigger sources	string[]	-	Source URLs - first hostname is shown, plus `+N` when more exist.
InlineCitationSource	title? / url? / description?	-	Source metadata inside a carousel slide.
InlineCitationQuote	blockquote props	-	Optional quoted excerpt with a start-edge border.
InlineCitationCarousel*	Carousel wrappers	-	Prev / next / index wired through a shared Embla API context.