--- title: Build a drag and drop Kanban Board with React,... description: Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit. This project is a great way to practice your React skills and learn some new... canonical: https://daily.dev/posts/build-a-drag-and-drop-kanban-board-with-react-typescript-tailwind-dnd-kit-anrmqyogp twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit | daily.dev og:description: Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit. This project is a great way to practice your React skills and learn some new... og:url: https://daily.dev/posts/build-a-drag-and-drop-kanban-board-with-react-typescript-tailwind-dnd-kit-anrmqyogp og:image: https://api.daily.dev/og/posts/aNrMqYOgP.png og:image:alt: Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit **[ITNEXT](https://daily.dev/sources/itnext)** · [@kliton](https://daily.dev/kliton) · 1 min read · 151 upvotes · 9 comments ## Summary Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit. This project is a great way to practice your React skills and learn some new techniques and libraries. So what are you waiting for? Check out the video below and let me know what you think in the comments. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@niklasrefnov** · 3 upvotes > Really dig how it combines React, TypeScript, Tailwind, and dnd-kit for a sleek Kanban Board. Great way for intermediate devs to get hands-on experience with these. That inline editing part is a neat touch. **@alsiam** · 2 upvotes > thanks for sharing..! **@kliton** · 2 upvotes > [Result](https://react-kanban-board-dnd-kit-tutorial-yt.vercel.app/) > > [Github repository](https://github.com/Kliton/react-kanban-board-dnd-kit-tutorial-yt) **@nikl** · 0 upvotes > That's cool. **@atticus7** · 0 upvotes > Thanks for sharing. > p.s wonder why use 'Kanban' word, is it from Chinese '看板'? --- Tags: [#react](https://daily.dev/tags/react), [#webdev](https://daily.dev/tags/webdev), [#typescript](https://daily.dev/tags/typescript), [#tailwind-css](https://daily.dev/tags/tailwind-css) [View this post on daily.dev](https://daily.dev/posts/build-a-drag-and-drop-kanban-board-with-react-typescript-tailwind-dnd-kit-anrmqyogp) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit","url":"https://daily.dev/posts/build-a-drag-and-drop-kanban-board-with-react-typescript-tailwind-dnd-kit-anrmqyogp","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/build-a-drag-and-drop-kanban-board-with-react-typescript-tailwind-dnd-kit-anrmqyogp"},"datePublished":"2023-08-02T19:03:19.017Z","dateModified":"2023-08-03T16:00:07.814Z","description":"Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit. This project is a great way to practice your React skills and learn some new...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c9974efcb5e3b5e5371fe1d3360e0ed7?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c9974efcb5e3b5e5371fe1d3360e0ed7?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"ITNEXT","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Kliton Bare","url":"https://daily.dev/kliton","image":"https://media.daily.dev/image/upload/f_auto/v1664104847/avatars/8SaTDkd276CpjZnIGnFat","description":"Passionate. Writer. Technical lead and cofounder of Umes.io","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":690}},"commentCount":9,"discussionUrl":"https://daily.dev/posts/build-a-drag-and-drop-kanban-board-with-react-typescript-tailwind-dnd-kit-anrmqyogp","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":151},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":9}],"keywords":"react,webdev,typescript,tailwind-css","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"ITNEXT","item":"https://daily.dev/sources/itnext"},{"@type":"ListItem","position":3,"name":"Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/build-a-drag-and-drop-kanban-board-with-react-typescript-tailwind-dnd-kit-anrmqyogp","comment":[{"@type":"Comment","text":"Really dig how it combines React, TypeScript, Tailwind, and dnd-kit for a sleek Kanban Board. Great way for intermediate devs to get hands-on experience with these. That inline editing part is a neat touch.","datePublished":"2023-08-04T07:30:00.634Z","url":"https://daily.dev/posts/aNrMqYOgP#c-CXi9L5CEs","author":{"@type":"Person","name":"Niklas Refnov","url":"https://daily.dev/niklasrefnov","image":"https://media.daily.dev/image/upload/s--uFGEfXTn--/f_auto,q_auto/v1/avatars/avatar_5pht0nenOD0YJqflNsYht"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"thanks for sharing…!","datePublished":"2023-08-04T14:45:26.509Z","url":"https://daily.dev/posts/aNrMqYOgP#c-F0IeFw412","author":{"@type":"Person","name":"Saif Al Siam","url":"https://daily.dev/alsiam","image":"https://media.daily.dev/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Result\nGithub repository","datePublished":"2023-08-02T19:26:24.393Z","url":"https://daily.dev/posts/aNrMqYOgP#c-rPgSsKsDW","author":{"@type":"Person","name":"Kliton Bare","url":"https://daily.dev/kliton","image":"https://media.daily.dev/image/upload/f_auto/v1664104847/avatars/8SaTDkd276CpjZnIGnFat"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"That’s cool.","datePublished":"2024-01-16T14:15:35.128Z","url":"https://daily.dev/posts/aNrMqYOgP#c-xlD7IHvxZ","author":{"@type":"Person","name":"Nik L","url":"https://daily.dev/nikl","image":"https://media.daily.dev/image/upload/s--BowuJ7nG--/f_auto/v1705327749/avatars/avatar_lVzGcazWvJj9VtTBEhdgv"}},{"@type":"Comment","text":"Thanks for sharing.\np.s wonder why use ‘Kanban’ word, is it from Chinese ‘看板’?","datePublished":"2023-10-19T01:52:01.873Z","url":"https://daily.dev/posts/aNrMqYOgP#c-iebft5gLo","author":{"@type":"Person","name":"Atticus","url":"https://daily.dev/atticus7","image":"https://lh3.googleusercontent.com/a/ACg8ocL4qT4V1_l9D5zk4VGj5-koEaR9p56cTREHDIuZkbXm=s96-c"}}]} ```