CRM Pipeline Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

CRM Pipeline Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import CrmPipelinePage from @/components/blocks/crm-pipeline-page.

// app/(admin)/deals/page.tsx (the shell lives in app/(admin)/layout.tsx: <AdminShell layout="fill">{children}</AdminShell>)
"use client"

import { CrmPipelinePage, type CrmDeal } from "@/components/blocks/crm-pipeline-page"

export default function OportunitatiPage() {
  return (
    <CrmPipelinePage
      height="fill"
      currentUserId="ana-pop"
      onDealMove={async (move) => {
        await fetch(`/api/deals/${move.deal.id}`, {
          method: "PATCH",
          body: JSON.stringify({ stageId: move.to.id, lostReason: move.lostReason }),
        })
      }}
      onDealCreate={async (deal: CrmDeal) => {
        const response = await fetch("/api/deals", { method: "POST", body: JSON.stringify(deal) })
        return (await response.json()) as CrmDeal
      }}
    />
  )
}

Props

• pipelines
  CrmPipeline[]

  The pipelines ({ id, name, stages: DealStage[] }) of the title switcher; defaults to CRM_PIPELINE_SAMPLE.pipelines (B2B sales and Partnerships).

• pipeline
  string

  The shown pipeline's id, controlled; pair it with onPipelineChange.

• defaultPipelinedefault "b2b-sales"
  string

  The pipeline shown first while uncontrolled.

• onPipelineChange
  (pipeline: string) => void

  Called when the title switcher picks another pipeline.

• deals
  CrmDeal[]

  Every pipeline's deals, controlled (DealData plus companyId, contactId, createdAt, source, products and activity); a deal belongs to the pipeline that has its stage.

• defaultDeals
  CrmDeal[]

  The deals while uncontrolled; defaults to CRM_PIPELINE_SAMPLE.deals (the 12 W8 deals and 4 partnerships).

• onDealsChange
  (deals: CrmDeal[]) => void

  Called with the whole new list after every move, edit, create and delete.

• view
  "board" | "list"

  The board or the grouped list, controlled.

• defaultViewdefault "board"
  "board" | "list"

  The view while uncontrolled; switching pipelines keeps it.

• onViewChange
  (view: DealPipelineView) => void

  Called when the board's Board / List switch changes.

• owners
  { id: string; name: string; avatar?: string; role?: string }[]

  The sales team for the owner pickers; defaults to CRM_PIPELINE_SAMPLE.owners.

• companies
  CrmPipelineCompany[]

  Clients and their contacts for the new deal form and the sheet's contact card; defaults to CRM_PIPELINE_SAMPLE.companies.

• lostReasons
  string[]

  The reasons offered when a deal is lost; defaults to Price, Chose a competitor, Not enough budget, No decision, Other reason.

• currentUserIddefault "ana-pop"
  string

  Who you are: the Mine chip and the default owner of new deals.

• ownerFilter
  string[]

  The owner ids pressed in the board's owner chips (Mine presses yours), controlled.

• defaultOwnerFilter
  string[]

  The owner filter while uncontrolled; defaults to [] (everyone).

• onOwnerFilterChange
  (owners: string[]) => void

  Called when an owner chip or Mine changes the filter.

• closePeriod
  DateRange | null

  The expected close date filter, controlled; null shows every date.

• defaultClosePeriod
  DateRange | null

  The close date filter while uncontrolled; defaults to null.

• onClosePeriodChange
  (period: DateRange | null) => void

  Called when the header's date range is picked or cleared.

• largeDealAmountdefault 10000
  number

  The threshold of the Over $10,000 chip, in the page currency.

• heightdefault "auto"
  "auto" | "fill" | "screen"

  fill takes what is left of a shell with layout="fill" and scrolls the board inside; screen is a standalone h-dvh page; auto grows with the longest column. Phones scroll the page around a tall board.

• showSummarydefault true
  boolean

  The board's summary tiles (open pipeline, weighted forecast, won this month, win rate, average deal).

• defaultShowCloseddefault true
  boolean

  Whether the Won and Lost columns start visible (the board's Show closed switch).

• staleAfterDaysdefault 14
  number

  Days in a stage before a card shows the stale hint, and the No activity chip's threshold; 0 turns both off.

• requireLostReasondefault true
  boolean

  A move to Pierdut (drag, menu, sheet) asks for a reason and blocks until one is chosen.

• defaultOpenDealdefault ""
  string

  A deal id whose sheet opens on mount.

• onDealMove
  (move: DealMove) => (boolean | void | Promise<unknown>)

  A drop, a menu move or a sheet move. false refuses it, a promise keeps the card saving and a rejection springs it back with a toast. Without it a 600 ms request is simulated.

• onDealSave
  (deal: CrmDeal) => (void | Promise<unknown>)

  The sheet's saves (title, value, close date, owner, a note), optimistic; a rejection rolls back with a toast. Simulated by default.

• onDealCreate
  (deal: CrmDeal) => (void | CrmDeal | Promise<void | CrmDeal>)

  A deal from the dialog or a column's quick add; resolve with the stored deal to replace the draft. A rejection shows the error in the dialog. Simulated by default.

• onDealDelete
  (deal: CrmDeal) => (void | Promise<unknown>)

  Deleting from a card or the sheet, after a confirm; an undo toast follows, a rejection restores it. Simulated by default.

• labels
  Partial<CrmPipelinePageLabels>

  Every visible string (English by default, DEFAULT_CRM_PIPELINE_PAGE_LABELS); CRM_PIPELINE_PAGE_LABELS_RO is the ready Romanian set. Nested keys (pipeline, dateRange, datePicker, datePresets, currencyInput, inlineEdit, select, contactCard, timeline, validation) translate the composed items.

• localedefault "en-US"
  string

  Intl locale for money, numbers and dates.

• currencydefault "USD"
  string

  The pipeline currency; deals in another currency are counted apart, never converted.

• now
  Date | number

  The reference time for stale hints, overdue dates and new stamps; defaults to the live clock.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The accent of the primary actions, the pressed chips, the probability bars and the win rate ring.

• radiusdefault "md"
  "sm" | "md" | "lg"

  The summary tiles, the empty state, the sheet and the dialogs (12px, 16px or 24px tiles).

• loadingdefault false
  boolean

  The header, the summary and the columns as skeletons.

• animateIndefault true
  boolean

  The header and the board rise in once on mount; off in thumbnails and under reduced motion.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for the company and deal links; defaults to the LinkProvider's (a plain anchor).

• className
  string

  Merged onto the root.

• classNames
  Partial<Record<CrmPipelinePageSlot, string>>

  Classes for the parts: header, filters, board, sheet, newDialog, empty.

Parts

FAQ

More React blocks