Kanban

Drag-and-drop board with columns and cards for project management workflows.

Basic Kanban Board

Preview

To Do

Design homepage mockup

Create wireframes for the new landing page

Set up CI/CD pipeline

Write API documentation

In Progress

Implement auth module

OAuth2 + JWT token flow

2d left

Database schema review

Done

Project setup

<div class="kanban">
  <div class="kanban-column">
    <div class="kanban-column-header">
      <div class="kanban-column-header-start">
        <div class="kanban-column-color" style="background-color: var(--color-base-content/30);"></div>
        <h3 class="kanban-column-title">To Do</h3>
        <span class="kanban-column-count">3</span>
      </div>
    </div>
    <div class="kanban-column-body">
      <div class="kanban-card">
        <h4 class="kanban-card-title">Design homepage mockup</h4>
        <p class="kanban-card-body">Create wireframes for the new landing page</p>
      </div>
      <div class="kanban-card">
        <h4 class="kanban-card-title">Set up CI/CD pipeline</h4>
      </div>
      <div class="kanban-card">
        <h4 class="kanban-card-title">Write API documentation</h4>
      </div>
    </div>
    <div class="kanban-column-footer">
      <button class="kanban-add-btn">+ Add card</button>
    </div>
  </div>

  <div class="kanban-column">
    <div class="kanban-column-header">
      <div class="kanban-column-header-start">
        <div class="kanban-column-color" style="background-color: var(--color-primary);"></div>
        <h3 class="kanban-column-title">In Progress</h3>
        <span class="kanban-column-count">2</span>
      </div>
    </div>
    <div class="kanban-column-body">
      <div class="kanban-card kanban-card-color kanban-card-color-primary">
        <h4 class="kanban-card-title">Implement auth module</h4>
        <p class="kanban-card-body">OAuth2 + JWT token flow</p>
        <div class="kanban-card-footer">
          <div class="kanban-card-meta">
            <span class="kanban-card-meta-item">2d left</span>
          </div>
          <div class="kanban-card-assignees">
            <div class="kanban-card-assignee" style="background: var(--color-primary);"></div>
          </div>
        </div>
      </div>
      <div class="kanban-card">
        <h4 class="kanban-card-title">Database schema review</h4>
      </div>
    </div>
  </div>

  <div class="kanban-column">
    <div class="kanban-column-header">
      <div class="kanban-column-header-start">
        <div class="kanban-column-color" style="background-color: var(--color-success);"></div>
        <h3 class="kanban-column-title">Done</h3>
        <span class="kanban-column-count">1</span>
      </div>
    </div>
    <div class="kanban-column-body">
      <div class="kanban-card kanban-card-completed">
        <h4 class="kanban-card-title">Project setup</h4>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex gap-4 overflow-x-auto p-4" style="min-height: 400px;">
  <div class="flex flex-col shrink-0 bg-base-200 rounded-2xl" style="width: 300px;">
    <div class="flex items-center justify-between px-4 py-3 border-b border-base-300">
      <div class="flex items-center gap-2">
        <div class="w-1 h-6 rounded-sm bg-base-content/30"></div>
        <h3 class="text-sm font-semibold">To Do</h3>
        <span class="inline-flex items-center justify-center min-w-6 h-6 px-1.5 bg-base-100 rounded-full text-xs font-semibold text-base-content/60">3</span>
      </div>
    </div>
    <div class="flex-1 flex flex-col gap-2 p-2 overflow-y-auto">
      <div class="p-3 bg-base-100 border border-base-300 rounded-lg cursor-grab hover:shadow-md hover:border-primary transition-all">
        <h4 class="text-sm font-medium">Design homepage mockup</h4>
        <p class="text-xs text-base-content/60 mt-1">Create wireframes for the new landing page</p>
      </div>
      <div class="p-3 bg-base-100 border border-base-300 rounded-lg cursor-grab hover:shadow-md hover:border-primary transition-all">
        <h4 class="text-sm font-medium">Set up CI/CD pipeline</h4>
      </div>
      <div class="p-3 bg-base-100 border border-base-300 rounded-lg cursor-grab hover:shadow-md hover:border-primary transition-all">
        <h4 class="text-sm font-medium">Write API documentation</h4>
      </div>
    </div>
    <div class="p-2 border-t border-base-300">
      <button class="flex items-center justify-center gap-1 w-full p-2 text-sm border border-dashed border-base-300 rounded-lg text-base-content/60 hover:bg-base-100 hover:border-primary hover:text-primary cursor-pointer transition-all">+ Add card</button>
    </div>
  </div>

  <div class="flex flex-col shrink-0 bg-base-200 rounded-2xl" style="width: 300px;">
    <div class="flex items-center justify-between px-4 py-3 border-b border-base-300">
      <div class="flex items-center gap-2">
        <div class="w-1 h-6 rounded-sm bg-primary"></div>
        <h3 class="text-sm font-semibold">In Progress</h3>
        <span class="inline-flex items-center justify-center min-w-6 h-6 px-1.5 bg-base-100 rounded-full text-xs font-semibold text-base-content/60">2</span>
      </div>
    </div>
    <div class="flex-1 flex flex-col gap-2 p-2 overflow-y-auto">
      <div class="p-3 bg-base-100 border border-base-300 border-l-4 border-l-primary rounded-lg cursor-grab hover:shadow-md transition-all">
        <h4 class="text-sm font-medium">Implement auth module</h4>
        <p class="text-xs text-base-content/60 mt-1">OAuth2 + JWT token flow</p>
        <div class="flex items-center justify-between pt-2 mt-2 border-t border-base-300">
          <span class="text-xs text-base-content/40">2d left</span>
          <div class="w-6 h-6 rounded-full bg-primary"></div>
        </div>
      </div>
      <div class="p-3 bg-base-100 border border-base-300 rounded-lg cursor-grab hover:shadow-md transition-all">
        <h4 class="text-sm font-medium">Database schema review</h4>
      </div>
    </div>
  </div>

  <div class="flex flex-col shrink-0 bg-base-200 rounded-2xl" style="width: 300px;">
    <div class="flex items-center justify-between px-4 py-3 border-b border-base-300">
      <div class="flex items-center gap-2">
        <div class="w-1 h-6 rounded-sm bg-success"></div>
        <h3 class="text-sm font-semibold">Done</h3>
        <span class="inline-flex items-center justify-center min-w-6 h-6 px-1.5 bg-base-100 rounded-full text-xs font-semibold text-base-content/60">1</span>
      </div>
    </div>
    <div class="flex-1 flex flex-col gap-2 p-2 overflow-y-auto">
      <div class="p-3 bg-base-100 border border-base-300 rounded-lg opacity-60">
        <h4 class="text-sm font-medium line-through">Project setup</h4>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Drag-and-drop requires JS (e.g., HTML5 drag API or SortableJS)
