Record Page

The page Attio navigates to when you click into a record (as opposed to the quick-peek Record Panel). A slim top bar (breadcrumb · logo · name · favourite · edit · compose · …), then a two-column body: a 320px left Record Details attribute column and a flexible main area whose tab bar switches content. Overview stacks a bordered Highlights stat-grid, an Activity feed (with View all), and live Notes, Tasks, and Emails sections. Measured from the live app.

Preview

The full record detail below is live — add Notes and Tasks, check tasks off, toggle the ★ favourite, and expand to full screen with the ⤢ button (Esc exits).

Installation

bun add crisp

import "crisp/styles.css";
import { RecordPage } from "crisp";

Usage

RecordPage fills its container (drop it into the app's main content area). Wire it to a table's onOpenRecordPage — which turns each row's entity name into a link — and swap the list view for the page:

import { RecordPage, RecordsTable, defaultColumns, type Row } from "crisp";
import * as React from "react";

export function Companies() {
  const [record, setRecord] = React.useState<Row | null>(null);
  return record ? (
    <RecordPage
      record={record}
      columns={defaultColumns}
      collection="Companies"
      onBack={() => setRecord(null)}
    />
  ) : (
    <RecordsTable onOpenRecordPage={setRecord} />
  );
}

The table exposes two open affordances, matching Attio: onOpenRecordPage (click the name → full page) and onOpenRecord (the row's ↗ button → peek drawer).

Props

Notes

• Layout. Sidebar (from the App Shell) · 320px details column (border-right) · flexible main. The details column reuses the same typed field renderers as the record grid — colour-coded tags, formatted numbers, brand links.
• Highlights. A bordered 3-column stat grid of Attio's enrichment fields — Connection strength, Next calendar interaction, Team, Estimated ARR, Funding raised, Employee range — a couple derived from the record (ARR, employee range), the rest shown as empty states.
• Tabs. The main area uses the Tabs primitive (Overview · Activity · Emails · Calls · Team · Notes · Tasks · Files · Associated deals). The Notes and Tasks tabs — and their Overview sections — are live: New note opens a composer (⌘↵ saves), New task adds a checkable to-do (the Checkbox primitive), and the tab badges track the counts.
• Header actions. Ask Attio · a ★ favourite toggle (fills gold) · edit · compose email · full-screen · a ⋯ record-actions menu.

See it composed into the whole app in the Companies page example — where clicking a company name in the table opens this page.