Record Page

The page you navigate 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.

This is a faithful, specific record page, not a generic two-pane detail layout — for your own record/detail view, compose Tabs, Card, and FormField directly.

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-ui-kit/crisp

import "@crisp-ui-kit/crisp/base.css";  // optional app baseline
import "@crisp-ui-kit/crisp/styles.css";
import { RecordPage } from "@crisp-ui-kit/crisp";

Usage

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

import { DataTable, RecordPage } from "@crisp-ui-kit/crisp";
import * as React from "react";

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

The grid exposes two open affordances: onRowClick (click the row → full page) and a type: "entity" column's own onOpenPreview (its "open preview" icon → peek drawer).

Props

Translating the chrome

RecordPage draws about fifty strings of its own: the tab strip, the Highlights stats, the action bar, the notes and tasks feed. They arrive as one partial map, so translating one control does not mean restating the rest — anything omitted keeps its default from recordPageLabels.

<RecordPage
  record={record}
  columns={columns}
  labels={{
    composeEmail: "E-posta yaz",
    tabs: { activity: "Etkinlik" },
    highlightLabels: { connectionStrength: "Bağlantı gücü" },
    taggedCategories: (n) => `${n} kategori etiketlendi`,
  }}
/>

The keyed maps (tabs, highlightLabels, highlightEmpty) nest and merge per key. The interpolated lines are formatters rather than templates, because word order does not survive translation: domainSetTo(value) and taggedCategories(count) each build the whole phrase and may return a ReactNode.

The record's own field labels and values are not here — those are your data, and they arrive through record and columns. What labels covers is the surface crisp draws around them. The Highlights stats are chrome despite reading like data: they are a fixed, measured set, not something the consumer supplies.

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 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 AI · 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.