81 Pro components and page blocks

Get Pro
uibrik

Deal Pipeline

Pro

Preview

Customize

USD
Column width272px

Installation

Pro

Deal Pipeline is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/deal-pipeline

Usage

import { DealPipeline } from "@/components/uibrik/deal-pipeline/deal-pipeline";​const stages = [  { id: "lead", label: "Lead", probability: 0.1, color: "#a1a1aa" },  { id: "qualified", label: "Qualified", probability: 0.25, color: "#38bdf8" },  // …3 more];​<DealPipeline  currency="USD"  summary  filters  columnWidth={272}  stages={stages}  currentUser="You"  onChange={(deals) => {}}  // deals={[…]}/>

Props

DealPipeline
currency
Type "USD" | "EUR" | "GBP" | "INR" | "JPY"
"USD"
Currency for every value.
summary
Type boolean
true
Pipeline, forecast, won and open-deal figures above the board.
filters
Type boolean
true
Search and the owner filter above the board.
columnWidth
Type number
272
Width of a stage column.
deals
Type Deal[]
SAMPLE_DEALS
{ id, name, company, value, stage, owner, closeIn, source?, color?, contacts?, activity?, files? }. Deals on mount; the board keeps its own state from then on.
stages
Type { id: string; label: string; probability: number; color: string }[]
DEFAULT_STAGES
Columns, left to right. `probability` (0 to 1) weights the forecast; 1 counts as won.
currentUser
Type string
"You"
Name on notes and stage changes made from the record.
onChange
Type (deals: Deal[]) => void
–
Called with every deal after a stage change or a new note.
className
Type string
–
Classes for the wrapper. It fills its parent's height.