Inbox

A notification panel: a ~380px rounded panel with a title, Notifications / Requests tabs (with counts), then notification rows (avatar + message + time + unread dot), or a centred empty state. Drop it inside a Popover for the tray flyout, or use it standalone. Switch to the Requests tab in the preview to see the empty state.

A measured, purpose-built notification flyout; its rows are your own data, so it's ready to use as-is for any notification tray.

Installation

npm install @crisp-ui-kit/crisp

Usage

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

<Inbox
  tabs={[
    { id: "n", label: "Notifications", count: 3 },
    { id: "r", label: "Requests", count: 0 },
  ]}
  activeTab={tab}
  onTabChange={setTab}
  notifications={[
    {
      id: "1",
      avatar: <Avatar name="Ada" />,
      message: <><b>Ada</b> mentioned you in <b>Kickoff notes</b></>,
      time: "2h",
      unread: true,
    },
  ]}
/>;

Keyboard

The tab strip carries role="tablist", so it runs crisp's shared tablist model — the same one Tabs uses.

Selecting with the arrows activates immediately and focus follows, which is APG's automatic mode and what makes the single roving stop work. Name the strip with tabsLabel.

Props