Project Board Box
Editor.tsx - IDEKIT
Explorer
›components
VibeEditor.tsx
Sidebar.tsx
›app
tsVibeEditor.tsx
1import React from "react";
2
3export function VibeEditor() {
4return (
5<div className="vibe-station">
6Hello World
7</div>
8);
9}
main*0 errorsLn 5, Col 24UTF-8TypeScript React

Included Snippets

Drag and Drop Board

Optimized drag-and-drop context for columns.

kanban-board
1<DndContext
2  sensors={sensors}
3  collisionDetection={closestCorners}
4  onDragEnd={handleDragEnd}
5  onDragOver={handleDragOver}
6>
7  <div className='flex gap-4 overflow-x-auto h-full'>
8    {columns.map(col => (
9      <SortableContext key={col.id} items={col.taskIds}>
10        <Column id={col.id} tasks={col.tasks} />
11      </SortableContext>
12    ))}
13  </div>
14</DndContext>
PRO KITby IdeKit

Project Board Box

A Linear-style issue tracking application template. Features a high-performance Kanban board with drag-and-drop (dnd-kit), keyboard shortcuts, and issue filtering. Built on Next.js 14.

Tech Stack
Next.js 14dnd-kitTailwindLucide
$99
One-time payment
Availability
45 / 50 left

Secured by Stripe