NotesGallery

The Notes page chrome, measured live on Attio: a "Notes N" / "Templates N" sub-tab pair, a toolbar, a dashed Favorites region (it reads "Notes that you favorite will appear here" when empty), and date-grouped sections of cards in a responsive auto-fill grid. Each card is an EntityCard; this component only adds the gallery chrome around it. The toolbar is yours: pass a sort trigger as leading and a ViewToggle or "New note" button as trailing.

The grid uses the one measured note-card width (356px); no fixed column count is invented.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { NotesGallery } from "@crisp-ui-kit/crisp";

<NotesGallery
  notesCount={12}
  templatesCount={0}
  activeTab={tab}
  onActiveTabChange={setTab}
  trailing={<Button>New note</Button>}
  favorites={favoriteNotes}
  groups={[
    {
      id: "last-month",
      label: "Created last month",
      count: 2,
      notes: [{ id: "a", title: "Kickoff notes", date: "Aug 27", onClick: open }],
    },
  ]}
/>;

The tab strip is always notes and templates; notesCount / templatesCount are the badge counts, and the gallery does not filter anything itself — swap groups when activeTab changes. Pass an empty favorites (or omit it) for the dashed empty panel, and emptyLabel is shown when no group holds any note.

Props

NotesGallery also accepts every div attribute except children.

A group is { id, label, count, notes }, and a note is { id, title, linkedRecord?, excerpt?, author?, date?, onClick? }. linkedRecord fills the card's leading author-row slot; author is the footer.