Attio's Settings → Objects surface, measured live: the objects list (icon+name, type, record count, attribute count, a per-row "…" menu), an object's detail page with its Configuration (General/Appearance) and Attributes tabs, the attributes table (drag handle + type icon, Data type, Constraints, System/Enriched property badges), and the create-attribute flow — a dialog with a searchable, grouped attribute-type picker.

The plan-gate banner above the objects list and the "5/3" object-count pill in its header are Attio's own billing-tier chrome — out of scope by decision, since crisp models no billing tiers (see HANDOFF.md).

Installation

npm install @crisp-ui-kit/crisp

Usage

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

<ObjectsList
  objects={objects}
  onOpenObject={(id) => navigate(`/settings/objects/${id}`)}
  onCreateObject={() => setCreatingObject(true)}
/>;

The object detail page

ObjectDetailPage composes the header (icon, name, type badge, description) and a Configuration/Attributes tab bar. Content is a render prop, the same shape Tabs itself takes — compose ObjectGeneralSection + ObjectAppearanceSection under "configuration", AttributesTable under "attributes".

The attributes table

Create attribute

CreateAttributeDialog composes AttributeTypeSelect — a searchable, grouped Select over ATTRIBUTE_TYPE_OPTIONS (Attio's own "Type" list, verbatim) — plus a Name input, an optional Description, and an AI-autofill switch row.

Props

ObjectsList

ObjectDetailPage

ObjectGeneralSection

ObjectAppearanceSection

AttributesTable

AttributeTypeSelect

CreateAttributeDialog