PHPackages                             mrshanebarron/kanban - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. mrshanebarron/kanban

ActiveLibrary[Admin Panels](/categories/admin)

mrshanebarron/kanban
====================

Kanban board component for Laravel - supports Livewire and Vue

v1.0.4(4mo ago)021MITBladePHP ^8.1

Since Dec 14Pushed 4mo agoCompare

[ Source](https://github.com/mrshanebarron/kanban)[ Packagist](https://packagist.org/packages/mrshanebarron/kanban)[ RSS](/packages/mrshanebarron-kanban/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (1)Versions (6)Used By (0)

Kanban
======

[](#kanban)

A kanban board component for Laravel applications. Drag and drop cards between columns for project management. Works with Livewire and Vue 3.

Installation
------------

[](#installation)

```
composer require mrshanebarron/kanban
```

Livewire Usage
--------------

[](#livewire-usage)

### Basic Usage

[](#basic-usage)

```

```

### Livewire Props

[](#livewire-props)

PropTypeDefaultDescription`columns`array`[]`Column definitions`items`array`[]`Card items with columnIdVue 3 Usage
-----------

[](#vue-3-usage)

### Setup

[](#setup)

```
import { SbKanban } from './vendor/sb-kanban';
app.component('SbKanban', SbKanban);
```

### Basic Usage

[](#basic-usage-1)

```

import { ref } from 'vue';

const columns = [
  { id: 'backlog', title: 'Backlog' },
  { id: 'todo', title: 'To Do' },
  { id: 'in-progress', title: 'In Progress' },
  { id: 'done', title: 'Done' }
];

const tasks = ref([
  { id: '1', title: 'Design homepage', columnId: 'todo' },
  { id: '2', title: 'Setup database', columnId: 'in-progress' },
  { id: '3', title: 'Create API endpoints', columnId: 'backlog' },
  { id: '4', title: 'Write tests', columnId: 'backlog' }
]);

const handleMove = ({ item, fromColumn, toColumn }) => {
  console.log(`Moved "${item.title}" from ${fromColumn} to ${toColumn}`);
};

```

### Custom Card Template

[](#custom-card-template)

```

        {{ item.title }}
        {{ item.description }}

            {{ item.priority }}

```

### Project Management Example

[](#project-management-example)

```

    Sprint Board

            #{{ item.ticketId }}
            {{ item.priority }}

          {{ item.title }}

            Est: {{ item.estimate }}h

```

### Vue Props

[](#vue-props)

PropTypeDefaultDescription`columns`Array`[]`Column definitions`items`Array`[]`Items with columnId property### Events

[](#events)

EventPayloadDescription`update:items``items[]`Items array changed`move``{ item, fromColumn, toColumn }`Card moved### Slots

[](#slots)

SlotPropsDescription`item``{ item }`Custom card templateColumn Object
-------------

[](#column-object)

```
{
  id: 'column-id',  // Unique identifier
  title: 'Column Name'  // Display title
}
```

Item Object
-----------

[](#item-object)

```
{
  id: 'item-id',        // Unique identifier
  title: 'Task Title',  // Required
  description: 'Details',  // Optional
  columnId: 'todo'      // Which column it belongs to
}
```

Features
--------

[](#features)

- **Drag and Drop**: Native HTML5 drag/drop
- **Column Counts**: Shows item count per column
- **Visual Feedback**: Opacity change while dragging
- **Custom Cards**: Slot for custom card content
- **Horizontal Scroll**: Overflow handling for many columns

Styling
-------

[](#styling)

Uses Tailwind CSS:

- Gray column backgrounds
- White card backgrounds
- Shadow on cards
- Hover shadow enhancement
- Badge for column counts

Requirements
------------

[](#requirements)

- PHP 8.1+
- Laravel 10, 11, or 12
- Tailwind CSS 3.x

License
-------

[](#license)

MIT License

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance75

Regular maintenance activity

Popularity6

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

5

Last Release

145d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7a38dc9b4ccc180ee3e9df8879f8747ea9dbf36812c6546827fe504fa8993eb8?d=identicon)[mrshanebarron](/maintainers/mrshanebarron)

### Embed Badge

![Health badge](/badges/mrshanebarron-kanban/health.svg)

```
[![Health](https://phpackages.com/badges/mrshanebarron-kanban/health.svg)](https://phpackages.com/packages/mrshanebarron-kanban)
```

###  Alternatives

[slowlyo/owl-admin

基于 laravel、amis 开发的后台框架~

61214.2k26](/packages/slowlyo-owl-admin)[takielias/tablar

Tablar: A Laravel Dashboard Preset Featuring Dark Mode and Dynamic Menu Generation for Effortless Navigation and Fast Development.

30817.7k3](/packages/takielias-tablar)[sebastienheyd/boilerplate

Laravel Boilerplate based on AdminLTE 3 with blade components, user management, roles, permissions, logs viewer, ...

28618.2k3](/packages/sebastienheyd-boilerplate)[takielias/tablar-kit

The Elegance of Tablar Dashboard

413.4k](/packages/takielias-tablar-kit)[adminui/inertia-routes

A hybrid JS/PHP package adding Ziggy-routes functionality to your Laravel/Inertia/Vue3 application

183.2k](/packages/adminui-inertia-routes)[a2insights/filament-saas

Filament Saas for A2Insights

161.1k](/packages/a2insights-filament-saas)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)