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

Kanban

Tables & ListsKanban
Editable GridList
Live props
Behavior
limitBehavior
Appearance
showCounts
showTotals
size
variant
cardVariant
Layout
columnWidth288px
mobileNav
Content
currency
locale
State
readOnly
loading
Code
import { Kanban } from "@/components/ui/kanban"

<Kanban />
Pro

v1.0.0·Added in 1.0.0

A board of columns and cards for pipelines, orders and tasks: drag with mouse, touch or keyboard, WIP limits, inline add and a phone layout.

Drag a card with the mouse (it lifts after 8px, tilts 2 degrees and casts a floating shadow) to reorder it in its column or drop it in another; the cards below slide apart, a dashed outline marks where it lands, the column under it gets a ring and columns that refuse it dim. Near the board's edges the board scrolls sideways and a long column scrolls on its own. Every card is a Tab stop: Space picks it up, Up / Down move it in its column, Left / Right jump to the nearest spot in the neighbouring column, Space or Enter drops, Escape puts it back; Enter on a resting card opens it, and a screen reader hears where it is ("Tech Solutions moved to Negociere, position 2 of 4"). The ⋯ button on a card (shown on hover or focus, always on touch; Shift + F10 or the Menu key opens it too) has Move to, a submenu of columns, as the way to move without dragging. Column counts read 3 or 3 / 5 with a WIP limit: at the limit the count turns amber, over it red with a one-time pulse and a line of text; limitBehavior="block" refuses drops into a full column instead. + Add card opens a composer: Enter adds (and keeps it open for the next card), Shift + Enter makes a new line, Escape cancels. On a phone the board shows one column at a time with the next one peeking and snaps between them; the chip row on top jumps to a column and lights the one in view; a long press (250ms, with a haptic tick) lifts a card so swipes still scroll, and Move to opens as a bottom sheet. Reduced motion drops the tilt, the pulse and the sliding.

Add to a project

npx wingo-ui@latest add kanban

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

Dependencies

@dnd-kit/core@dnd-kit/sortable@dnd-kit/utilitieslucide-reactmotionavatarbadgebuttondate-utilsdropdown-menuempty-statemotionnumber-formatrelative-timeskeletontagtextareatonesui-configuse-controllable-stateuse-locale

Files

  • components/ui/kanban.tsx

See also

ListTagAvatarDropdown MenuEmpty State
PreviousEditable GridNext List

Sales pipeline

limits warn

Drag a deal, or use ⋯ → Move to

New lead, 3 cards

3$9,380
  • Bistro 21

    Digital menu and point of sale

    New
    Due Sep 30Sep 30Medium priority$1,700
  • Greenleaf Realty

    CRM for 12 real estate agents

    New
    Due Sep 29Sep 29High priority$7,200
  • Emma Carter Consulting

    Bookkeeping subscription

    Due Oct 2Oct 2Low priority$480

Qualified, 3 cards

3$4,240
  • Studio Pixel

    Licenses for the design team

    Recurring
    Due Sep 27Sep 27Medium priority$1,380
  • Bright Smile Dental

    Online booking and SMS reminders

    Due Oct 5Oct 5Medium priority$2,240
  • Old Mill Bakery

    Win back an inactive account

    Due Sep 22Sep 22Low priority$620

Proposal sent, 4 cards, limit 5

4 / 5$78,670
  • Northwind Logistics

    A fleet of 40 licenses

    #Q-2026-118

    VIPRecurring
    Due Sep 26Sep 26Urgent$48,920
  • Acme Corp

    Upgrade to the Business plan

    Recurring
    Due Sep 25Sep 25High priority$12,480
  • North Workshop

    Accounting integration

    Due Oct 1Oct 1Medium priority$9,870
  • West Side Books

    Inventory and point of sale

    Due Sep 23Sep 23Medium priority$7,400

Negotiation, 2 cards

2$126,000
  • Summit Builders

    2027 master agreement

    VIP
    Due Sep 30Sep 30Urgent$103,400
  • Greenleaf Pharmacy

    A chain of 4 pharmacies

    Due Sep 24Sep 24High priority$22,600

Won, 2 cards

2$19,500
  • Northwind Logistics

    Premium support, 12 months

    Recurring
    $15,000
  • Studio Pixel

    Company website

    $4,500