crisp
Components

ListPage

An entity-list page shell — for list views like reports, sequences, tasks and notes.

A shared layout for entity-list views like reports, sequences, tasks, and notes: a view-bar toolbar (leading Sort/Filter, a record count, trailing view-toggle / View settings / New), an optional dashed Favorites region, then column headers and time-grouped 52px rows. Rows are composed by the caller — wrap each in <ListRow> (a real <button> when onClick is given). Pair with Button, Badge (dot for status), Avatar, and EmptyState.

Its chrome is measured, but rows are entirely caller-composed — use it directly as the shell for any entity-list page.

Available since@crisp-ui-kit/crisp@0.11.0

Installation

npm install @crisp-ui-kit/crisp

Usage

import { ListPage, ListRow, Button, Badge } from "@crisp-ui-kit/crisp";

<ListPage
  count="2 sequences"
  leading={<Button intent="neutral" size="sm">Sort</Button>}
  trailing={<Button intent="primary" size="sm">New sequence</Button>}
  favorites={<EmptyState title="Favorites" description="…will appear here" />}
  columns={[{ label: "Sequence" }, { label: "Status" }]}
  groups={[
    {
      id: "week",
      label: "Created last week",
      count: 2,
      rows: rows.map((r) => (
        <ListRow key={r.id} onClick={() => open(r.id)}>
          <span className="listpage-row-title">{r.name}</span>
          <Badge tone="success" dot>Enabled</Badge>
        </ListRow>
      )),
    },
  ]}
/>;

Props

Prop

Type

PreviousFlowCanvasNextTaskList

On this page

InstallationUsageProps