Blackboard

When to use

Reach for Blackboard when a team needs a shared, low-ceremony wall — a dark chalkboard you drop into a dashboard or panel where members jot short handwritten notes. Each writer picks an ink color, chalk width, and handwriting font; notes auto-save, the stream lazy-loads older notes on scroll-up, hovering reveals the author, and a handwritten red number marks unread notes. It is not a threaded comment list (comment-thread), a chat panel, or a freeform whiteboard.

Basic example

import { Blackboard } from "@/components/blackboard"

export function TeamBoard({ notes, me, team }) {
  return (
    <div className="h-[520px]">
      <Blackboard
        notes={notes}                 // controlled, oldest → newest
        currentUser={me}
        members={team}                 // drives the @-mention picker
        canWrite
        onPostNote={(draft) => api.post(draft)}      // auto-saves; no Save button
        onLoadOlder={(beforeId, n) => api.older(beforeId, n)}  // 10 on scroll-up
        hasMoreOlder
        onPinNote={(id) => api.pin(id)}
        onMention={(noteId, ids) => api.notify(noteId, ids)}
        lastSeenNoteId={me.lastSeen}
        onSeen={(id) => api.markSeen(id)}
        editableBackground
      />
    </div>
  )
}

Lighter (à la carte)

It ships as a compound. Compose the flat parts directly and drop what you don't need — omitting BlackboardComposer yields a read-only wall and never pulls the writing / mention code:

import {
  BlackboardRoot, BlackboardSurface, BlackboardNoteStream,
} from "@/components/blackboard"

<BlackboardRoot notes={notes} currentUser={me}>
  <BlackboardSurface>
    <BlackboardNoteStream />
  </BlackboardSurface>
</BlackboardRoot>

Notes

• Portable by design.The library does no network I/O — persistence, real-time transport, and notifications are yours via callbacks. Push inbound notes with the imperative handle's appendNote().
• Pin is controlled via pinnedNoteIds (or the uncontrolled note.pinned flag); pinned notes lift into a sticky row.
• Fonts are bundled (Kalam / Caveat / Patrick Hand / Shadows Into Light) and overridable via the fontsprop. “Chalk width” uses real font-weight where the face supports it, a faux stroke otherwise.
• The board is intentionally dark in both light and dark app themes (chalkboard identity). Type @ in the composer to mention a teammate.