Patterns

Kanban board

Drag cards between stages, or focus one and press ← / →. Fixed-width columns that scroll; a summary per column.

A Wavi Pro component

The live example is open to everyone. The source comes with a Wavi Pro licence: add it with one command, or copy it below.

৳3,70,000

Banani Tower

FA Farhana Akter৳60,000

Jamuna Future Park

SI Sadia Islam৳3,10,000

৳2,40,000

Bashundhara City

NJ Nusrat Jahan৳2,40,000

৳1,20,000

Square Hospital

RI Rafiq Islam৳1,20,000

৳90,000

Unimart Gulshan

TH Tanvir Hasan৳90,000

Import#

The package for everything else, and the Pro component from where `add` puts it:

your-component.tsx

import { Avatar } from "@waveinno/ui";
import { KanbanBoard, type KanbanColumn } from "@/components/wavi-pro/kanban";

Read from the source of this version, so they match the code exactly.

pro/kanban.tsx

Prop	Type	Default
`columns`required	`KanbanColumn[]`	—
`items`required	`T[]`	—
`getId`required	`(item: T) => string`	—
`getColumn`required	`(item: T) => string`	—
`onMove`required	`(id: string, toColumn: string) => void`	—
`renderCard`required	`(item: T) => React.ReactNode`	—
`renderColumnSummary`	`(column: KanbanColumn, items: T[]) => React.ReactNode`	—
`className`	`string`	—

src/components/ui/avatar.tsx

Prop	Type	Default
`name`required	`string`	—
`src`	`string \| null`	—
`size`	`keyof typeof sizes`	`"md"`
`status`	`keyof typeof STATUS`	—
`verified`	`boolean`	—
`ring`	`"gradient"`	—
`shape`	`"circle" \| "square"`	`"circle"`
`className`	`string`	—

With your licence key, this writes the component to components/wavi-pro/ and installs anything it needs:

$ npx @waveinno/ui add kanban --key <your licence key>

Or copy the file yourself. It imports only from @waveinno/ui, lucide-react and React (and Radix where noted).

The source comes with Wavi Pro

One payment for every Pro component, block and template, with every update.

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui