BJORK Citation chips

Component 6

About

Citation chips is a production-ready ai component from BJORK UI, packaged for shadcn registries.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds BJORK Citation chips to your project and fits it to your theme.

Code

How BJORK Citation chips is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { CitationGroup, CitedText, SAMPLE_CITED_ANSWER, SAMPLE_SOURCES, SourceList } from "@/components/ui/bjork-citation-chips";

function Demo() {
  const isPreview = false;
  const [opened, setOpened] = useState<string | null>(null);

  return (
    <div className="flex w-[min(540px,calc(100vw-56px))] flex-col items-stretch gap-5">
      {/* Keyed by mode: the preview flag resolves after hydration, and the pose lives in initial state. */}
      <CitationGroup key={isPreview ? "pose" : "live"} defaultHighlighted={isPreview ? "s2" : null}>
        <CitedText
          sources={SAMPLE_SOURCES}
          text={SAMPLE_CITED_ANSWER}
          defaultOpenIndex={isPreview ? 1 : undefined}
          onOpenSource={isPreview ? undefined : (s) => setOpened(s.domain)}
        />
        <SourceList sources={SAMPLE_SOURCES} onOpenSource={isPreview ? undefined : (s) => setOpened(s.domain)} />
      </CitationGroup>
      {!isPreview && (
        <p className="min-h-4 font-mono text-[11px] text-[color:var(--bjork-text-faint)]">
          {opened ? `Would open ${opened}` : "Hover, focus or tap a citation"}
        </p>
      )}
    </div>
  );
}
function SourceDemo(){

return <>

      <Demo />
    
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}