Kanban Board

Renders a kanban board with draggable columns and cards. It allows moving cards between columns and displays tags, assignees, and icons. Use it for task management or project organization.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/kanban-board

npx layro-cli add @nolly-studio/kanban-board

npx layro-cli add @nolly-studio/kanban-board

bunx layro-cli add @nolly-studio/kanban-board

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useCallback, useRef, useState } from "react"
import Image from "next/image"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════ */

const TAG_VARIANTS = {
  feature: { bg: "rgba(59,130,246,0.10)", color: "#2563eb" },
  bug: { bg: "rgba(239,68,68,0.10)", color: "#dc2626" },
  design: { bg: "rgba(168,85,247,0.10)", color: "#9333ea" },

Free, with GitHub, Google or email. The install command above works without an account.

Versions

1.0.0 · current
Nov 4, 2026
First release.

Similar components

View all

Sortable List