Companies page
A full-page clone of Attio's Companies record view, composed entirely from crisp.
Everything crisp is built toward, on one screen: the App Shell (collapsible + resizable sidebar) wrapping the real Sidebar, a top bar + view bar (view switcher, View settings, Import/Export, New), and the Records Table with 12 columns — no mock-ups, every piece is the shipped component. Best viewed full-screen (the ⤢ button).
It's all live. Drag the sidebar's right edge to resize it, and press the panel button in the sidebar header to collapse it (a button on the left brings it back). Use the ⤢ button in the header to open it full screen (Esc to exit). In the table: sort or filter from the toolbar, double-click a cell to edit, drag a column edge to resize, select rows for the bulk bar (Add to list pins them ★, More → Export / Delete), and click a summary-footer cell to pick its aggregation. In the sidebar: ⌘K opens the command palette.
Composition
import { Sidebar } from "crisp";
import { RecordsTable } from "crisp";
export function CompaniesPage() {
return (
<div style={{ display: "flex", height: "100vh" }}>
<Sidebar />
<main style={{ flex: 1, display: "flex", flexDirection: "column" }}>
<PageHeader title="Companies" view="All Companies" />
<div style={{ flex: 1, minHeight: 0, padding: 16 }}>
<RecordsTable />
</div>
</main>
</div>
);
}The header and tabs above are plain markup for the demo; the two heavy pieces — the sidebar and the grid — are crisp components with all of their behavior intact.