Understanding the Todo List App Block
A todo list app tracks small units of work from captured to done, and this block implements the whole loop as a single full-page component. Tasks live in three color-coded sections, each task carries a high, medium, or low priority plus a creation timestamp, and a header progress bar shows how much of the day's work is already complete.
What sets the block apart is the dual view. A toggle in the header switches between a kanban layout, where sections render as columns, and a flat list view for focused scanning. Both views read from the same store, so switching never loses state.
From Personal Tasks to Team Boards
The block covers a wide range of products. Solo users get a daily planner, startups embed it as the task module of a bigger workspace, and internal tools teams use it to track tickets or review queues without adopting a heavyweight project manager.
If your roadmap grows past simple todos, the same interaction patterns scale up. The column logic here is a compact cousin of the full kanban board block, and the richer tasks app adds deadlines and progress tracking on top of similar foundations.
Built With React, Zustand, and dnd-kit
Sections and the active view mode live in a Zustand store with persistence, which keeps the React components small: they read state, render, and dispatch updates. The store seeds realistic demo tasks so the preview feels alive from the first render.
Dragging is handled by the dnd-kit sortable preset. A DndContext with closestCorners collision detection lets cards move within a column and across columns, a DragOverlay renders a floating preview of the card while it travels, and arrayMove plus a restrictToWindowEdges modifier keep reordering precise. A PointerSensor activation distance prevents accidental drags when users simply click a checkbox.
Custom Colors for Your Task Lists
Section accents use violet, amber, and emerald Tailwind scales, while everything else, cards, borders, muted text, flows from the Shadcn UI design tokens defined as CSS variables in globals.css. That split means you can rebrand in two moves: change the token values for the overall surface, and swap the three accent names for your own palette.
Dark and light mode both work out of the box because no color is hardcoded as a hex value in the components. The progress bar, badges, and column headers all derive from tokens or Tailwind scales with dark variants.
Inside the Block: Shadcn UI Components
The build uses Toggle for the kanban and list view switch, Checkbox for completing tasks, Input for adding new ones, Select and Dropdown Menu for priorities and per-task actions, and Button throughout. Types for todos, sections, and priorities are defined in a dedicated types file, which makes extending the model straightforward.
The block is published in React, Vuejs, and Svelte versions. The Vuejs and Svelte editions build on the shadcn-vue and shadcn-svelte ports, so every framework community gets the same board with native components.
Installing the Todo App
Install with the shadcn CLI command displayed at the top of the example page, available for npm, pnpm, yarn, and bun, or copy the store, types, and component files from the code tab. Since this is a pro block, both paths are part of the All Access plan described on the pricing page.
Once installed, connect real data by replacing the seeded sections in the store with a fetch from your API, and call your backend inside the store actions that toggle, add, and move todos. The drag and drop layer needs no changes when the data source switches.