KanbanBoard

kanbanboard-1779394025518.tsx

'use client'
import { useState } from 'react'

const INIT = {
  todo: [{ id:1, title:'Design system audit', priority:'high' }, { id:2, title:'Write docs', priority:'low' }],
  doing: [{ id:3, title:'Build dashboard', priority:'medium' }],
  done: [{ id:4, title:'Setup CI/CD', priority:'high' }],
}
const COLORS = { high:'#ef4444', medium:'#f59e0b', low:'#10b981' }
const COL_LABELS = { todo:'To Do', doing:'In Progress', done:'Done' }
const COL_COLORS = { todo:'#f8fafc', doing:'#f0f4ff', done:'#f0fdf4' }

export default function KanbanBoard() {
  const [cols, setCols] = useState(INIT)
  return (
    <div style={{ display:'flex', gap:'16px', overflowX:'auto', padding:'4px' }}>
      {Object.entries(cols).map(([col, tasks]) => (
        <div key={col} style={{ minWidth:'220px', background:COL_COLORS[col], borderRadius:'14px', padding:'14px' }}>
          <div style={{ display:'flex', justifyContent:'space-between', marginBottom:'12px' }}>
            <span style={{ fontWeight:700, fontSize:'13px', color:'#374151', textTransform:'uppercase', letterSpacing:'0.05em' }}>{COL_LABELS[col]}</span>
            <span style={{ background:'#e2e8f0', color:'#64748b', borderRadius:'9999px', padding:'2px 8px', fontSize:'12px', fontWeight:600 }}>{tasks.length}</span>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:'8px' }}>
            {tasks.map(task => (
              <div key={task.id} style={{
                background:'#fff', borderRadius:'10px', padding:'12px',
                boxShadow:'0 1px 6px rgba(0,0,0,0.07)',
                borderLeft:'3px solid ' + COLORS[task.priority],
              }}>
                <div style={{ fontSize:'13px', fontWeight:600, color:'#1e293b', marginBottom:'6px' }}>{task.title}</div>
                <span style={{ fontSize:'11px', fontWeight:700, color:COLORS[task.priority], textTransform:'capitalize' }}>{task.priority}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryDashboard & App UI

Frameworkreact

TierFREE

Copies0

About

Drag-inspired Kanban board with columns and task cards

More from Dashboard & App UI

import React from 'react';

interface MetricCardProps {
  value: number;
  trend: 'up' | 'down';
  sparklineData: number[];
}

const MetricCard: React.FC<MetricCardProps> = ({ value, trend, sparklineData }) => {
  return (
    <div style={{ backgroun

MetricCard

Dashboard & App UI

import React from 'react';
import './ProgressRing.css';
interface ProgressRingProps {
  percentage: number;
}
const ProgressRing: React.FC<ProgressRingProps> = ({ percentage }) => {
  const circleDashArray = 2 * Math.PI * 50;
  const circleDashOffset

ProgressRing

Dashboard & App UI

'use client';

import React from 'react';

interface KPIWidgetProps {
  metric: number;
  label: string;
  target: number;
  progress: number;
  sparklineData: number[];
  periodComparison: string;
}

const KPIWidget: React.FC<KPIWidgetProps> = ({

KPIWidget

Dashboard & App UI

'use client'
import { useState, useEffect, useRef } from 'react'

const METRICS = [
  { label: 'Monthly Revenue', value: 48320, prev: 41200, prefix: '$', suffix: '', color: '#C9A84C', data: [22,28,24,32,28,38,35,42,40,48] },
  { label: 'Active Users'

KPICards

Dashboard & App UI