Skip to content

Add a crisp-ui item to a project that already uses shadcn/ui.

Requirements

  • A project set up with npx shadcn@latest init.
  • Tailwind 3.4 or newer (the parts use size-*).

Add an item

Install any item by URL. Its dependencies come with it.

pnpm dlx shadcn@latest add https://realgood.site/r/status-notify.json

Use the @crisp namespace

Register the registry once in components.json:

components.json
{
  "registries": {
    "@crisp": "https://realgood.site/r/{name}.json"
  }
}

Then install by name:

pnpm dlx shadcn@latest add @crisp/status-notify

Install from GitHub

The repository is also a shadcn GitHub registry, so no hosting is involved. Use it if the site is unreachable or you want the source straight from the repository:

pnpm dlx shadcn@latest add aristidesnakos/crisp-ui/status-strip

The items are the same as the ones below, and dependencies between them resolve too. These installs follow the repository's default branch. The shadcn docs describe pinning a branch, tag or commit by adding # and its name after the item; only a branch has been tried here.

Items

ItemWhat it is
status-notifyThe whole pattern, wired together
status-stripHeadline number, segmented bar, legend and an action slot
recipient-rosterOne list of people with a switch per channel
confirm-sendClick, confirm with the count, send, "Sent to N"
save-bar"Unsaved changes" with Discard and Save, hidden when clean
notify-envelopePure helpers: roster from lists, list comparison, One-message To/Cc
audit-timelineRead-only "who did what, when, and why" list, grouped by day
audit-eventThe AuditEvent type and pure helpers for building and grouping
alert-rulesEditor for reminder cadence, escalation and quiet hours
alert-rules-libPure helpers: validate a rule, quiet-hours check, reminders due