Blackboard

Install it

Source

1"use client";
2 
3import type { BlackboardProps } from "./types";
4import { BlackboardRoot } from "./parts/blackboard-root";
5import { BlackboardSurface } from "./parts/blackboard-surface";
6import { BlackboardNotificationBadge } from "./parts/blackboard-notification-badge";
7import { BlackboardBackgroundEditor } from "./parts/blackboard-background-editor";
8import { BlackboardPinnedRow } from "./parts/blackboard-pinned-row";
9import { BlackboardNoteStream } from "./parts/blackboard-note-stream";
10import { BlackboardComposer } from "./parts/blackboard-composer";
11 
12/**
13 * Batteries-included blackboard. Pure composition over `BlackboardRoot` + the flat
14 * parts, gated by `show*` toggles — contains no logic the parts don't, so any
15 * hand-assembled subset behaves identically. For a lighter build, compose the
16 * parts directly and drop what you don't need (e.g. omit `BlackboardComposer`).
17 */
18export function Blackboard(props: BlackboardProps) {
19  const {
20    showComposer,
21    showNotificationBadge = true,
22    showBackgroundEditor,
23    showPinnedRow = true,
24    ...rootProps
25  } = props;
26 
27  const composerVisible = showComposer ?? !!rootProps.onPostNote;
28  const bgEditorVisible = showBackgroundEditor ?? !!rootProps.editableBackground;
29 
30  return (
31    <BlackboardRoot {...rootProps}>
32      <BlackboardSurface>
33        {showNotificationBadge ? <BlackboardNotificationBadge /> : null}
34        {bgEditorVisible ? <BlackboardBackgroundEditor /> : null}
35        {showPinnedRow ? <BlackboardPinnedRow /> : null}
36        <BlackboardNoteStream />
37        {composerVisible ? <BlackboardComposer /> : null}
38      </BlackboardSurface>
39    </BlackboardRoot>
40  );
41}

What it pulls in

npm packages

• @fontsource/kalam
• @fontsource-variable/caveat
• @fontsource/patrick-hand
• @fontsource/shadows-into-light
• date-fns
• lucide-react

Other registry items

• button
• textarea

Files it writes

• src/registry/components/data/blackboard/blackboard.tsx
• src/registry/components/data/blackboard/blackboard-fonts.ts
• src/registry/components/data/blackboard/index.ts
• src/registry/components/data/blackboard/types.ts
• src/registry/components/data/blackboard/hooks/use-autosave.ts
• src/registry/components/data/blackboard/hooks/use-blackboard.ts
• src/registry/components/data/blackboard/hooks/use-blackboard-state.ts
• src/registry/components/data/blackboard/hooks/use-controllable-state.ts
• src/registry/components/data/blackboard/hooks/use-lazy-older.ts
• src/registry/components/data/blackboard/hooks/use-mentions.ts
• src/registry/components/data/blackboard/lib/mentions.ts
• src/registry/components/data/blackboard/lib/palette.ts
• src/registry/components/data/blackboard/lib/unread.ts
• src/registry/components/data/blackboard/parts/blackboard-background-editor.tsx
• src/registry/components/data/blackboard/parts/blackboard-composer.tsx
• src/registry/components/data/blackboard/parts/blackboard-note-item.tsx
• src/registry/components/data/blackboard/parts/blackboard-note-stream.tsx
• src/registry/components/data/blackboard/parts/blackboard-notification-badge.tsx
• src/registry/components/data/blackboard/parts/blackboard-pinned-row.tsx
• src/registry/components/data/blackboard/parts/blackboard-root.tsx
• src/registry/components/data/blackboard/parts/blackboard-surface.tsx
• src/registry/components/data/blackboard/parts/board-background.tsx
• src/registry/components/data/blackboard/parts/chalk-width-picker.tsx
• src/registry/components/data/blackboard/parts/handwriting-font-picker.tsx
• src/registry/components/data/blackboard/parts/handwritten-note.tsx
• src/registry/components/data/blackboard/parts/ink-color-picker.tsx
• src/registry/components/data/blackboard/parts/mention-picker.tsx
• src/registry/components/data/blackboard/parts/mention-text.tsx
• src/registry/components/data/blackboard/parts/note-composer.tsx
• src/registry/components/data/blackboard/parts/unread-count.tsx