BJORK Memory viewer

Component 1

About

Memory viewer 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 Memory viewer to your project and fits it to your theme.

Code

How BJORK Memory viewer 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 { MemoryViewer, SAMPLE_MEMORIES, type MemoryItem } from "@/components/ui/bjork-memory-viewer";

const POSE_IDS = ["m1", "m3", "m4", "m6"];

const POSE_MEMORIES = SAMPLE_MEMORIES.filter((m) => POSE_IDS.includes(m.id));

function Demo({
  memories,
  run,
  log,
  onForget,
  onEdit,
}: {
  memories: MemoryItem[];
  run: number;
  log: string;
  onForget: (id: string) => void;
  onEdit: (id: string, text: string) => void;
}) {
  const isPreview = false;

  if (isPreview) {
    return (
      <div className="w-[min(520px,calc(100vw-56px))]">
        <MemoryViewer memories={POSE_MEMORIES} defaultEditingId="m3" />
      </div>
    );
  }

  return (
    <div className="flex w-[min(520px,calc(100vw-56px))] flex-col items-stretch gap-5">
      <MemoryViewer key={run} memories={memories} onForget={onForget} onEdit={onEdit} />
      <p className="min-w-0 truncate text-center font-mono text-[11px] text-[color:var(--bjork-text-faint)]">{log}</p>
    </div>
  );
}
function SourceDemo(){
const [memories, setMemories] = useState<MemoryItem[]>(SAMPLE_MEMORIES);
const [run, setRun] = useState(0);
const [log, setLog] = useState("Hover a memory to edit or forget it");
const reset = () => {
    setMemories(SAMPLE_MEMORIES);
    setLog("Hover a memory to edit or forget it");
    setRun((r) => r + 1);
  };
return <>

      <Demo
        memories={memories}
        run={run}
        log={log}
        onForget={(id) => {
          setMemories((list) => list.filter((m) => m.id !== id));
          setLog(`onForget(${id}) after the undo window`);
        }}
        onEdit={(id, text) => {
          setMemories((list) => list.map((m) => (m.id === id ? { ...m, text } : m)));
          setLog(`onEdit(${id})`);
        }}
      />
    
</>;
}
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>}