WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Tables & Lists

Deal Pipeline

Tables & ListsDeal Pipeline
Data TableEditable Grid
Live props
Behavior
requireLostReason
persistKey
staleAfterDays14 days
State
defaultView
defaultShowClosed
readOnly
loading
Layout
showSummary
columnWidth288px
Content
showWeighted
compactAmounts
currency
locale
Appearance
cardVariant
size
tone
Code
import { DealPipeline } from "@/components/ui/deal-pipeline"

<DealPipeline />
Pro

v1.0.0·Added in 1.0.0

The sales pipeline: stages with weighted totals, a forecast summary, drag between stages with a lost reason, and a list view.

The summary on top reads the open pipeline, the weighted forecast, what was won this month and the win rate (a small ring); on a phone it is a 2 x 2 grid that folds to one line ("Pipeline $224,850 · weighted $118,065") with a tap on its chevron. Each stage is a column: its header shows the count and the probability, the line under it the total and the weighted total, and won and lost columns are tinted green and red. Drag a deal with the mouse (after 8px) or a long press on touch (250ms, with a haptic tick) to another stage: while it is lifted its probability bar already grows or shrinks to the stage under it, and on the drop the header totals fade to their new values. Drop it on Lost and a dialog (a bottom sheet on phones) asks why: arrows pick a reason, Enter confirms, the last reason opens a text field (Cmd / Ctrl + Enter confirms from it), Escape or Cancel sends the card back. A deal dropped on Won pops and shows a green check for a moment. While a move saves, the card shows a spinner; if the save fails, the card springs back and the reason is announced. With the keyboard every card is a Tab stop: Space lifts it, arrows move it (Left / Right change stage), Space drops, Escape cancels, Enter opens it, and Shift + F10 or the Menu key opens its ⋯ menu (Move to, Mark as won, Mark as lost and your own actions). The toolbar switches between Board and List (arrows move inside it), filters by owner with avatar chips that toggle (they scroll sideways on a phone) and hides the closed stages with a switch. The list view is a table grouped by stage, with a band per stage and the deal's value, probability, owner, close date and days in stage; rows open on click or Enter, and on a phone every row is a card. Deals past their close date turn red with a crossed calendar, and deals stuck longer than staleAfterDays in a stage get an amber "18 days in stage" chip. On a phone the board shows one stage at a time with the next one peeking and a chip row to jump between stages. Reduced motion drops the pop, the tilt and the growing bars and keeps short fades.

Add to a project

npx wingo-ui@latest add deal-pipeline

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionlucide-reactavatarbadgebuttondialogdropdown-menuempty-statekanbanprogressradio-groupsegmented-controlskeletonswitchtabletextareatooltipuse-controllable-stateuse-localeuse-persisted-statecommercedate-utilsmotionnumber-formatrelative-timetonesui-config

Files

  • components/ui/deal-pipeline.tsx

See also

KanbanStat CardFunnel chart
PreviousData TableNext Editable Grid

B2B sales

Drag a deal to Lost to see the reason dialog

Open pipeline
$224,850
Weighted forecast
$118,065
Won this month
$11,600
Win rate
67%, 2 of 3 closed deals won

Qualified, 3 deals

310% probability10%

$56.4K·weighted $5.6K

  • Client portal

    GRGreen House Realty
    $42,00010%
    Demo with the agents, Sep 29
    Noah HayesCloses 11/20/2026Nov 20
  • Online bookings

    BBistro 21
    $2,40010%
    Mia TurnerCloses 10/30/2026Oct 30
  • License expansion

    TITech Solutions Inc.
    $12,00010%
    Upsell
    Emma CarterCloses 11/15/2026Nov 15

Needs analysis, 2 deals

225% probability25%

$17.1K·weighted $4.3K

  • Billing module

    GPGreenleaf Pharmacy
    $7,20025%
    18 days in stage
    Call Dan Cole about the budget
    Noah HayesCloses 10/10/2026Oct 10
  • Onboarding

    OBOld Mill Bakery
    $9,90025%
    Noah HayesCloses 10/20/2026Oct 20

Proposal sent, 2 deals

250% probability50%

$21.5K·weighted $10.7K

  • CRM licenses, 25 users

    TITech Solutions Inc.
    $18,00050%
    Recurring
    Quote review with Daniel, Sep 26
    Emma CarterHigh priorityCloses 09/30/2026Sep 30
  • Marketing automation

    PSPixel Studio
    $3,45050%
    Mia TurnerOverdue since 09/22/2026Sep 22

Negotiation, 2 deals

275% probability75%

$129.9K·weighted $97.4K

  • ERP integration

    CGConstruct Group
    $103,40075%
    VIP
    The contract is with legal
    Liam WalkerUrgentCloses 10/15/2026Oct 15
  • Data migration

    SLSummit Logistics
    $26,50075%
    Liam WalkerCloses 10/05/2026Oct 5

Won, 2 deals

2

$11.6K

  • Annual plan

    DCDental Art Clinic
    $5,600100%
    Emma CarterCloses 09/15/2026Sep 15
  • CRM licenses, 5 users

    NSNorthwind Studio
    $6,000100%
    Ryan BrooksCloses 09/05/2026Sep 5

Lost, 1 deal

1

$4.8K

  • Extended support

    WBWestside Books
    $4,800
    Not enough budget
    Olivia BennettCloses 09/10/2026Sep 10

lost reason required · persistKey off