// CSS handles visual states: .kanban-card-dragging, .kanban-drop-zone-active
const cards = document.querySelectorAll('.kanban-card');
cards.forEach(card => &#123;
  card.draggable = true;
  card.addEventListener('dragstart', () => card.classList.add('kanban-card-dragging'));
  card.addEventListener('dragend', () => card.classList.remove('kanban-card-dragging'));
&#125;);

Card with Labels & Assignees

Redesign checkout flow

#142

Feature High Priority

Simplify the 5-step checkout into a single page experience

3 tasks 2 comments

<div style="max-width: 320px;">
  <div class="kanban-card kanban-card-color kanban-card-color-warning">
    <div class="kanban-card-header">
      <h4 class="kanban-card-title">Redesign checkout flow</h4>
      <span class="kanban-card-id">#142</span>
    </div>
    <div class="kanban-card-labels">
      <span class="kanban-card-label kanban-card-label-primary">Feature</span>
      <span class="kanban-card-label kanban-card-label-warning">High Priority</span>
    </div>
    <p class="kanban-card-body">Simplify the 5-step checkout into a single page experience</p>
    <div class="kanban-card-footer">
      <div class="kanban-card-meta">
        <span class="kanban-card-meta-item">3 tasks</span>
        <span class="kanban-card-meta-item">2 comments</span>
      </div>
      <div class="kanban-card-assignees">
        <div class="kanban-card-assignee" style="background: var(--color-primary);"></div>
        <div class="kanban-card-assignee" style="background: var(--color-secondary);"></div>
        <div class="kanban-card-assignee-more">+3</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="max-width: 320px;">
  <div class="p-3 bg-base-100 border border-base-300 border-l-4 border-l-warning rounded-lg">
    <div class="flex items-start justify-between gap-2 mb-2">
      <h4 class="text-sm font-medium">Redesign checkout flow</h4>
      <span class="text-xs font-mono text-base-content/40">#142</span>
    </div>
    <div class="flex flex-wrap gap-1 mb-2">
      <span class="inline-block text-xs font-medium px-2 py-0.5 rounded bg-primary/15 text-primary">Feature</span>
      <span class="inline-block text-xs font-medium px-2 py-0.5 rounded bg-warning/15 text-warning">High Priority</span>
    </div>
    <p class="text-xs text-base-content/60 mb-2">Simplify the 5-step checkout into a single page experience</p>
    <div class="flex items-center justify-between pt-2 border-t border-base-300">
      <div class="flex items-center gap-3">
        <span class="text-xs text-base-content/40">3 tasks</span>
        <span class="text-xs text-base-content/40">2 comments</span>
      </div>
      <div class="flex items-center">
        <div class="w-6 h-6 rounded-full bg-primary border-2 border-base-100"></div>
        <div class="w-6 h-6 rounded-full bg-secondary border-2 border-base-100 -ml-2"></div>
        <div class="flex items-center justify-center w-6 h-6 rounded-full bg-base-200 text-base-content/60 border-2 border-base-100 -ml-2 text-[10px] font-semibold">+3</div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for card layout - pure CSS component

Priority Indicators

Critical bug fix

!!!

Update dependencies

Refactor utils

<div style="display: flex; gap: 1rem; flex-wrap: wrap; max-width: 700px;">
  <div class="kanban-card kanban-card-color kanban-card-color-error" style="flex: 1; min-width: 200px;">
    <div class="kanban-card-header">
      <h4 class="kanban-card-title">Critical bug fix</h4>
      <div class="kanban-card-priority kanban-card-priority-high">!!!</div>
    </div>
  </div>
  <div class="kanban-card kanban-card-color kanban-card-color-warning" style="flex: 1; min-width: 200px;">
    <div class="kanban-card-header">
      <h4 class="kanban-card-title">Update dependencies</h4>
      <div class="kanban-card-priority kanban-card-priority-medium">!!</div>
    </div>
  </div>
  <div class="kanban-card kanban-card-color kanban-card-color-success" style="flex: 1; min-width: 200px;">
    <div class="kanban-card-header">
      <h4 class="kanban-card-title">Refactor utils</h4>
      <div class="kanban-card-priority kanban-card-priority-low">!</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="display: flex; gap: 1rem; flex-wrap: wrap; max-width: 700px;">
  <div class="p-3 bg-base-100 border border-base-300 border-l-4 border-l-error rounded-lg flex-1 min-w-50">
    <div class="flex items-start justify-between gap-2">
      <h4 class="text-sm font-medium">Critical bug fix</h4>
      <span class="text-error text-xs font-bold">!!!</span>
    </div>
  </div>
  <div class="p-3 bg-base-100 border border-base-300 border-l-4 border-l-warning rounded-lg flex-1 min-w-50">
    <div class="flex items-start justify-between gap-2">
      <h4 class="text-sm font-medium">Update dependencies</h4>
      <span class="text-warning text-xs font-bold">!!</span>
    </div>
  </div>
  <div class="p-3 bg-base-100 border border-base-300 border-l-4 border-l-success rounded-lg flex-1 min-w-50">
    <div class="flex items-start justify-between gap-2">
      <h4 class="text-sm font-medium">Refactor utils</h4>
      <span class="text-success text-xs font-bold">!</span>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for priority display

Reference

Class	Description
.kanban	Board container (horizontal scroll)
.kanban-compact	Reduced spacing variant
.kanban-swimlanes	Vertical swimlane layout
.kanban-column	Column container (300px)
.kanban-column-collapsed	Collapsed column (48px)
.kanban-column-dragover	Column drag-over highlight
.kanban-column-header	Column header with title and count
.kanban-column-body	Cards container (scrollable)
.kanban-column-footer	Column footer (add button)
.kanban-add-btn	Dashed add-card button
.kanban-card	Draggable task card
.kanban-card-dragging	Card being dragged
.kanban-card-ghost	Ghost card placeholder
.kanban-card-color-*	Left border color (primary, success, warning, error, info)
.kanban-card-completed	Completed card (strikethrough)
.kanban-card-label-*	Card label colors (primary, success, warning, error)
.kanban-card-priority-*	Priority indicator (high, medium, low)
.kanban-drop-zone	Drop zone between cards
.kanban-swimlane	Horizontal swimlane row
.kanban.glass	Glassmorphism variant