FreeApplication UI

Kanban Task Board

Use this component for project management apps, build dashboards, internal tools, and product workflow previews.

ReactTailwind CSSMotionKanban

Backlog

Scope auth

Building

Pricing UI

Shipped

Contact form

Overview

A compact kanban board preview with three columns and animated task cards.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<KanbanTaskBoard />

Kanban Task Board.tsx

tsx

"use client";

import { motion } from "framer-motion";

const columns = [["Backlog", "Scope auth"], ["Building", "Pricing UI"], ["Shipped", "Contact form"]];

export function KanbanTaskBoard() {
  return (
    <div className="grid gap-3 md:grid-cols-3">
      {columns.map(([title, task]) => (
        <div key={title} className="rounded-xl border border-white/10 bg-zinc-950 p-3 text-white">
          <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-zinc-400">{title}</p>
          <motion.div whileHover={{ rotate: -1, scale: 1.02 }} className="rounded-lg bg-white/[0.06] p-3 text-sm">
            {task}
          </motion.div>
        </div>
      ))}
    </div>
  );
}